Stripe Design System

562KB 源码 · 实验室采样 · 2026.02.13

562KB
Source Volume
5
Brand Colors
3
Core Tokens

Brand Palette

从 562KB 源码中提取的原生基因序列。

#FF6
#873
#181
#010
#FAF
/* Stripe Orange - 标志色 */
--stripe-primary: #FF6201;
--stripe-bg: #181818;

Mesh Gradient

/* 液态光影 */
background: radial-gradient(circle at 20% 30%, rgba(255, 98, 1, 0.8), transparent 50%),
  radial-gradient(circle at 80% 70%, rgba(135, 62, 255, 0.8), transparent 50%);

Motion DNA

/* 丝滑的真相 */
transition: all 0.2s ease-out;

/* 收敛感动画 */
animation: fluid 20s ease-in-out infinite;
  • 200ms — 人眼感知与速度的甜蜜点
  • ease-out — 开始快、结束慢的收敛感
  • bezier(0.4, 0, 0.2, 1) — 更极致的控制

The Formula

Premium = (Precision) × (Restraint) + (Fluidity)²

高级感 = 精准 × 克制 + 流动²