Layout

Spacing uses Tailwind's scale (p-4, gap-3). Corner radius is token-backed — rounded-xl maps to --radius-xl from @wisihe/tokens.

When to use which radius? See Principles → Shape language for small (chips), medium (cards), and big (sections) — this page lists the token values.

Spacing

Border radius

Control heights

Common patterns

Breakpoints, shadows & CSS variablesShow

Breakpoints

  • sm640px — Two-column grids
  • md768px — Sidebar layouts
  • lg1024px — Design-system sidebar visible
  • xl1280px — Wide marketing grids
  • 2xl1536px — Max content width contexts

Shadows

  • shadow-smResting cards
  • shadow-mdHover lift on buttons
  • shadow-lgFloating chrome (dock, nav)
  • shadow-noneFlat surfaces on busy backgrounds

Primitive spacing (CSS)

  • spacing.xs4px
  • spacing.sm8px
  • spacing.md16px
  • spacing.lg24px
  • spacing.xl32px
  • spacing.2xl48px
  • spacing.3xl64px

Snippet

/* Card shell — matches design-system pages */
<div className="rounded-xl border border-border bg-surface/50 p-4">
  ...
</div>

/* Token radius in plain CSS */
.my-panel {
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
}

Do & don’t

Stick to the spacing and radius scales. Cards use rounded-xl and p-4; sections breathe with gap-6–8; icon controls are at least size-11 on touch surfaces.

Card padding

Do

Painting title

Digital · 2024

Don't

Painting title

Digital · 2024

Corner radius

Do

Painting title

Digital · 2024

Don't

Painting title

Digital · 2024

Section rhythm

Do

Don't

Touch targetMobile nav pattern

Do

Don't