03 · BEFORE / AFTER

相同的信息。
更高的密度,更少的噪声。

Hero、Swap、Launch 三个核心页面的并排对比。左侧是当前 Tens UI(用当前 token 重现),右侧是 DS 2.0 重构。

Body Contrast
3.1:112.1:1
CTA Colors
3 golds1 mint
Circular Animations
5 loops1 live
Surface Layers
37
01 / HERO

首屏 — The front door

Home · above-the-fold
BEFOREcurrent
TRADE · COLLECT · EARN

Card ETFs
on Solana

Tokenized card portfolios on Solana. Subscribe during LaunchPad, trade on our AMM, and earn fees by providing liquidity.

$128K
24H VOL
+12.4%
TVL
4
LIVE POOLS
AFTERDS 2.0
Trade · Collect · Earn

Card ETFs
on Solana.

Tokenized portfolios of graded collectible cards. Subscribe during LaunchPad, trade on the AMM, earn fees as an LP.

$128,450
24h Volume
+12.47%
TVL 7d
4
Live Pools

What changed · and why

  • Rainbow title → single-line accent. 彩虹标题让 hero 失去权威感;保留单词 "Solana" 用 mint 强调,其余维持白色。
  • Secondary text from #6E6E7A → #C8CDD8。对比度从 3.1:1 升到 12.1:1。
  • Gold CTA → mint CTA。金色退回 grade,主按钮不再和 "achievement" 抢注意力。
  • Space Mono label → Inter eyebrow。10px mono 换成 11px Inter 0.12em,阅读性高 2×。
  • 持续 shimmer / pulse 动画消失。仅保留 live dot 脉冲 — 表示 "现在正在交易"。
  • Refractor blob 替换为单点 mint glow。不喧宾夺主。
02 / SWAP

AMM Trading Panel

/swap · primary working surface
BEFOREcurrent
SWAP
YOU PAYBALANCE 1,240.5508
USDC
YOU RECEIVEBALANCE 0.00
$CHARIZARD
1 USDC ≈ 0.00779 $CHARIZARD · SLIPPAGE 0.5%
AFTERDS 2.0

Swap

You PayBalance 1,240.5508 MAX
≈ $125.00
You ReceiveBalance 0.00
0.9742
≈ $124.87 · price impact 0.03%
1 USDC = 0.00779 $CHARIZARDSlippage 0.5%

What changed · and why

  • 金色 Swap 按钮 → mint primary。交易确认是最关键的动作,需要清晰且语义一致。
  • Token 选择器从金色 pill → secondary pill。代币身份(icon)已是视觉识别,无需再叠金色。
  • 嵌套层级重做。Panel (s-1) → field (s-2),视觉分层清晰,原设计两层几乎同色。
  • Price impact / slippage 从 "隐藏在标签里" 升级到独立 caption 行。降低失误交易风险。
  • MAX 按钮色变。从白文字变 mint 链接,提高 affordance。
  • 输入框字号 24 → 28。货币数字是此页主角,字号提升。
03 / LAUNCH

LaunchPad Card

/launch · pool discovery
BEFOREcurrent
ACTIVE24H LEFT

$CHARIZARD POOL

1999 · 1ST ED · PSA 10
RAISED
$92,400
TARGET
$128,000
COMMITTERS
412
APY EST.
18.7%
AFTERDS 2.0
LIVE24H LEFT

$CHARIZARD

1999 · 1st Ed. · PSA 10
PSA 10
Raised
$92,400
Target
$128,000
Committers
412
Est. APY
18.7%
Progress72% · $92.4K / $128K

What changed · and why

  • Rainbow header → slab window。"这是一支卡池" 的图像锚点比彩虹更强,refractor 回到它该在的地方(卡面)。
  • 所有数字一致的 JetBrains Mono,但不再金色。金色只保留给 grade chip(PSA 10)。
  • Active chip 的持续 pulse 保留。它是 "live" 语义的唯一例外 — 因为真的在发生。
  • Progress bar 从彩虹变单色。配数字标签 "72% · $92.4K / $128K" 让状态无歧义。
  • 卡片有了独立 header。降低 "所有卡片长得一样" 的识别负担。
  • Target 原来用金色,暗示达成 = gold。改为中性数字 + 单独 APY 高亮,语义准确。
Tens Design System · v2.0 · Before / After