How to build a UI in the Vercel style

:root {
  /* Vercel style — extracted from vercel.com by taste-skill */
  --canvas: #FAFAFA;
  --surface: #FFFFFF;
  --text: #171717;
  --text-muted: #4D4D4D;
  --accent: #0070F3;
  --border: #EBEBEB;
  --font-heading: GeistSans, Inter, system-ui, -apple-system, sans-serif;
  --font-body: GeistSans, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'GeistMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 64px;
  --h1-tracking: -0.06em;
  --h1-weight: 400;
  --radius-button: 6px;
  --radius-common: 6px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.1s;
}

// tailwind.config.js — Vercel style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FAFAFA",
        surface: "#FFFFFF",
        ink: "#171717",
        muted: "#4D4D4D",
        accent: "#0070F3",
        line: "#EBEBEB",
      },
      fontFamily: {
        heading: ["GeistSans", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["GeistSans", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["GeistMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["64px", { letterSpacing: "-0.06em", fontWeight: "400" }] },
      borderRadius: { button: "6px", card: "6px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: vercel-style
description: Build UI in the Vercel visual style (Geist Architectural Grid & Swiss Precision Monochrome). Use when the user asks for a Vercel-like look.
---

# Vercel Style — Quick Rules (source: vercel.com, extracted by taste-skill)

## Tokens
- canvasBg: #FAFAFA — Primary Vercel page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: #FFFFFF — Secondary interactive container / hover fill
- borderPrimary: #EBEBEB — Primary structural divider (1px solid #EBEBEB)
- borderSecondary: rgba(255, 255, 255, 0.4) — Secondary nested module or pill border
- textPrimary: #171717 — Hero H1, section H2 & high-contrast foreground
- textMuted: #4D4D4D — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0070F3 — Primary interactive CTA & brand highlight (6px / 9999px)
- accentSecondary: rgba(82, 174, 255, 0.8) — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: GeistSans; body: GeistSans; mono: GeistMono
- Hero H1: 64px | line-height 64px (leading-[1]) | letter-spacing -3.84px (tracking-[-0.06em]) | weight 400 (font-[400]) | color #171717 (text-[#171717]) | font GeistSans
- Section H2 (Primary): 56px | line-height 56px (leading-[1]) | letter-spacing -3.36px (tracking-[-0.06em]) | weight 450 (font-[450]) | color #171717 (text-[#171717]) | font GeistSans
- Card / Feature H3: Subheading with crisp line-height
- Body Copy (Paragraph): Readable body text with muted contrast

## Components
- Primary button: height 32px, padding 0px 6px, radius 6px, bg #171717, text #FFFFFF, 14px / 500
- Card: bg #FAFAFA, border none, radius 6px, padding 20px 20px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Vercel’s exact #FAFAFA canvas and #FFFFFF surface pairing.
- NEVER replace GeistSans display typography or ignore its signature scale (64px / -0.06em (w400)).
- NEVER use thick opaque borders that clash with #EBEBEB (1px solid #EBEBEB).
- NEVER deviate from the signature button geometry (6px / 9999px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with GeistMono.

Full 120-line spec: https://taste-skill.pages.dev/taste/vercel/

npx taste-skill add vercel