Geist Design System

Select a display theme:

Geist Design System

Vercel design system for building consistent web experiences.

Brand Assets

Learn how to work with our brand assets.

Icons

Icon set tailored for developer tools.

npm init next-app

Components

Building blocks for React applications.

Colors

A high contrast, accessible color system.

Grid

A huge part of the new Vercel aesthetic.

Geist Sans

Geist Mono

Typeface

Specifically designed for developers and designers.

Was this helpful?

supported.

Give feedback

supported.
Next
Colors

Foundations

  • Introduction
  • Colors
  • Icons
  • Typography
  • Materials

Resources

  • Guidelines
  • Changelog

Brands

  • Vercel
  • Next.js
  • Turbo
  • v0

Components

  • Avatar
  • Badge
  • Book
  • Button
  • Calendar
  • Checkbox
  • Choicebox
  • Code Block
  • Collapse
  • Combobox
  • Command Menu
  • Context Card
  • Context Menu
  • Description
  • Drawer
  • Empty State
  • Entity
  • Error
  • Feedback
  • Gauge
  • Grid
  • Input
  • Keyboard Input
  • Loading Dots
  • Material
  • Menu
  • Modal
  • Note
  • Pagination
  • Pill
  • Progress
  • Project Banner
  • Radio
  • Relative Time Card
  • Scroller
  • Select
  • Show more
  • Skeleton
  • Slider
  • Snippet
  • Spinner
  • Split Button
  • Stack
  • Status Dot
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Theme Switcher
  • Toast
  • Toggle
  • Tooltip