Skip to content
Design system

Foundations

The basic decisions that everything else is built on. Explore the design tokens and base styles for color, typography, spacing, layout, shape and motion.

Explore the foundations

  • Color Semantic colors for light and dark mode, and contrast for every pair.
  • Typography Text roles, weights and the Geist font families.
  • Spacing Padding, gaps and the space between the main parts of a page.
  • Layout Breakpoints, container widths, page side padding and page layers.
  • Radius Rounded corners for controls and surfaces.
  • Borders and focus Border widths, the focus ring and link underlines.
  • Elevation The hover shadow.
  • Motion Durations, easing and reduced motion.