Web

Generated from DESIGN_SYSTEM.md

Rules

Token consumption:

  • Never inline Tailwind for design decisions — use utility classes from global.css
  • Never hardcode hex values — always use CSS variable tokens

Component locations:

Key global utilities: content-area, px-safe, card-panel, widget-panel, card-row-item, input-base, page-title, section-heading, label-primary, label-secondary, badge-blue, badge-neutral, badge-featured, section-surface, btn-outlined-action

Surface + secondary-action utilities (when to reach for them):

UtilityUse whenWhy this exists
section-surfaceNesting a panel inside another surface that already has its own border or background (sidebar card inside sidebar, settings group inside a settings page, drawer section inside a drawer)Border + border doubles the visual weight; section-surface uses a slight background contrast (zinc-100 / zinc-900) so the nested panel reads as its own region without a second outline. Mirrors the "depth before borders" rule.
btn-outlined-actionSecondary action button alongside a primary action, or a standalone tone-down CTA (the [+] next to a credit balance, "Edit" next to "Save")A solid filled brand button competes with the primary CTA. btn-outlined-action keeps the brand color on the border/icon only with a transparent interior, plus active:scale-95 for tactile press — premium without screaming. Pair with w-6 h-6 for icon-only circle, px-3 h-8 for text.

Live specimens

Key global utilitiesDesign decisions are named utilities in global.css, never inline values or hex.
  • page-title

    Weekend market notes

  • section-heading

    Weekend market notes

  • label-primary

    Weekend market notes

  • label-secondary

    Weekend market notes

Badges
  • Probadge-blue
  • Draftbadge-neutral
  • Featuredbadge-featured
Surfaces
card-panel
widget-panel
section-surface