Geist Design System

Colors

Learn how to work with our color system. Right click to copy raw values.

Scales

There are 10 color scales in the system. P3 colors are used on supported browsers and displays.

  • Backgrounds

  • Gray

  • Gray alpha

  • Blue

  • Red

  • Amber

  • Green

  • Teal

  • Purple

  • Pink

Backgrounds

There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed.