Gesso

Colors

Ten scales whose steps encode intent, from background to text. Click a swatch to copy its value.

Scales

Each scale runs ten steps. Accent values are Display P3 on screens that support it.

What Each Step Is For

  • 100 default background
  • 200 hover background
  • 300 active background
  • 400 default border
  • 500 hover border
  • 600 active border
  • 700 solid fill, high contrast
  • 800 solid fill, hover
  • 900 secondary text and icons
  • 1000 primary text and icons

Usage

A link out of a frame from its footer, like "Learn more" in the docs, uses Geist blue (blue-900, blue-1000 on hover) with an up-right arrow, through FrameFooterLink. Header links ("All deployments →") stay quiet gray, like the band around them.

background-100 is the primary page and card surface; background-200 is a secondary surface for subtle separation. The gray-alpha-* tokens are translucent, so they layer over any background; use them for borders, dividers, overlays, and hover states. Solid gray-* holds its contrast on any surface, so use it for text and opaque fills. Accent scales carry meaning: blue for success, links, and focus; red for errors; amber for warnings; plus green, teal, purple, and pink. Use the hex tokens everywhere; each accent scale also ships a *-p3 wide-gamut value in oklch() for Display P3 screens. The Dark theme redefines the same names at /design.dark.md.