Component · v0.1 · live SVG

Chart primitives.

Aqua-styled bar, line, donut, KPI tile, and sparkline. All inline SVG — no chart library required. Drop them into any artifact; they inherit the brand color sequence automatically.

Bar — quarterly

Sequential brand colors · grid lines in border-light · serif numerals on hover.

Realized Booked Q4 hot

Line + area — AUM trend

10–20% opacity area fill under the primary line. Single accent point for callouts.

Total AUM Latest

Donut — allocation breakdown

Center number in serif. Legend right with absolute values.

Private Equity45%

Real Estate30%

Credit16%

Hedge9%

KPI tile cluster

Serif numerals (Playfair). Overline label in mono. Delta below in success or error.

Total AUM

$4.7B

+8.2% QoQ

Net IRR

14.2%

+1.4% YoY

Investors

10,284

+612 MoM

Pipeline

$842M

−3.1% QoQ

Sparkline list — fund performance

Inline mini-trends next to label and value. 80×32 SVG, single line per row.

Meridian Multifamily DST IVSPONSOR · MERIDIAN

5.4%

Cornerstone Industrial DST IIISPONSOR · CORNERSTONE

5.1%

Pacific Self-Storage DST IISPONSOR · PACIFIC

4.8%

Atlas Net-Lease Retail DSTSPONSOR · ATLAS

5.8%

Chart rules (from the design system)

Color sequence: #28020F → #C1D6FF → #E35300 → #8DA7DB → #EDE3DA → #5A5A5A
Grid lines: #F0ECE8 (very subtle, warm gray)
Axis labels: 10–11px JetBrains Mono, color #8A8A8A
No chart borders or heavy frames — let the data breathe
Area fills: 8–20% opacity under the primary line
KPI numbers: serif (Playfair Display) at weight 400, never bold
Tooltips (when added): white background, 12px radius, subtle shadow