How to build a UI in the Anthropic style

:root {
  /* Anthropic style — extracted from anthropic.com by taste-skill */
  --canvas: #FAF9F5;
  --surface: #F5F4ED;
  --text: #141413;
  --text-muted: #5E5D59;
  --accent: #D97757;
  --border: #DEDCD1;
  --font-heading: anthropicSerif, Inter, system-ui, -apple-system, sans-serif;
  --font-body: anthropicSans, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 40.8px;
  --h1-tracking: -0.01em;
  --h1-weight: 400;
  --radius-button: 9999px;
  --radius-common: 10px;
  --ease: ease-out;
  --duration: 0.2s;
}

// tailwind.config.js — Anthropic style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FAF9F5",
        surface: "#F5F4ED",
        ink: "#141413",
        muted: "#5E5D59",
        accent: "#D97757",
        line: "#DEDCD1",
      },
      fontFamily: {
        heading: ["anthropicSerif", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["anthropicSans", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["40.8px", { letterSpacing: "-0.01em", fontWeight: "400" }] },
      borderRadius: { button: "9999px", card: "10px" },
      transitionTimingFunction: { brand: "ease-out" },
    },
  },
};

---
name: anthropic-style
description: Build UI in the Anthropic visual style (Humanist Warm Parchment & Literary AI Safety Editorial). Use when the user asks for a Anthropic-like look.
---

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

## Tokens
- canvasBg: #FAF9F5 — Primary Anthropic page canvas
- surfaceElevated: #F5F4ED — Primary elevated card & bento surface
- surfaceSecondary: #FAF9F5 — Secondary interactive container / hover fill
- borderPrimary: #DEDCD1 — Primary structural divider (1px solid #DEDCD1)
- borderSecondary: #3D3D3A — Secondary nested module or pill border
- textPrimary: #141413 — Hero H1, section H2 & high-contrast foreground
- textMuted: #5E5D59 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #D97757 — Primary interactive CTA & brand highlight (9999px (Pill) / 8px)
- accentSecondary: #141413 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: anthropicSerif; body: anthropicSans; mono: JetBrains Mono
- Hero H1: 40.8px | line-height 51px (leading-[1.25]) | letter-spacing -0.41px (tracking-[-0.01em]) | weight 400 (font-[400]) | color #141413 (text-[#141413]) | font anthropicSerif
- Section H2 (Primary): 51.9px | line-height 56.1px (leading-[1.08]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #141413 (text-[#141413]) | font anthropicSans
- Card / Feature H3: 21.4px | line-height 26.7px (leading-[1.25]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #141413 (text-[#141413]) | font anthropicSans
- Body Copy (Paragraph): 16.7px | line-height 25.5px (leading-[1.53]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #5E5D59 (text-[#5E5D59]) | font anthropicSans

## Components
- Primary button: height 28px, padding 8px 12px, radius 9999px, bg #F5F4ED, text #3D3D3A, 13px / 400
- Card: bg #F5F4ED, border 1px solid #DEDCD1

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Anthropic’s exact #FAF9F5 canvas and #F5F4ED surface pairing.
- NEVER replace anthropicSerif display typography or ignore its signature scale (40.8px / -0.01em (w400)).
- NEVER use thick opaque borders that clash with #DEDCD1 (1px solid #DEDCD1).
- NEVER deviate from the signature button geometry (9999px (Pill) / 8px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with JetBrains Mono.

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

npx taste-skill add anthropic