How to build a UI in the Linear style

:root {
  /* Linear style — extracted from linear.app by taste-skill */
  --canvas: #08090A;
  --surface: #0F1011;
  --text: #F7F8F8;
  --text-muted: #8A8F98;
  --accent: #5E6AD2;
  --border: rgba(255, 255, 255, 0.08);
  --font-heading: 'Inter Variable', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter Variable', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Berkeley Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 64px;
  --h1-tracking: -0.022em;
  --h1-weight: 510;
  --radius-button: 9999px;
  --radius-common: 8px;
  --shadow-common: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.7s;
}

// tailwind.config.js — Linear style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#08090A",
        surface: "#0F1011",
        ink: "#F7F8F8",
        muted: "#8A8F98",
        accent: "#5E6AD2",
        line: "rgba(255, 255, 255, 0.08)",
      },
      fontFamily: {
        heading: ["Inter Variable", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter Variable", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Berkeley Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["64px", { letterSpacing: "-0.022em", fontWeight: "510" }] },
      borderRadius: { button: "9999px", card: "8px" },
      boxShadow: { brand: "rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset" },
      transitionTimingFunction: { brand: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" },
    },
  },
};

---
name: linear-style
description: Build UI in the Linear visual style (Dark Precision SaaS & Industrial Craftsmanship). Use when the user asks for a Linear-like look.
---

# Linear Style — Quick Rules (source: linear.app, extracted by taste-skill)

## Tokens
- canvasBg: #08090A — Primary root & body background
- surfaceLevel1: #0F1011 — Primary workspace panels & bento cards
- surfaceLevel2: #141516 — Elevated cards & interactive containers
- surfaceLevel3: #191A1B — Nested modules, code blocks & hover surfaces
- glassHeader: rgba(11, 11, 11, 0.8) — Sticky top navigation bar (--header-blur: 20px)
- borderSubtle: rgba(255, 255, 255, 0.05) — Default subtle container & grid hairline
- borderStrong: rgba(255, 255, 255, 0.08) — Card borders, header bottom divider & code pills (159 DOM instances)
- borderHighlight: rgba(255, 255, 255, 0.12) — Focused/featured card border
- textPrimary: #F7F8F8 — Hero H1, section H2 headlines & active UI labels
- textSecondary: #D0D6E0 — H3 subheadings, code snippets & interactive controls
- textMuted: #8A8F98 — Body paragraphs, muted lead copy & secondary nav links
- textQuaternary: #62666D — Metadata, timestamps, keyboard shortcuts & disabled states
- accentInvertCta: #E5E5E6 — Primary high-contrast CTA button fill (--color-button-invert-bg-hover: #FFFFFF)
- accentBrand: #5E6AD2 — Core Linear indigo brand accent & focus ring (#5E69D1)
- accentElectric: #7170FF — Interactive links & active feature indicators
- semanticStatus: Green #27A644 / Yellow #F0BF00 / Orange #FC7840 / Red #EB5757 / Blue #4EA7FC — Issue workflow status badges & telemetry indicators

## Typography
- Heading font: Inter Variable; body: Inter Variable; mono: Berkeley Mono
- Hero H1: 64px | line-height 64px (leading-[1]) | letter-spacing -1.41px (tracking-[-0.022em]) | weight 510 (font-[510]) | color #F7F8F8 (text-[#F7F8F8]) | font Inter Variable
- Section H2 (Primary): 48px | line-height 48px (leading-[1]) | letter-spacing -1.06px (tracking-[-0.022em]) | weight 510 (font-[510]) | color #8A8F98 (text-[#8A8F98]) | font Inter Variable
- Card / Feature H3: 20px | line-height 26.6px (leading-[1.33]) | letter-spacing -0.24px (tracking-[-0.012em]) | weight 590 (font-[590]) | color #D0D6E0 (text-[#D0D6E0]) | font Inter Variable
- Body Copy (Paragraph): 15px | line-height 24px (leading-[1.6]) | letter-spacing -0.16px (tracking-[-0.011em]) | weight 400 (font-[400]) | color #8A8F98 (text-[#8A8F98]) | font Inter Variable

## Components
- Primary button: height 32px, padding 0px 12px, radius 9999px, bg #E5E5E6, text #08090A, 13px / 510
- Card: bg rgba(255, 255, 255, 0.01), border 1px solid rgba(255, 255, 255, 0.05), radius 8px, padding 0px 0px

## Never
- NEVER use pure #000000 for large card surfaces or pure #FFFFFF for body text—always use #08090A canvas, #0F1011/#141516 cards, and #F7F8F8 primary text.
- NEVER use thick opaque gray borders (border-gray-700, border-zinc-600)—always use 1px translucent white hairlines (border-white/[0.08] or border-white/[0.05]).
- NEVER use standard font-bold (700 or 800) on large headlines—Linear uses custom variable medium weight (font-[510]) with tight negative tracking (tracking-[-0.022em]) and leading-none (1.0).
- NEVER use generic neon blue-to-purple Tailwind gradients (from-blue-500 to-purple-600)—use ultra-subtle white alpha washes (rgba(255,255,255,0.03) to 0.04) and dark radial vignettes.
- NEVER use fuzzy, high-spread drop shadows on light/colored backgrounds—use multi-layer micro-shadows (--shadow-stack-low) or 1px inset top highlights (shadow-[inset_0_1px_0_0_rgba(255,255,255,0.04)]).

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

npx taste-skill add linear