Skill Name

Purpose---

version: alpha name: Geist description: Vercel’s Geist design system, Light theme (the Dark theme is documented at /design.dark.md). colors: primary: "#171717" secondary: "#4d4d4d" tertiary: "#006bff" neutral: "#f2f2f2" background-100: "#ffffff" background-200: "#fafafa" gray-100: "#f2f2f2" gray-200: "#ebebeb" gray-300: "#e6e6e6" gray-400: "#eaeaea" gray-500: "#c9c9c9" gray-600: "#a8a8a8" gray-700: "#8f8f8f" gray-800: "#7d7d7d" gray-900: "#4d4d4d" gray-1000: "#171717" gray-alpha-100: "#0000000d" gray-alpha-200: "#00000015" gray-alpha-300: "#0000001a" gray-alpha-400: "#00000014" gray-alpha-500: "#00000036" gray-alpha-600: "#0000003d" gray-alpha-700: "#00000070" gray-alpha-800: "#00000082" gray-alpha-900: "#000000b3" gray-alpha-1000: "#000000e8" blue-100: "#f0f7ff" blue-200: "#e9f4ff" blue-300: "#dfefff" blue-400: "#cae7ff" blue-500: "#94ccff" blue-600: "#48aeff" blue-700: "#006bff" blue-800: "#0059ec" blue-900: "#005ff2" blue-1000: "#002359" red-100: "#ffeeef" red-200: "#ffe8ea" red-300: "#ffe3e4" red-400: "#ffd7d6" red-500: "#ffb1b3" red-600: "#ff676d" red-700: "#fc0035" red-800: "#ea001d" red-900: "#d8001b" red-1000: "#47000c" amber-100: "#fff6de" amber-200: "#fff4cf" amber-300: "#fff1c1" amber-400: "#ffdc73" amber-500: "#ffc543" amber-600: "#ffa600" amber-700: "#ffae00" amber-800: "#ff9300" amber-900: "#aa4d00" amber-1000: "#561900" green-100: "#ecfdec" green-200: "#e5fce7" green-300: "#d3fad1" green-400: "#b9f5bc" green-500: "#82eb8d" green-600: "#4ce15e" green-700: "#28a948" green-800: "#279141" green-900: "#107d32" green-1000: "#003a00" teal-100: "#defffb" teal-200: "#ddfef6" teal-300: "#ccf9f1" teal-400: "#b1f7ec" teal-500: "#52f0db" teal-600: "#00e3c4" teal-700: "#00ac96" teal-800: "#00927f" teal-900: "#007f70" teal-1000: "#003f34" purple-100: "#faf0ff" purple-200: "#f9f0ff" purple-300: "#f6e8ff" purple-400: "#f2d9ff" purple-500: "#dfa7ff" purple-600: "#c979ff" purple-700: "#a000f8" purple-800: "#8500d1" purple-900: "#7d00cc" purple-1000: "#2f004e" pink-100: "#ffe8f6" pink-200: "#ffe8f3" pink-300: "#ffdfeb" pink-400: "#ffd3e1" pink-500: "#fdb3cc" pink-600: "#f97ea7" pink-700: "#f22782" pink-800: "#e4106e" pink-900: "#c41562" pink-1000: "#460523"

Wide-gamut accent variants in oklch for P3 displays (sRGB hex above is the fallback)

