How to build a UI in the Cursor style

:root {
  /* Cursor style — extracted from cursor.com by taste-skill */
  --canvas: #F7F7F4;
  --surface: #F2F1ED;
  --text: #26251E;
  --text-muted: rgba(38, 36, 29, 0.55);
  --accent: #26251E;
  --border: rgba(39, 39, 29, 0.1);
  --font-heading: CursorGothic, Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'CursorGothic / EB Garamond', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'berkeleyMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 36px;
  --h1-tracking: -0.02em;
  --h1-weight: 400;
  --radius-button: 9999px;
  --radius-common: 4px;
  --shadow-common: rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Cursor style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#F7F7F4",
        surface: "#F2F1ED",
        ink: "#26251E",
        muted: "rgba(38, 36, 29, 0.55)",
        accent: "#26251E",
        line: "rgba(39, 39, 29, 0.1)",
      },
      fontFamily: {
        heading: ["CursorGothic", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["CursorGothic / EB Garamond", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["berkeleyMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["36px", { letterSpacing: "-0.02em", fontWeight: "400" }] },
      borderRadius: { button: "9999px", card: "4px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: cursor-style
description: Build UI in the Cursor visual style (Warm Archival Paper & Frontier AI Research Craft). Use when the user asks for a Cursor-like look.
---

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

## Tokens
- canvasBg: #F7F7F4 — Primary Cursor page canvas
- surfaceElevated: #F2F1ED — Primary elevated card & bento surface
- surfaceSecondary: #F7F7F4 — Secondary interactive container / hover fill
- borderPrimary: rgba(39, 39, 29, 0.1) — Primary structural divider (1px rgba(39,39,29,0.1))
- borderSecondary: rgba(38, 38, 26, 0.08) — Secondary nested module or pill border
- textPrimary: #26251E — Hero H1, section H2 & high-contrast foreground
- textMuted: rgba(38, 36, 29, 0.55) — Lead paragraphs, descriptions & muted labels
- accentPrimary: #26251E — Primary interactive CTA & brand highlight (9999px (Pill))
- accentSecondary: rgba(18, 18, 18, 0.05) — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: CursorGothic; body: CursorGothic / EB Garamond; mono: berkeleyMono
- Hero H1: 26px | line-height 32.5px (leading-[1.25]) | letter-spacing -0.32px (tracking-[-0.012em]) | weight 400 (font-[400]) | color #26251E (text-[#26251E]) | font CursorGothic
- Section H2 (Primary): 36px | line-height 43.2px (leading-[1.2]) | letter-spacing -0.72px (tracking-[-0.02em]) | weight 400 (font-[400]) | color #26251E (text-[#26251E]) | font CursorGothic
- Section H2 (Secondary): 22px | line-height 28.6px (leading-[1.3]) | letter-spacing -0.11px (tracking-[-0.005em]) | weight 400 (font-[400]) | color #26251E (text-[#26251E]) | font CursorGothic
- Card / Feature H3: 22px | line-height 28.6px (leading-[1.3]) | letter-spacing -0.11px (tracking-[-0.005em]) | weight 400 (font-[400]) | color #26251E (text-[#26251E]) | font CursorGothic

## Components
- Primary button: height 27px, padding 5.6px 10.5px, radius 9999px, bg transparent, text #26251E, 14px / 400
- Card: bg #F2F1ED, border none, radius 10px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Cursor’s exact #F7F7F4 canvas and #F2F1ED surface pairing.
- NEVER replace CursorGothic display typography or ignore its signature scale (36px / -0.02em (w400)).
- NEVER use thick opaque borders that clash with rgba(39, 39, 29, 0.1) (1px rgba(39,39,29,0.1)).
- NEVER deviate from the signature button geometry (9999px (Pill)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with berkeleyMono.

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

npx taste-skill add cursor