HYVV Design System
Live reference · primitives · blocks · archetypes
packages/ui/src/components/hyvv-design
What ships across the marketing site + dashboard today. Edit tokens in packages/ui/src/styles/globals.css and every consumer updates here. To redline anything, edit docs/design/palette-current.md and tell Claude to apply.
This page is the canonical HYVV design system. Both Cursor + Claude consult it.
Before building any UI in apps/dashboard or apps/marketing: check this page first. If a primitive / block / archetype exists here, use it. Don't reimplement. If it doesn't exist and you need it, add it to packages/ui/src/components/hyvv-design and surface it here in the matching section. Tokens live in packages/ui/src/styles/globals.css — never use raw hex literals in JSX.
Every semantic token in globals.css with the runtime hex value. Dark-mode hex shown when it differs.
Add a blue accent (separate from brand-purple) + a green accent (separate from money). Tell me which hex of each you want and I'll commit them to globals.css.
Blue option
A · cobalt
#3B82F6
Bright, neutral, confident — Tailwind blue-500
B · sky
#0EA5E9
Brighter, friendlier — Tailwind sky-500
C · deep
#2563EB
Quieter, more serious — Tailwind blue-600
Green option (distinct from --money #10B981)
A · forest
#047857
Deep, professional, financial
B · sage
#65A30D
Warmer, organic — Tailwind lime-600
C · evergreen
#14532D
Very dark, premium — Tailwind green-900
Pending color (replacing --gold-amber #C18B23)
A · keep amber, rename
#C18B23
No visual change — just rename token to --pending
B · terracotta
#C2410C
Warmer, less yellow — feels more "in progress"
C · slate
#64748B
Neutral — pending becomes informational, not warning
brand-purple
#5B5BFF / #6B6BFF
brand-purple-2
#4747F2
brand-purple-soft
#ECECFF
brand-purple-line
#C8C8FF
brand-yellow
#FFE744
money
#10B981 / #34D399
money-soft
#E8F5EE
warn
#EF4444 / #F87171
warn-soft
#FEEAEA
gold-amber
#C18B23 / #E2A845
gold-soft
#F5EDD7
background
#FAFAFA
card
#FFFFFF
secondary
#F5F5F7
canvas-primary
rgba(14,17,23,0.015)
canvas-secondary
rgba(14,17,23,0.025)
canvas-tertiary
rgba(14,17,23,0.04)
foreground
#0E1117
ink-stone
#4A4D55
ink-mist
#71747D
ink-fog
#A8AAB1
border
#E4E4E7
accent-plum
#5B3A6A / #8B66A0
accent-plum-soft
#EFE6F2
accent-amber
#D97706 / #F59E0B
accent-amber-soft
#FEF3E6
accent-teal
#0D9488 / #2DD4BF
accent-teal-soft
#E0F5F2
window-close
#FF5F57
window-minimize
#FEBC2E
window-maximize
#28C840
brand-stripe
#635BFF
terminal-bg
#0A0D14
code-block-bg
#0F1118
Onest for everything; JetBrains Mono for numbers, code, and mono labels.
Display heading
Onest 600 · tracking-tight
Page H1
Onest 600 · text-2xl
Section H2
Onest 600 · text-xl
Body text
Onest 400 · text-sm
Define waterfall rules once. When revenue arrives, HYVV runs the splits and pays every partner through Stripe.
Muted text
Onest 400 · text-sm · muted-foreground
Every revenue event, calculation, and transfer is logged with an immutable audit trail.
Eyebrow (brand-purple)
11px · uppercase · 0.08em tracking
Mono numbers
JetBrains Mono · tabular-nums (current)
$84,210.00
Mono font comparison · pick one to become canonical
Each row renders the SAME numbers in a different font — eyeball + tell me which feels right
JetBrains Monocurrent
Same number set, different family
IBM Plex Mono
Same number set, different family
Roboto Mono
Same number set, different family
Source Code Pro
Same number set, different family
Space Mono
Same number set, different family
DM Mono
Same number set, different family
The atomic building blocks. Every block + archetype composes from these.
HyvvMark · the brand mark
Replaces ★ in HyvvCorpBadge. Use anywhere the company brand should be felt — signed receipts, certifications, public profiles. Currentcolor for stroke; brand-yellow always for the middle card.
20px
32px
48px
64px
on dark
on brand
WhisperCard · all 5 accents
No accent
Default surface
brand-yellow
Hero stamp accent
brand-purple
Primary brand
money
Money-positive
gold
Pending / amber
Eyebrow · 4 tones
BrandStampValue · WhisperValue · TrendHint
MetricRow
LegendDot · ProgressRing · SegmentedProgress
LegendDot
ProgressRing
SegmentedProgress
Buttons · canonical variants
The chrome every dashboard page wears: PageTopbar (HYVV mark + breadcrumb) and PageHero (eyebrow + h1 + sub).
PageTopbar · with breadcrumb + meta
PageHero · brand-purple eyebrow + h1 + sub
Cross-venture revenue, distributions, and contributor performance over time.
TabPills · active state
FilterBar · filters left, action right
KpiStrip + BreakdownTable cover the bulk of the analytics archetype.
KpiStrip · 4-up
REVENUE · 90D
DISTRIBUTED · 90D
OPERATOR TAKE
61% net
CONTRIBUTORS
BreakdownTable
Per-venture breakdown
7 active · sorted by ytd ↓
| Venture | YTD | Growth | Avg payout | Cycle |
|---|---|---|---|---|
| NovaCraft Studios | $84,210 | ↑ 32% | $2,184 | 7d |
| Neon Labs | $62,440 | ↑ 18% | $1,640 | 7d |
| Acme SaaS | $48,290 | ↑ 24% | $1,210 | 7d |
CardGrid + IntegrationCard for the box-12 marketplace pattern.
CardGrid · 3 columns of IntegrationCard · all 3 status variants
Payouts to partners and contributors. The default rail for HYVV.
Bank account verification and transaction sync.
Operating account linked via Plaid.
E-signature for operating agreements and earn-link contracts.
Identity verification for high-value claimants. Required for $5K+ payouts.
Auto-export earnings and distributions to your books.
SettingsCard + SettingsRow for any /settings/* fragment.
SettingsCardStack with 2 SettingsCards
Set your name and contact information. The email here is also used for login.
Name
Avatar
JPG or PNG, max 2MB
Choose which transactional and marketing emails you receive from HYVV.
Payout receipts
Sent after every distribution
Weekly digest
Friday afternoon summary
Marketing updates
Product news + roadmap
DetailLayout + DetailMetaRow for record-detail pages (single agreement / receipt / contact).
DetailLayout · main + aside
Earn-link lk_8fJ24a · weekly cycle ending May 5
WizardProgress + WizardStepFrame for onboarding, HF wizard, deep-dive flows.
WizardProgress · step 3 of 7
WizardStepFrame · with form + footer
Decide how ownership is split among your founding team. This is editable until everyone signs.
Founder (you)
Co-founder
Partner
Reserve
Page templates that compose the shell + blocks above. Each is a thin skeleton — pages become 5-15 lines of composition.
Available archetypes
<AnalyticsPage>
Reports / Revenue / Cap Table / Ledger
<MarketplacePage>
Integrations / HF Services / Modules
<SettingsPage>
Every /settings/* fragment
<DataTablePage>
Members / Agreements / Receipts / Contacts
<RecordDetailPage>
Single Agreement / Recipient / Foundation
<WizardPage>
Onboarding / HF wizard / deep-dive flows
<AuthPage>
Sign-in / Sign-up / Forgot-password / Verify-email
Verify imports compile
If this list TypeScript-resolves, every archetype is reachable from the design-system route
✓ a0 resolved
✓ a1 resolved
✓ a2 resolved
✓ a3 resolved
✓ a4 resolved
✓ a5 resolved
✓ a6 resolved
12 chart components ship today (recharts + @nivo/sankey + @nivo/treemap). Below: the existing roster as a roster card grid, then 7 new chart types — pick which ones to build first.
Existing chart components (12)
all consume canonical chart-1..5 palette via packages/ui/src/components/chart.tsx
<IncomeChart>
area
apps/dashboard/.../portfolio/income-chart.tsx
<IncomeTrendChart>
area
.../slug/finance/income-trend-chart.tsx
<RevenueExpenseCharts>
area
.../slug/home/revenue-expense-charts.tsx
<PayoutTrendChart>
area
.../slug/revenue/payout-trend-chart.tsx
<OwnershipBarChart>
bar
.../cap-table/ownership-bar-chart.tsx
<ExpensesTrendChart>
bar
.../slug/finance/expenses-trend-chart.tsx
<EquityDonutChart>
donut
.../cap-table/equity-donut-chart.tsx
<PortfolioDistributionChart>
distribution
.../portfolio/portfolio-distribution-chart.tsx
<WaterfallChart>
waterfall · custom SVG
.../slug/revenue/waterfall-chart.tsx
<VestingTimelineChart>
timeline
.../cap-table/vesting-timeline-chart.tsx
<LaunchProgressChart>
progress
.../slug/launch-suite/dashboard/launch-progress-chart.tsx
<RevenueSankey>
sankey · @nivo/sankey
.../portfolio/revenue-sankey.tsx
Existing Sankey · live preview
apps/dashboard/components/organizations/portfolio/revenue-sankey.tsx — needs to be promoted to packages/ui to render here for real
Revenue Sankey — money flow visualization
Built with @nivo/sankey, lives in apps/dashboard/components/organizations/portfolio/revenue-sankey.tsx. To render the live component here, either promote it to packages/ui or add @nivo/sankey as a marketing dependency. PR-E will decide.
Sketch only — real Sankey from live data will replace this in PR-E
New chart types · pick 3-5 to build
None of these exist yet — tell me which ones to add to packages/ui/src/charts/
<HeatGrid>
Calendar-style activity heatmap (payouts per day, claims per week)
<Gauge>
Single-metric gauge with min/max range (runway floor, cap progress)
<Funnel>
Multi-stage conversion (recipients → onboarded → connected → paid)
<Treemap>
@nivo/treemap already installed; revenue by venture nested by category
<MiniSparklineCard>
KPI value with inline trend sparkline (used heavily in mockups)
<StackedArea>
Recharts already supports it; show contribution layers over time
<RadialProgressCluster>
3-4 progress rings clustered (funding-round goals, multi-target)
6 new chart + chart-adjacent components extracted from the canonical Maya earner dashboard + cap-table mockups. All composable via the canonical token palette.
RainbowDivider · 4-stop gradient strip
Place at the top of pages above the topbar — quiet flash of brand identity
Default stops: brand-purple → accent-teal → money → brand-yellow
GradientHeroCard · brand-purple bordered hero with subtle gradient + sparkline
Maya's '$8,420.50 LIFETIME EARNINGS' card pattern. Use ONCE per page.
$8,420.50
MiniSparklineCard · 3-up grid (THIS WEEK / THIS MONTH / YTD)
The KPI strip below the hero card on Maya's dashboard
THIS WEEK
$420.00
THIS MONTH
$1,640.00
2026 YTD · TAXABLE
$6,124.00
CapProgressBar · earn-link cap visualization
Pattern from Maya's 'My active earn-links' cards — current vs cap with leftover label
NovaCraft Studios
Paying5% of net · 24mo term · cap $5,000
$3,420.00EARNED · 68% TO CAP
$1,580 left
Pixel Crate
Paying3% of gross · 18mo term · cap $5,000
$3,160.30EARNED · 63% TO CAP
$1,840 left
Sparkline · standalone primitive
The atom that powers MiniSparklineCard + GradientHeroCard. Inline-able anywhere
Brand purple, fill, end-dot
Money green, no fill
Accent amber, fill, taller
Avatar · letter initials, deterministic color rotation
Used in workspace switcher (NS/HC/PC/NL/MK) + recipient rows. Same input always renders same color.
Auto color (derived from initials)
Explicit tones
Sizes
Composed example · earn-link card mirroring Maya's dashboard
MiniSparklineCard + Avatar + CapProgressBar working together — what shipping looks like
Harbor Consulting
lk_2hP91d · claimed today
4% of net · 12mo term · cap $4,000
$0.00Awaiting first cycle
$4,000 left
first payout Fri May 8
The customer watches AI agents form their company in parallel. These six components surface that work — streaming text, animated agents, live event feed, phase progress, task orchestration, and the moment the AI hands off to the human.
BurstPhaseHero · running formation hero
Animated progress ring + live phase strip + active sub-tasks. Place ONCE at top of /hyper-formation/executing.
Forming NovaCraft StudiosETA 12 min
StreamingThoughtPanel · token-by-token AI reveal
The 'AI is thinking' UI. Loops every ~10s on this page. Click 'Show reasoning' to see chain-of-thought.
@doc_agent
streamingAgentCard · grid of agents working in parallel
Each agent: status pill + current task + animated progress. Pulsing brand-purple dot when working.
Filing Agent
WORKINGState formation + registered agent
Submitting Articles of Organization to DE SoS
~4 min
EIN Agent
DONEIRS SS-4 + tax registration
EIN received: 88-1234567 · DBA filed
Doc Agent
WORKINGLegal document drafting
Drafting Operating Agreement (Section 4 of 9)
~5 min
Mercury Agent
BLOCKEDOperating account + treasury
Awaiting wire setup confirmation from founder
TaskOrchestrator · the 'lots happening at once' view
Header counts (working/done/pending/blocked) + per-task rows with status icon + agent + animated progress.
Live formation tasks · 8 in flight
File Articles of Organization
Obtain EIN
Draft Operating Agreement
60%
Open Stripe Connect account
38%
Open Mercury operating account
Reserve domain + DNS
Generate brand kit
Set up Google Workspace
LiveProgressTicker · streaming event feed
New events slide in top, oldest fade out bottom. New event every ~3s. Wire to SSE / Vercel Queue in production.
Live · last 60 seconds
4 events
@filing_agent submitted DE Articles of Organization
now
@ein_agent received EIN: 88-1234567
10s ago
@doc_agent drafted Operating Agreement (4 sections)
17s ago
@stripe_agent preparing Connect onboarding link
24s ago
ProviderHandoffCard · 'AI did everything, you take over here'
When formation hits a step the AI can't authenticate (Stripe KYC, bank wire setup, etc.). Shows what AI did + what you do, in that order, to build trust before asking for action.
Handoff · Stripe Connect
Stripe Agent prepared everything — you take it from here
Done by Stripe Agent
Next · You
Verify your identity with Stripe (selfie + government ID). Stripe needs this directly from you — we can't submit it on your behalf.
~3 minutes of your time
Donut + area + bar charts in the canonical theme. Custom-SVG donut for distributions; recharts-based area + bar for time-series. All consume canonical color tokens — no hardcoded hex.
DonutChart · 'Distribution by recipient · YTD 2026'
The exact pattern from image #3 — donut + center label + breakdown rows with name/role/amount/%. 'Other contributors' auto-collapses past N rows.
Distribution by recipient · YTD 2026
top 5 recipients · 96.7% of total
YTD DISTRIBUTED
$84.2K
across 1,247 payouts
Robert Schachter
founder · 45% equity rev share
$37,894.50
43.8%
Alex Rivera
co-founder · 25% equity + earn-link lk_8fJ24a
$24,472.70
28.3%
Jamie Chen
partner · 15% equity rev share
$12,631.50
14.6%
Sam Patel
advisor · 10% equity rev share
$8,421.00
9.7%
@dev.collective
contributor · earn-link lk_4kP02g
$1,840.50
2.1%
A. Founder Salary
monthly draw
$600.00
0.7%
2 other contributors
combined
$750.00
0.9%
CapTableSummaryStrip + DonutChart · NovaCraft cap-table top
The 4-stat strip + ownership donut combo from the cap-table mockup. First stat uses brand-yellow stamp accent (with thin black border); rest are neutral.
IMPLIED VALUATION
↑ 42% from last round
TOTAL AUTHORIZED
units
ISSUED
85.0% allocated
OPTION POOL
15% reserved
Ownership Distribution
fully diluted · all classes
ISSUED
8.5M
of 10M authorized
Robert Schachter
Common · founder
4,000,000
40.0%
Alex Rivera
Common · co-founder
2,500,000
25.0%
Option Pool
reserved · unallocated
1,500,000
15.0%
Jamie Chen
Common · partner
1,000,000
10.0%
Sam Patel
Common · advisor
500,000
5.0%
Reserved
unissued
500,000
5.0%
RevenueAreaChart + PeriodSelector · 'Revenue & distributions over time'
Box-10 reports pattern. Brand-purple area = revenue, dashed ink-stone = distributions. Click 7d/30d/90d/YTD to swap data.
Revenue & distributions over time
primary = revenue · dashed = distributions
ExpenseBreakdownChart · spend by category
Horizontal bar chart sorted descending. Each bar gets a different color from the brand palette so categories are visually distinct.
Expenses · last 30 days
$48,290 total · 7 categories
PeriodSelector · standalone
Pill row used in the chart headers above. Stateful — click to toggle.
Active: 90d — click to switch
Distributions page · DistributionByRecipientCard + RecipientsTable
The full layout from your reference image. DonutChart wrapped with header/meta/chip/footer + a responsive recipients table with avatar / source / stripe / cap progress / lifetime columns. Resizes to mobile cards below md.
Distribution by recipient · YTD 2026
top 5 recipients · 96.7% of total
YTD DISTRIBUTED
$84.2K
across 1,247 payouts
Robert Schachter
founder · 45% equity rev share
$37,894.50
43.3%
Alex Rivera
co-founder · 25% equity + earn-link lk_8fJ24a
$24,472.70
27.9%
Jamie Chen
partner · 15% equity rev share
$12,631.50
14.4%
Sam Patel
advisor · 10% equity rev share
$8,421.00
9.6%
@dev.collective
contributor · earn-link lk_4kP02g
$1,840.50
2.1%
7 other contributors
earn-links · combined
$2,318.30
2.6%
Recipients · cap progress & lifetime totals
12 active · 2 with caps progressing
| Recipient | Source | Stripe | Last payout | Cap progress | Lifetime |
|---|---|---|---|---|---|
RS R. Schachter founder · weekly | eq_RS-45 equity rev share | connected | $1,053.00 | no cap · perpetual | $37,894.50 |
AR A. Rivera co-founder · earn-link + equity | lk_8fJ24a 5% net · 24mo | connected | $418.20 | $1,580 left | $24,472.70 |
JC J. Chen partner · weekly | eq_JC-15 equity rev share | connected | $351.00 | no cap · perpetual | $12,631.50 |
SP S. Patel advisor · weekly | eq_SP-10 equity rev share | onboarding | $234.00 | no cap · perpetual | $8,421.00 |
DC @dev.collective contributor · earn-link · weekly | lk_4kP02g 2.5% net · 36mo | connected | $72.00 | $2,280 left | $1,840.50 |
+7 7 other contributors | various earn-links | connected | — | mixed caps | $2,318.30 |
R. Schachter
founder · weekly
Lifetime
$37,894.50
Source
eq_RS-45 · equity rev share
Last payout
$1,053.00
Stripe
connected
no cap · perpetual
A. Rivera
co-founder · earn-link + equity
Lifetime
$24,472.70
Source
lk_8fJ24a · 5% net · 24mo
Last payout
$418.20
Stripe
connected
Cap progress
$1,580 left
J. Chen
partner · weekly
Lifetime
$12,631.50
Source
eq_JC-15 · equity rev share
Last payout
$351.00
Stripe
connected
no cap · perpetual
S. Patel
advisor · weekly
Lifetime
$8,421.00
Source
eq_SP-10 · equity rev share
Last payout
$234.00
Stripe
onboarding
no cap · perpetual
@dev.collective
contributor · earn-link · weekly
Lifetime
$1,840.50
Source
lk_4kP02g · 2.5% net · 36mo
Last payout
$72.00
Stripe
connected
Cap progress
$2,280 left
7 other contributors
$2,318.30
A HYVV Corp is a company with all three rails connected — Bank (Mercury / Brex / Rho / via Plaid), Payments (Stripe Connect), and Books (Wave / QuickBooks). Once all three sync, the company gets the HYVV CORP certification badge.
HyvvStackProgress · the master status card · 2 of 3 connected
HYVV Stack
2/3 connected
01Bank· Mercury
operating account · ...4521 · synced 2 min ago
02Payments· Stripe Connect
standard account · weekly payouts · 12 active recipients
03Books
Pick QuickBooks or Wave to auto-export receipts and reconcile daily
HyvvStackProgress · 3 of 3 — HYVV CORP CERTIFIED
Brand-yellow stamp banner appears at top when all three connect.
Certification
HYVV CORP — full stack connected
Reconciliation auto-syncs · receipts auto-export · ledger always current
01Bank· Mercury
operating account · ...4521 · synced 1 min ago
02Payments· Stripe Connect
$8,420 routed this week · all 12 recipients paid
03Books· QuickBooks
47 entries auto-synced today · 0 needing review
ProviderConnectionCard · brand-styled per provider
Each provider's actual brand color on the avatar so users instantly know what they're connecting. Stack ribbon (BANK / PAYMENTS / BOOKS) in the top-right of each card.
Mercury
operating account ...4521
synced 2 min ago
Stripe Connect
$8,420 in transit · settles Fri
webhook 6 sec ago
QuickBooks
auto-export receipts to your books
Brex
onboarding · $0 EIN required
started 14 min ago
Wave
OAuth token expired · reconnect to resume
last sync 3 days ago
Plaid
bank verification + transaction sync
synced 14 min ago
MoneyFlowDiagram · visual money path through the stack
The killer visual. Shows Bank ↔ Stripe ↔ Distributions left-to-right at desktop, vertical at mobile. Center node is emphasized.
Money flow · last 30 days
Bank
Mercury · operating
$24,800
$8,420 weekly · auto
Payments
Stripe Connect
$84,210
$2,184 avg · 7 day cycle
Distributions
12 recipients
$32,840
TreasurySnapshot · combined balance across the stack
Treasury · combined balance
$39,605.13
across 4 sources
Mercury · operating
available now
$24,800.45
62.6%
Stripe · in transit
settles Fri May 8
$8,420.18
21.3%
Reserved · refund float
5% of last 90d revenue
$4,200.00
10.6%
Distributions · this cycle
queued for Fri
$2,184.50
5.5%
ReconciliationStatus · in sync (green) AND needs review (amber)
In sync
QuickBooks matches HYVV ledger
Needs review
12 entries need a closer look
HyvvCorpBadge · the 'verified' mark
Appears on company cards, public profiles, shared receipts, agreement signatures. Two render modes (chip + card), three sizes.
Chip · 3 sizes · certified
Chip · in progress (not all 3 connected)
Card variant · certified vs not
HYVV CORP · CERTIFIED
Bank✓Stripe✓Books✓
HYVV Stack
Bank✓StripeBooks
The customer-facing surface for HYVV Earn Links — what claimers see when they land on hyvv.io/earn/lk_XXX, what operators see in analytics, and how a creator's bio looks when they paste an Earn Link in their Instagram profile.
EarnLinkPreviewCard · the public claim page
What recipients see when they click an Earn Link from a creator's bio. Brand-color hero · headline · description · 4-cell terms grid · social proof · brand-yellow stamp CTA.
NovaCraft Studios
design + product · indie SaaS · 2026 cohort
We're a small design studio shipping a handful of niche tools. If you mention us in your newsletter, post, or YouTube review and someone signs up, you earn 5% of every dollar they spend with us — for 24 months. Daily payouts to your Stripe.
RATE
5%
of net sales
CAP
$5K
lifetime maximum
WINDOW
24mo
from claim date
CYCLE
Weekly
payout schedule
DealTermsCard · standalone terms grid
The 4-cell breakdown used inside EarnLinkPreviewCard. Use standalone in operator dashboards too.
RATE
5%
of net sales
CAP
$5K
lifetime maximum
WINDOW
24mo
from claim date
CYCLE
Weekly
payout schedule
EarnLinkAnalyticsCard · operator view
Per-link KPIs (clicks / claims / paid out) with conversion % + 30-day clicks sparkline. Status pill flips to LIVE pulse when active.
hyvv.io/earn/lk_8fJ24a
NovaCraft → 5% of net · 24mo · cap $5K
CLICKS
1,284
CLAIMS
47
3.7% conv
PAID OUT
$28.4K
this earn link
Clicks · last 30 days
hyvv.io/earn/lk_2hP91d
Harbor Consulting → 4% of net · 12mo · cap $4K
CLICKS
342
CLAIMS
8
2.3% conv
PAID OUT
$2.8K
this earn link
Clicks · last 30 days
SocialBioLink · creator bio profile preview
What @maya.kim's profile at hyvv.io/maya.kim looks like when she's set up earn links for 4 ventures. Each link card with brand color + earn badge + sub.
@maya.kim
284K followers12 active deals$8.4K earned
Senior product designer · independent · helping early-stage SaaS find product-market fit. Email me at maya@studio.kim.
6 phone-frame mockups composed from existing primitives. These are what every HYVV surface looks like at 320×680. Useful for marketing screenshots, App Store assets, and validating that the design system holds up at mobile width.
6-up phone gallery — every major HYVV surface
Each phone is a real composition of primitives — not a screenshot. Re-renders cleanly with any token change.
HDashboard
Hyper Formation
Stack
Cap Table
Receipt