blue-100-p3: "oklch(97.32% 0.0141 251.56)" blue-200-p3: "oklch(96.29% 0.0195 250.59)" blue-300-p3: "oklch(94.58% 0.0293 249.84870859673202)" blue-400-p3: "oklch(91.58% 0.0473 245.11621922481282)" blue-500-p3: "oklch(82.75% 0.0979 248.48)" blue-600-p3: "oklch(73.08% 0.1583 248.133320980386)" blue-700-p3: "oklch(57.61% 0.2508 258.23)" blue-800-p3: "oklch(51.51% 0.2399 257.85)" blue-900-p3: "oklch(53.18% 0.2399 256.9900584162342)" blue-1000-p3: "oklch(26.67% 0.1099 254.34)" red-100-p3: "oklch(96.5% 0.0223 13.09)" red-200-p3: "oklch(95.41% 0.0299 14.252646656611997)" red-300-p3: "oklch(94.33% 0.0369 15.011509923860523)" red-400-p3: "oklch(91.51% 0.0471 19.8)" red-500-p3: "oklch(84.47% 0.1018 17.71)" red-600-p3: "oklch(71.12% 0.1881 21.22)" red-700-p3: "oklch(62.56% 0.2524 23.03)" red-800-p3: "oklch(58.19% 0.2482 25.15)" red-900-p3: "oklch(54.99% 0.232 25.29)" red-1000-p3: "oklch(24.8% 0.1041 18.86)" amber-100-p3: "oklch(97.48% 0.0331 85.79)" amber-200-p3: "oklch(96.81% 0.0495 90.24227879900472)" amber-300-p3: "oklch(95.93% 0.0636 90.52)" amber-400-p3: "oklch(91.02% 0.1322 88.25)" amber-500-p3: "oklch(86.55% 0.1583 79.63)" amber-600-p3: "oklch(80.25% 0.1953 73.59)" amber-700-p3: "oklch(81.87% 0.1969 76.46)" amber-800-p3: "oklch(77.21% 0.1991 64.28)" amber-900-p3: "oklch(52.79% 0.1496 54.65)" amber-1000-p3: "oklch(30.83% 0.099 45.48)" green-100-p3: "oklch(97.59% 0.0289 145.42)" green-200-p3: "oklch(96.92% 0.037 147.15)" green-300-p3: "oklch(94.6% 0.0674 144.23)" green-400-p3: "oklch(91.49% 0.0976 146.24)" green-500-p3: "oklch(85.45% 0.1627 146.3)" green-600-p3: "oklch(80.25% 0.214 145.18)" green-700-p3: "oklch(64.58% 0.1746 147.27)" green-800-p3: "oklch(57.81% 0.1507 147.5)" green-900-p3: "oklch(51.75% 0.1453 147.65)" green-1000-p3: "oklch(29.15% 0.1197 147.38)" teal-100-p3: "oklch(97.72% 0.0359 186.7)" teal-200-p3: "oklch(97.06% 0.0347 180.66)" teal-300-p3: "oklch(94.92% 0.0478 182.07)" teal-400-p3: "oklch(92.76% 0.0718 183.78)" teal-500-p3: "oklch(86.88% 0.1344 182.42)" teal-600-p3: "oklch(81.5% 0.161 178.96)" teal-700-p3: "oklch(64.92% 0.1572 181.95)" teal-800-p3: "oklch(57.53% 0.1392 181.66)" teal-900-p3: "oklch(52.08% 0.1251 182.93)" teal-1000-p3: "oklch(32.11% 0.0788 179.82)" purple-100-p3: "oklch(96.65% 0.0244 312.1890119359961)" purple-200-p3: "oklch(96.73% 0.0228 309.8)" purple-300-p3: "oklch(94.85% 0.0364 310.15)" purple-400-p3: "oklch(91.77% 0.0614 312.82)" purple-500-p3: "oklch(81.26% 0.1409 310.8)" purple-600-p3: "oklch(72.07% 0.2083 308.19)" purple-700-p3: "oklch(55.5% 0.3008 306.12)" purple-800-p3: "oklch(48.58% 0.2638 305.73)" purple-900-p3: "oklch(47.18% 0.2579 304)" purple-1000-p3: "oklch(23.96% 0.13 305.66)" pink-100-p3: "oklch(95.69% 0.0359 344.6218910697224)" pink-200-p3: "oklch(95.71% 0.0321 353.14)" pink-300-p3: "oklch(93.83% 0.0451 356.29)" pink-400-p3: "oklch(91.12% 0.0573 358.82)" pink-500-p3: "oklch(84.28% 0.0915 356.99)" pink-600-p3: "oklch(74.33% 0.1547 0.24)" pink-700-p3: "oklch(63.52% 0.238 1.01)" pink-800-p3: "oklch(59.51% 0.2339 4.21)" pink-900-p3: "oklch(53.5% 0.2058 2.84)" pink-1000-p3: "oklch(26% 0.0977 359)" typography: heading-72: fontFamily: Geist Sans fontSize: 72px fontWeight: 600 lineHeight: 72px letterSpacing: -4.32px heading-64: fontFamily: Geist Sans fontSize: 64px fontWeight: 600 lineHeight: 64px letterSpacing: -3.84px heading-56: fontFamily: Geist Sans fontSize: 56px fontWeight: 600 lineHeight: 56px letterSpacing: -3.36px heading-48: fontFamily: Geist Sans fontSize: 48px fontWeight: 600 lineHeight: 56px letterSpacing: -2.88px heading-40: fontFamily: Geist Sans fontSize: 40px fontWeight: 600 lineHeight: 48px letterSpacing: -2.4px heading-32: fontFamily: Geist Sans fontSize: 32px fontWeight: 600 lineHeight: 40px letterSpacing: -1.28px heading-24: fontFamily: Geist Sans fontSize: 24px fontWeight: 600 lineHeight: 32px letterSpacing: -0.96px heading-20: fontFamily: Geist Sans fontSize: 20px fontWeight: 600 lineHeight: 26px letterSpacing: -0.4px heading-16: fontFamily: Geist Sans fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: -0.32px heading-14: fontFamily: Geist Sans fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: -0.28px button-16: fontFamily: Geist Sans fontSize: 16px fontWeight: 500 lineHeight: 20px button-14: fontFamily: Geist Sans fontSize: 14px fontWeight: 500 lineHeight: 20px button-12: fontFamily: Geist Sans fontSize: 12px fontWeight: 500 lineHeight: 16px label-20: fontFamily: Geist Sans fontSize: 20px fontWeight: 400 lineHeight: 32px label-18: fontFamily: Geist Sans fontSize: 18px fontWeight: 400 lineHeight: 20px label-16: fontFamily: Geist Sans fontSize: 16px fontWeight: 400 lineHeight: 20px label-14: fontFamily: Geist Sans fontSize: 14px fontWeight: 400 lineHeight: 20px label-14-mono: fontFamily: Geist Mono fontSize: 14px fontWeight: 400 lineHeight: 20px label-13: fontFamily: Geist Sans fontSize: 13px fontWeight: 400 lineHeight: 16px label-13-mono: fontFamily: Geist Mono fontSize: 13px fontWeight: 400 lineHeight: 20px label-12: fontFamily: Geist Sans fontSize: 12px fontWeight: 400 lineHeight: 16px label-12-mono: fontFamily: Geist Mono fontSize: 12px fontWeight: 400 lineHeight: 16px copy-24: fontFamily: Geist Sans fontSize: 24px fontWeight: 400 lineHeight: 36px copy-20: fontFamily: Geist Sans fontSize: 20px fontWeight: 400 lineHeight: 36px copy-18: fontFamily: Geist Sans fontSize: 18px fontWeight: 400 lineHeight: 28px copy-16: fontFamily: Geist Sans fontSize: 16px fontWeight: 400 lineHeight: 24px copy-14: fontFamily: Geist Sans fontSize: 14px fontWeight: 400 lineHeight: 20px copy-14-mono: fontFamily: Geist Mono fontSize: 14px fontWeight: 400 lineHeight: 20px copy-13: fontFamily: Geist Sans fontSize: 13px fontWeight: 400 lineHeight: 18px copy-13-mono: fontFamily: Geist Mono fontSize: 13px fontWeight: 400 lineHeight: 18px spacing: 1: 4px 2: 8px 3: 12px 4: 16px 6: 24px 8: 32px 10: 40px 16: 64px 24: 96px base: 4px rounded: sm: 6px md: 12px lg: 16px full: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.background-100}" typography: "{typography.button-14}" rounded: "{rounded.sm}" padding: "0 10px" height: 40px button-secondary: backgroundColor: "{colors.background-100}" textColor: "{colors.primary}" typography: "{typography.button-14}" rounded: "{rounded.sm}" padding: "0 10px" height: 40px button-tertiary: textColor: "{colors.primary}" typography: "{typography.button-14}" rounded: "{rounded.sm}" padding: "0 10px" height: 40px button-error: backgroundColor: "{colors.red-800}" textColor: "#ffffff" typography: "{typography.button-14}" rounded: "{rounded.sm}" padding: "0 10px" height: 40px button-small: typography: "{typography.button-14}" rounded: "{rounded.sm}" padding: "0 6px" height: 32px button-large: typography: "{typography.button-16}" rounded: "{rounded.sm}" padding: "0 14px" height: 48px input: backgroundColor: "{colors.background-100}" textColor: "{colors.primary}" typography: "{typography.label-14}" rounded: "{rounded.sm}" padding: "0 12px" height: 40px input-small: typography: "{typography.label-14}" rounded: "{rounded.sm}" padding: "0 12px" height: 32px input-large: typography: "{typography.label-16}" rounded: "{rounded.sm}" padding: "0 12px" height: 48px

