Skip to content
Matter Design
BrandFoundationsTypeSurfacesComponentsPatternsUsage
FoundationsFoundations

Foundations

Seven foundation pages cover everything below the component line.

  • Color — foreground / surface / hairline / accent. Flat, off-bright, warm.
  • Alphas — --ink-NN over paper, --paper-NN over a bloom. Use these instead of inline rgba().
  • Bloom — four families (peach, lavender, sage, amber). 3 + 2 + 2 + (gradient-only).
  • Status — domain-named (signed / pending / draft / filed), not generic.
  • Focus — the canonical peach ring, system-wide.
  • Token architecture — three layers: primitive → semantic → component-local. One direction.
  • Accessibility — body ≥ 4.5:1, UI ≥ 3:1, decorative tokens exempt, AA sibling aliases.
Edit on GitHub

Color

Foreground and background are flat, off-bright. Hairlines are warm-gray, not alpha-black — so they read consistently against either white or warm paper.