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.

npx create-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
  • Typography
  • Materials

Brands

  • Vercel
  • Next.js
  • Turbo
  • v0
  • AI SDK

Components

  • Avatar
  • Badge
  • Banner
  • Book
  • Breadcrumbs
  • Browser
  • Button
  • Calendar
  • Card
  • Checkbox
  • Choicebox
  • Clearable Input
  • Code
  • Code Block
  • Collapse
  • Combobox
  • Command Menu
  • Context Card
  • Context Menu
  • Copy Button
  • Deployment Status
  • Description
  • Destructive Action Modal
  • Dots Menu
  • Drawer
  • Empty State
  • Entity
  • Error
  • Error Card
  • Feedback
  • Fieldset
  • File Tree
  • Gauge
  • Grid
  • Input
  • Keyboard Input
  • Label
  • Load More Button
  • Loading Dots
  • Menu
  • MiddleTruncate
  • Modal
  • Multi Select
  • Note
  • Pagination
  • Phone
  • Pill
  • Progress
  • Project Banner
  • Radio
  • Relative Time Card
  • Scroller
  • Search Input
  • Select
  • Separator
  • Sheet
  • Show more
  • Skeleton
  • Slider
  • Snippet
  • Spinner
  • Split Button
  • Status Dot
  • Switch
  • Table
  • Tabs
  • Text With Copy Button
  • Textarea
  • Theme Switcher
  • Toast
  • Toggle
  • Tooltip
  • Video