Surfaces

Whitespace first, then subtle borders, then cards. Only promote content to a card when it's independently interactive or contains fundamentally different content.

Hierarchy

From lightest to heaviest separation.

Whitespace only

Tightly related items. Inherent contrast between heading and supporting text does the work.

Divider

Siblings that share context — stat grids, KPIs, list rows.

Well

Recessed panel for secondary or nested content. Darker than canvas, no outer shadow.

Card

Standalone or interactive. Lifted one tone step above canvas with a stronger inset-ring — never shadow-*.

Divided grid

  • Repos

    24

  • Stars

    1,284

  • Issues

    7

Rules

  • Use the lightest separation that still works — whitespace → divider → well → card. Never jump straight to a card.
  • Dividers use opacity-based colors (border-rambutan-100/10), not solid neutrals.
  • Cards sit one step lighter than canvas (longan-950 → longan-800) and use inset-ring inset-ring-white/5 for definition.
  • Wells sit one step darker or at the same tone with reduced opacity, and never carry outer shadows.