Geist

Overview

Geist is Vercel’s design system for building consistent, developer-focused interfaces. The aesthetic is minimal and high-contrast: plenty of whitespace, restrained color, and content set on near-neutral surfaces. Prioritize readability and accessibility, and use color to signal state or hierarchy rather than decoration.

This is the Light theme. The Dark theme uses the same token names with different values and lives at /design.dark.md. Colors are sRGB hex with Display P3 equivalents.

Colors

Each non-background scale runs 10 steps (100–1000), and the step encodes intent, not just lightness:

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

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.

Typography

Geist Sans sets UI and prose; Geist Mono sets code, data, and tabular figures. Both are open-source. The typography tokens above carry concrete fontFamily, fontSize, fontWeight, lineHeight, and letterSpacing:

Headings, heading-72 through heading-14, title pages and sections; letterSpacing tightens as the size grows.
Labels, label-20 through label-12, carry single-line, scannable text: navigation, form labels, table headers, metadata.
Copy, copy-24 through copy-13, set multi-line body text with a taller lineHeight.
Buttons, button-16 through button-12, are medium-weight labels for buttons and compact controls.

copy-14 and label-14 cover most text. The -mono tokens pair Geist Mono with the same metrics; prefer tabular figures when numbers need to align.

Layout

Spacing follows a 4px scale: 4, 8, 12, 16, 24, 32, 40, 64, 96px. Keep a three-step rhythm: 8px inside a group, 16px between groups, 32–40px between sections. Cards use 24px padding, 16px when compact and 32px for hero areas. Center content in a 1200px column with side padding that grows at wider breakpoints, and make every layout work on mobile and desktop. Breakpoints are sm 401px, md 601px, lg 961px, xl 1200px, and 2xl 1400px.

