HYVV Design System
Live reference · primitives · blocks · archetypes
packages/ui/src/components/hyvv-design
Every component, every token, in one place.
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.
Palette
Every semantic token in globals.css with the runtime hex value. Dark-mode hex shown when it differs.
Blue + green accent additions
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
brand-purple
#5B5BFF / #6B6BFF
brand-purple-2
#4747F2
brand-purple-soft
#ECECFF
brand-purple-line
#C8C8FF
brand-yellow
#FFE744
Status
money
#10B981 / #34D399
money-soft
#E8F5EE
warn
#EF4444 / #F87171
warn-soft
#FEEAEA
gold-amber
#C18B23 / #E2A845
gold-soft
#F5EDD7
Surface
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)
Text (foreground tokens — shown as backgrounds for contrast)
foreground
#0E1117
ink-stone
#4A4D55
ink-mist
#71747D
ink-fog
#A8AAB1
border
#E4E4E7
Accent (mockup-derived — for avatars + chart slots)
accent-plum
#5B3A6A / #8B66A0
accent-plum-soft
#EFE6F2
accent-amber
#D97706 / #F59E0B
accent-amber-soft
#FEF3E6
accent-teal
#0D9488 / #2DD4BF
accent-teal-soft
#E0F5F2
Decorative
window-close
#FF5F57
window-minimize
#FEBC2E
window-maximize
#28C840
brand-stripe
#635BFF
terminal-bg
#0A0D14
code-block-bg
#0F1118
Typography
Onest for everything, including headline/display numerics (tabular-nums tracking-tight). Roboto Mono only for small dense numerics, hashes, code identifiers, terminal output, and table cells where column scanning matters.
Display heading
Onest 600 · tracking-tight
Ownership That Pays
Page H1
Onest 600 · text-2xl
Reports
Section H2
Onest 600 · text-xl
Per-venture breakdown
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 · small/dense use only
Roboto Mono · tabular-nums — reserved for dense table cells, hashes, code identifiers, terminal output; headline/display numerics use Onest with tabular-nums tracking-tight instead
$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
Primitives
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
Page shell
The chrome every dashboard page wears: PageTopbar (HYVV mark + breadcrumb) and PageHero (eyebrow + h1 + sub).
PageTopbar · with breadcrumb + meta
Integrations
PageHero · brand-purple eyebrow + h1 + sub
Reports
Cross-venture revenue, distributions, and contributor performance over time.
TabPills · active state
FilterBar · filters left, action right
Analytics blocks
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 |
TodayMetricStrip · 3-up + recommendation rail
Stripe Home's 'Today' pattern. First metric uses variant="stamp" — the calm brand-yellow left-edge accent, reserved for ONE hero KPI per strip.
Today
Tuesday, July 14
Today's earnings
$4,820.00
312 payouts settled
USD balance
View$18,204.50
Pending approvals
3
Awaiting a decision
Recommendation
Enable weekly payouts
Contributors are asking for faster settlement. Switching from monthly to weekly takes one click.
Review payout schedule →TabbedCountCards · interactive filter row
3-4 large clickable cards, active card gets a brand-purple ring + tint. Click a card to switch the surrounding view's subset.
Active: active — click a card to switch
Marketplace blocks
CardGrid + IntegrationCard for the box-12 marketplace pattern.
CardGrid · 3 columns of IntegrationCard · all 3 status variants
Stripe Connect
Payouts to partners and contributors. The default rail for HYVV.
Plaid
Bank account verification and transaction sync.
Mercury
Operating account linked via Plaid.
DocuSign
E-signature for operating agreements and earn-link contracts.
Persona KYC
Identity verification for high-value claimants. Required for $5K+ payouts.
QuickBooks
Auto-export earnings and distributions to your books.
Settings blocks
SettingsCard + SettingsRow for any /settings/* fragment.
SettingsCardStack with 2 SettingsCards
Personal details
Set your name and contact information. The email here is also used for login.
Name
Avatar
JPG or PNG, max 2MB
Notifications
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
Detail blocks
DetailLayout + DetailMetaRow for record-detail pages (single agreement / receipt / contact).
DetailLayout · main + aside
Distribution to A. Rivera
Earn-link lk_8fJ24a · weekly cycle ending May 5
Wizard blocks
WizardProgress + WizardStepFrame for onboarding, HF wizard, deep-dive flows.
WizardProgress · step 3 of 7
WizardStepFrame · with form + footer
Equity allocation
Decide how ownership is split among your founding team. This is editable until everyone signs.
Founder (you)
Co-founder
Partner
Reserve
Page archetypes
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
✓ Y resolved
✓ $ resolved
✓ aa resolved
✓ ac resolved
✓ ae resolved
✓ ah resolved
✓ aj resolved
Charts
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)
Mockup-derived chart components
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
Hyper Formation real-time components
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
Form & File
- 01Intake
- 02Form & File
- 03Open Treasury
- 04Connect Rails
- 05Brand & Domain
- Drafting Operating Agreement (4/9 sections)
- Submitting Articles of Organization to DE SoS
- Awaiting EIN response from IRS
BurstPhaseHero · tone="dark"
Same component, terminal-bg-compatible tone — used ONCE at the top of Workforce's /mission/build live theater (bg-terminal-bg, the sanctioned dark surface).
Watch Novacraft Studios organize itself
Hiring your first department...
- 01Intake
- 02Form & File
- 03Open Treasury
- 04Connect Rails
- 05Brand & Domain
- Created department: Sales
- Created department: Support
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
@filing_agent· Delaware Division of Corporations · $109Obtain EIN
@ein_agent· IRS Form SS-4 · 88-1234567Draft Operating Agreement
@doc_agent· 9 sections · revenue share + cap table integrated· depends on 1 upstream60%
Open Stripe Connect account
@stripe_agent· Standard account · KYC handoff to founder· depends on 1 upstream38%
Open Mercury operating account
@mercury_agent· Awaiting wire setup confirmation from founder· depends on 1 upstreamReserve domain + DNS
@domain_agent· novacraftstudios.io · Cloudflare zoneGenerate brand kit
@brand_agent· Logo · color · typography · email signatures· depends on 1 upstreamSet up Google Workspace
@workspace_agent· 5 seats · founder@ · ops@ · billing@· depends on 1 upstream
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
- Created Stripe Connect Standard account
- Pre-filled business legal name + address + EIN
- Configured payout schedule (weekly)
- Linked operating account (Mercury) for payouts
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
Revenue · cap-table · expenses
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 a calm brand-yellow top hairline accent (WhisperCard accent='brand-yellow' — no shadow-stamp or 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 |
- RS
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
- AR
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
- JC
J. Chen
partner · weekly
Lifetime
$12,631.50
Source
eq_JC-15 · equity rev share
Last payout
$351.00
Stripe
connected
no cap · perpetual
- SP
S. Patel
advisor · weekly
Lifetime
$8,421.00
Source
eq_SP-10 · equity rev share
Last payout
$234.00
Stripe
onboarding
no cap · perpetual
- DC
@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
7 other contributors
$2,318.30
Bank · Payments · Books — connect the stack
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
One more to go
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
Public deals · bio links · creator earnings
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
Bring us paying customers, earn 5% of every sale
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.
The HYVV app on a phone
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
Autonomous workforce components
The primitives behind HYVV Workforce — an org chart of AI agents working departments, the human-in-the-loop approval queue for anything that leaves the building, the autonomy dial per agent, the 'ask your company' chat surface, and the provider key vault.
OrgTree · 3-department sample
Chief at top, department cards below, each with a collapsible agent-chip roster. Click a department's agent count to expand it.
ApprovalCard · one per risk tier
Purely presentational — caller supplies the risk tone + approve/reject slots. Selecting a card rings it in brand-purple (bulk-action pattern).
Post weekly progress update to #company-updates
Comms Agent · Operations
Internal-only Slack message summarizing this week's completed work items.
Requested 4 min ago
Send first-touch outreach email to 40 prospects
Outreach Agent · Sales
External recipients, but reversible — no reply thread started yet.
Requested 11 min ago
Send $2,400 wire to new vendor
Finance Agent · Finance
First payment to this payee — no prior transaction history.
Requested 2 min ago
AutonomySlider · 4 detents, Suggest → Act freely
Controlled 0-3 slider. Active detent label goes brand-purple; the description line below updates live.
The agent acts on its own, but pauses for approval above the risk threshold.
ChatPanel · static conversation
Transport-agnostic — caller owns messages/status and is notified of outgoing text via onSend. Enter sends, Shift+Enter inserts a newline.
What did Sales ship this week?
@agent
Sales closed 3 deals ($14,200 total) and sent 40 first-touch outreach emails — one batch is pending your approval before it goes out.
Good. Any blockers?
@agent
Finance is blocked on a vendor wire approval, and Support has zero open tickets right now.
ChatPanel · status="streaming"
The last assistant message gets the blinking caret used elsewhere for in-progress AI output; the composer disables until the stream settles.
Draft this week's investor update.
@agent
Revenue is up 12% week over week, driven mostly by the Sales department
ProviderKeyCard · connected (budget bar) + disconnected
Never renders the full key — only keyLastFour. The budget meter appears only when budgetUsed/budgetLimit are both supplied.
Anthropic
•••• a1F9
OpenAI
•••• 9c2D