01 · Foundations
Principles
系统的四条底层原则 — 任何一个新组件诞生前都应先对齐。
01 · Legibility over decoration
数据优先。正文对比度不低于 7:1，数字使用 tabular mono，标签永远大于 11px。
02 · One action color
主 CTA 只用 Primary Mint。金色仅授予 grade / achievement。不允许「双主色」并存。
03 · Physics-only rainbow
Refractor 彩虹只出现在「代表卡片本身」的元素上。UI chrome 一律走灰阶 + 单色。
04 · Motion earns its place
持续循环动画只用于「现在正在发生」的事（live pulse / rip reveal）。其他所有运动用于状态反馈且 ≤ 240ms。
02 · Typography
Inter + JetBrains Mono
Inter 负责所有 UI、标题、正文；JetBrains Mono 专门给数字（余额、价格、地址、代码）。Outfit 与 Space Mono 全面下线。
Display
Trade card ETFs
Inter 800 · 72 / 1.02 · -0.035em
H1
Featured Launches this week
Inter 700 · 40 / 1.1 · -0.025em
H2
Pool statistics
Inter 700 · 24 / 1.2 · -0.015em
H3
Charizard 1st Ed. Base Set
Inter 600 · 18 / 1.3 · -0.01em
Body LG
Tokenized portfolios of graded collectible cards. Subscribe, trade, and earn with deep on-chain liquidity.
Inter 400 · 16 / 1.6
Body
Commit USDC during the LaunchPad phase; funds lock until the sale completes and tokens distribute.
Inter 400 · 14 / 1.55
Caption
Updated 12 seconds ago · RPC latency 180ms
Inter 400 · 12 / 1.4 · t-lo
Eyebrow
You Pay · Balance 1,240.55
JB Mono 500 · 11 · 0.12em
Number (hero)
$128,450.29
JB Mono 700 · 40 · tabular
Number (inline)
+12.47% · 0.00083 SOL
JB Mono 500 · 16 · tabular
03 · Color
Semantic palette
每一个颜色都有明确用途。不允许把装饰色（refractor rainbow）当语义色用。
Primary · The only action color
p-100
#D6F7EF
p-300
#6DE4CC
p-500 ★
#2BCCB0
p-600
#1FAF96
p-700
#167D6B
★ p-500 是 Primary action。用于所有主 CTA、focus ring、progress、链接。
Gold · Grade & achievement only
gold-400
#E8C06B
gold-500
#D4A84B
gold-600
#A67C35
用于：PSA grade badge、Legendary tier、achievement unlock、vault NAV accent。 严禁用于按钮或链接。
Semantic · Status & signal
up
#22C55E
down
#EF4444
warn
#F59E0B
info
#38BDF8
pending
#A78BFA
Text ladder · WCAG contrast
Primary text sample
--t-hi · #F5F7FA15.2 : 1
Secondary body text
--t-md · #C8CDD812.1 : 1
Tertiary labels
--t-lo · #8A8F9C7.2 : 1
Decorative only
--t-dim · #5A5F6B3.9 : 1
04 · Surface & Depth
7 层背景阶梯
每一层都有明确职责映射。取代原来的 3 层（card / surface / elevated），解决嵌套场景下的层次混淆。
Ladder
s-0 · App background#050507
s-1 · Alt section / Table header#0A0B0E
s-2 · Card#0F1014
s-3 · Elevated / Chip#15171C
s-4 · Input / Row hover#1C1F26
s-5 · Active / Selected#262A33
s-6 · Strong divider#383D48
05 · Radius & Shape
5 级圆角阶梯
Mapped to components
6 · chip
10 · btn/input
12 · panel
14 · card
20 · modal
full
06 · Buttons
Single base + 4 variants + 3 sizes
Variants
Sizes
States
07 · Inputs
Numeric-first
Text input
Swap amount (numeric + token selector)
You PayBalance 1,240.5508
08 · Chips & Badges
Status signals
Semantic chips
LIVEUPCOMINGPENDINGENDING SOONFAILEDENDED
Grade badges (gold reserved)
PSA 10BGS 9.5LEGENDARY1ST EDITION
09 · Data & Tables
Trading terminal density
Pool table
Segmented control + Progress
Raised72%
Filled48%
Target96%
10 · Motion
Three durations, three purposes
Fast · State
120ms · ease-std
Hover, active, focus 的瞬时反馈。用户不应意识到它的存在。
Base · Layout
240ms · ease-out
Accordion 展开、drawer 滑入、modal fade。用户感知到「发生了」但不等待。
Slow · Reveal
480ms · ease-out
Rip 开包、成交确认、legendary 揭示——只用于「签名时刻」。
Only persistent motion: live pulse
LIVE · 124 RIPS/MIN持续脉冲仅用于表达「此刻正在发生」。
11 · Slab Surface
Refractor lives here — and only here
卡面的物理质感是 Tens 的核心叙事。Chrome surface + oil-slick refractor 被严格限制在代表物理卡片的元素上。
PSA 10
Charizard
1999 · 1ST ED · BASE SET
Rules of the refractor
- ✓ 卡片产品展示 · slab card · grade tile
- ✓ Legendary tier 表面
- ✓ Rip reveal 瞬间
- ✗ 按钮、链接、progress bar
- ✗ Hero 标题渐变
- ✗ Loading / skeleton 状态
- ✗ 图标、nav 品牌元素