Launchpad Design System
Dark data language + gold trust. Green is data only (up / buy / primary CTA base). Verification, graduation and milestones are gold. Gradients belong to data and brand elements — never to plain containers. One glowing CTA per screen: the nav Launch button.
1 · Color
Surface, text, border
--bg#0E0E10
--surface-1#151517
--surface-2#1C1C1F
--surface-3#232327
--text-1#F2F2F0
--text-2#B9B7B0
--text-3#8A8880
--border-strongrgba(255,255,255,.12)
--text-2 and --text-3 both clear 4.5:1 on --bg (measured 7.4:1 / 5.4:1). Never use --text-3 for 11px labels below 5.4:1 context without checking.
2 · Semantic gradients gradients only on data & brand elements
Primary action / gains. Button fills, up data, buy-side bars.
Sell side / losses / refunding. Sell controls, down-side bars, refund process states.
Trust, verification, graduation, milestones. Verified badges, Trust Chain passed nodes, milestone chips.
Auctions & bidding. Auction status, batch progress, auction milestone badges.
Information & verification process. Proof-in-progress, links, informational callouts.
Hard rule: mint never means "verified" and never means "success". Trust = gold. Up = mint. Both may appear on one screen, in different roles.
3 · Typography
display · 32/40$284,000 verified ARR
h1 · 24/32Helios · AI video workspace
h2 · 18/26App business metrics
h3 · 16/24Milestone payouts
body · 14/22Verification is not a badge — it gates the sale parameters.
sm · 13/20Auction · Batch 2 of 3 · 31h left
xs · 12/18Coverage 2025-10 → 2026-09 · 0 missing months
2xs · 11/16Source: zkTLS attestations · updated 2026-10-19 10:12
mono · numbers$168,200 · 84% · $0.00205 · 31:24:08
UI = Space Grotesk. Every number, address, hash and timer = JetBrains Mono with tabular-nums. Numbers are never letter-spaced; prices never lose their leading zeros.
4 · Spacing & radius
--sp-1 · 4
--sp-2 · 8
--sp-3 · 12
--sp-4 · 16
--sp-6 · 24
--sp-8 · 48
--r-sm · 8
--r-md · 10
--r-lg · 12
--r-xl · 16
--r-full
5 · Elevation & motion
Elevation comes from surface steps, not shadows
Rest: no shadow. Card hover: --shadow-card-hover. Modal: --shadow-modal. The single strong glow is --glow-cta on the nav Launch button; large panel CTAs use a soft --backlight-cta only. No glow on cards, badges or row buttons.
Motion: 3 durations + 1 curve
150ms micro feedback · 200ms buttons/pills/borders · 300ms panels and tab content · 480ms badge rim close (documented exception). One curve: cubic-bezier(.2,.8,.2,1). The 2800ms heartbeat belongs to the verified badge only. prefers-reduced-motion turns everything off.
6 · Buttons 4 types × 3 states
VariantSizeDefaultHoverDisabled
Nav Launch only glow · nav onlymd · 36px
Panel CTA soft backlight · 1 per screenmd · 36px
Row action no glow · matte solidsm · 28px
Quiet / ghost no glowsm · 28px
State legend: default / hover / disabled. Only the nav Launch may carry --glow-cta (this board shows it once, in the table). Panel CTA = dark center + neutral rim + soft green backlight. Row actions are matte solid with no glow. Disabled = 42% opacity, no shadow, cursor not-allowed. Buttons are pill shaped at md (36px / 13px) and sm (28px / 12px).
7 · Badges & status
Verification badges
◆Revenue verified
◇Traffic verified
○Unverified
X verified
Milestone · graduation
Milestone · auction
A badge is an entry point, not a conclusion: clicking it opens the Trust Chain. Verified badges breathe (2800ms); unverified and traffic badges have zero motion — the contrast itself is the trust signal.
Achievement hexagons hue = meaning; rarity = rim layers, never new hues
Status words · 7, each one word + one color
Live auction
Live on curve
Revenue verified
Graduated
Refunding
Unverified
Canonical vocabulary (baseline v2 §4): 拍卖中 → 已上线/曲线中 → 已毕业/失败退款；验证中/已验证/未验证；退款中。Status never relies on color alone — icon + word + color.
8 · Chart axis · unit · time range · null · source — all five or no chart
Verified revenue by source12 months · 2025-10 → 2026-09
Source: zkTLS attestations · Stripe, App Store · Coverage 2025-10 → 2026-09 · Missing months 0 · Updated 2026-10-19 10:12CSV
Null is never zero: a missing source is drawn as a dashed baseline with "no data", not as a $0 bar. Charts always carry axis ticks, a unit, a coverage window, a source line and an updated timestamp.
9 · What this system forbids
Never
emoji as icons · bare hex in components · competitor screenshots · green meaning "verified" or "success" · more than one glowing CTA per screen · charts without axes · "demo data" mixed into "live" · looping glow on containers.
Always
token variables only · tabular-nums on every number · null shown as "—" · source + coverage + updated time next to verified data · status = word + icon + color · keyboard-focusable controls · prefers-reduced-motion respected.