Elevation & Depth

Hierarchy comes from tonal surfaces and borders first, so shadows stay subtle. Apply these box-shadow values for the light theme:

Raised cards: 0 2px 2px rgba(0, 0, 0, 0.04)
Popovers and menus: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06)
Modals and dialogs: 0 1px 1px rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 24px 32px -8px rgba(0, 0, 0, 0.06)

Tooltips take the lightest of these. Pair each elevation with the matching radius below.

Motion

Use motion only when it clarifies a change, never for decoration. Most interactions should feel instant: a duration of 0ms is often the snappiest and best choice, and the call is context-dependent. When motion genuinely helps, such as revealing or moving an element, keep it short and physical with the easing cubic-bezier(0.175, 0.885, 0.32, 1.1): roughly 150ms for state changes, 200ms for popovers and tooltips, and 300ms for overlays and modals. Avoid long, looping, or attention-grabbing animation, and honor prefers-reduced-motion by dropping nonessential motion.

Shapes

Radii stay tight: 6px for everyday surfaces and controls, 12px for menus and modals, 16px for fullscreen surfaces. Reserve 9999px for pills, avatars, and circular controls. Keep one radius family per view rather than mixing rounded and sharp corners.

Components

The components tokens above give ready-to-use values per element (backgroundColor, textColor, rounded, height) drawn from this theme:

Primary button: solid gray-1000 fill with a background-100 label, for the single most important action on a view.
Secondary button: background-100 fill with a translucent gray-alpha-400 border.
Tertiary button: transparent fill with gray-1000 text for low-emphasis actions; it tints with gray-alpha on hover.
Error button: solid red-800 fill with white text, for destructive actions.
Input: background-100 fill, translucent border, 6px radius.

The variant tokens are the default medium (40px) size. Use the button-small/input-small (32px) and button-large/input-large (48px) tokens for the other sizes; large buttons step up to button-16. Hover and active states step up the scale: a 100 fill becomes 200 on hover and 300 on active, and borders move from 400 to 500 to 600. Disabled uses a gray-100 fill, gray-700 text, and a not-allowed cursor. Focus shows a two-layer ring (box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006bff): a 2px gap in the surface color, then a 2px blue-700 ring.

Voice & Content

Copy is part of the design; keep it precise and free of filler.

Use Title Case for labels, buttons, titles, and tabs; sentence case for body, helper text, and toasts.
Name actions with a verb and a noun (Deploy Project, Delete Member), never Confirm, OK, or a bare verb.
Write errors as what happened plus what to do next: Build failed. Bundle exceeds 50 MB. Reduce it or raise the limit.
Toasts name the specific thing that changed, drop the trailing period, and never say successfully: Project deleted, not Successfully deleted the project.
Empty states point to the first action: No deployments yet. Push to your Git repository to create one.
Use the present participle with an ellipsis for in-progress states: Deploying…, Saving….
Use numerals (3 projects), curly quotes, and the ellipsis character; skip please and marketing superlatives.

Do's and Don'ts

Use the gray scale to rank information: 1000 for primary text, 900 for secondary, 700 for disabled.
Keep solid accent color for state and the single most important action on a view.
Hold WCAG AA contrast (4.5:1 for body text).
Show the focus ring on every interactive element at :focus-visible, and never remove an outline without a visible replacement.
Apply the typography tokens instead of setting font size, line height, or weight by hand.
Don’t signal state with color alone; pair it with an icon or text label.
Don’t use background-200 as a general fill; it is for subtle separation only.
Don’t mix rounded and sharp corners, or more than two font weights, in one view.
Don’t swap gray-* for background-*; they are separate scales.

Describe what this skill helps an AI system do.

When to use

Use this skill when...

Instructions

Add the workflow, constraints, and examples this skill should install.
Keep the guidance specific enough that another agent can reuse it.