Design system v0
Snackbowl tokens & primitives
Live render of every semantic color slot, the type ramp, the spacing scale, and the full Button matrix. Use the theme toggle to verify dark-mode parity.
Color
Every semantic slot from the contract in @snackbowl/tokens/colors rendered as a swatch. Both themes implement the same contract; flipping data-theme re-paints every chip in place.
surface
surface.primary
surface.secondary
surface.tertiary
surface.hover
surface.active
surface.inverse
text
text.primary
text.secondary
text.muted
text.disabled
text.inverse
text.link
border
border.default
border.subtle
border.strong
border.focus
brand
brand.primary
brand.primaryHover
brand.primaryActive
brand.surface
brand.onPrimary
feedback
feedback.success.fg
feedback.success.bg
feedback.success.border
feedback.warning.fg
feedback.warning.bg
feedback.warning.border
feedback.danger.fg
feedback.danger.bg
feedback.danger.border
feedback.info.fg
feedback.info.bg
feedback.info.border
Type ramp
Modular ratio ~1.2 (minor third), anchored at 16px body. Display family is Fraunces; body is Inter.
xsThe quick brown fox
smThe quick brown fox
mdThe quick brown fox
lgThe quick brown fox
xlThe quick brown fox
2xlThe quick brown fox
3xlThe quick brown fox
4xlThe quick brown fox
5xlThe quick brown fox
6xlThe quick brown fox
Spacing
4px base scale. T-shirt named so app code never writes px literals.
none
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
Button matrix
Every variant × tone × size, plus the disabled and loading states. The whole matrix is one component: @snackbowl/ui/button.
variant: filled
variant: outline
variant: ghost