tokens
Plain CSS variables. Use as var(--sn-fg) anywhere CSS goes.
Color
bg
--sn-bg
bg-elev-1
--sn-bg-elev-1
bg-elev-2
--sn-bg-elev-2
bg-inset
--sn-bg-inset
border
--sn-border
border-strong
--sn-border-strong
border-subtle
--sn-border-subtle
fg
--sn-fg
fg-muted
--sn-fg-muted
fg-subtle
--sn-fg-subtle
fg-faint
--sn-fg-faint
accent
--sn-accent
success
--sn-success
warning
--sn-warning
danger
--sn-danger
Type scale
2xs11pxThe quick brown fox
xs12pxThe quick brown fox
sm13pxThe quick brown fox
base14pxThe quick brown fox
md15pxThe quick brown fox
lg17pxThe quick brown fox
xl20pxThe quick brown fox
2xl24pxThe quick brown fox
3xl28pxThe quick brown fox
4xl36pxThe quick brown fox
Spacing
4px base scale. Use for padding, margin, gap.
--sn-s-1
--sn-s-2
--sn-s-3
--sn-s-4
--sn-s-5
--sn-s-6
--sn-s-7
--sn-s-8
--sn-s-9
--sn-s-10
--sn-s-11
--sn-s-12
Radius
none
xs
sm
md
lg