01 — Colors
スウォッチはトークンを参照しているため、ヘッダーのテーマ切り替えで色面も変わります。
bg
dark #0A0A0B
light #F7F5F2
bgSubtle
dark #111113
light #EFECE7
bgElevated
dark #17171A
light #FFFFFF
fg
dark #EDEBE8
light #141414
fgMuted
dark #8A8782
light #6B6862
fgFaint
dark #55534E
light #A8A49D
border
dark #232326
light #DDD9D2
borderStrong
dark #3A3A3F
light #C2BDB4
accent
dark #FF4D00
light #E64500
accentFg
dark #0A0A0B
light #FFFFFF
accentMuted
dark rgba(255,77,0,0.15)
light rgba(230,69,0,0.12)
selection
dark rgba(255,77,0,0.30)
light rgba(230,69,0,0.25)
02 — Typography
display
デザインとビジネスの文脈から、技術でかたちにする。
The quick brown fox 0123
body
デザインとビジネスの文脈から、技術でかたちにする。
The quick brown fox 0123
mono
デザインとビジネスの文脈から、技術でかたちにする。
The quick brown fox 0123
fontSize scale
xs
The quick brown fox 0123
sm
The quick brown fox 0123
base
The quick brown fox 0123
lg
The quick brown fox 0123
xl
The quick brown fox 0123
xxl
The quick brown fox 0123
display
The quick brown fox 0123
03 — Spacing & Radius
xxs
xs
sm
md
lg
xl
xxl
section
radius
sm
2px
md
4px
04 — Motion
durationFast
durationBase
durationSlow
easing cubic-bezier(0.2, 0, 0, 1)
05 — Components
トークンは lib/theme/tokens.stylex.ts で定義され、全コンポーネントが参照しています。