How to build a UI in the ElevenLabs style

:root {
  /* ElevenLabs style — extracted from elevenlabs.io by taste-skill */
  --canvas: #FDFCFC;
  --surface: #F5F3F1;
  --text: #000000;
  --text-muted: #666462;
  --accent: #000000;
  --border: rgba(0, 0, 0, 0.07);
  --font-heading: 'Waldenburg (w300)', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Waldenburg / Inter', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 48px;
  --h1-tracking: -0.02em;
  --h1-weight: 300;
  --radius-button: 9999px;
  --radius-common: 16px;
  --shadow-common: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — ElevenLabs style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FDFCFC",
        surface: "#F5F3F1",
        ink: "#000000",
        muted: "#666462",
        accent: "#000000",
        line: "rgba(0, 0, 0, 0.07)",
      },
      fontFamily: {
        heading: ["Waldenburg (w300)", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Waldenburg / Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Geist Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["48px", { letterSpacing: "-0.02em", fontWeight: "300" }] },
      borderRadius: { button: "9999px", card: "16px" },
      boxShadow: { brand: "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: elevenlabs-style
description: Build UI in the ElevenLabs visual style (Swiss Audio Minimalist & Light-Weight Waldenburg Precision). Use when the user asks for a ElevenLabs-like look.
---

# ElevenLabs Style — Quick Rules (source: elevenlabs.io, extracted by taste-skill)

## Tokens
- canvasBg: #FDFCFC — Primary ElevenLabs page canvas
- surfaceElevated: #F5F3F1 — Primary elevated card & bento surface
- surfaceSecondary: #FFFFFF — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 0, 0, 0.07) — Primary structural divider (1px rgba(0,0,0,0.07))
- borderSecondary: rgba(0, 0, 0, 0.07) — Secondary nested module or pill border
- textPrimary: #000000 — Hero H1, section H2 & high-contrast foreground
- textMuted: #666462 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #000000 — Primary interactive CTA & brand highlight (9999px (Pill))
- accentSecondary: #000000 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Waldenburg (w300); body: Waldenburg / Inter; mono: Geist Mono
- Hero H1: 48px | line-height 52px (leading-[1.08]) | letter-spacing -0.96px (tracking-[-0.02em]) | weight 300 (font-[300]) | color #000000 (text-black) | font Waldenburg
- Section H2 (Primary): 36px | line-height 42px (leading-[1.17]) | letter-spacing 0px (tracking-[0em]) | weight 300 (font-[300]) | color #000000 (text-black) | font Waldenburg
- Card / Feature H3: 20px | line-height 27px (leading-[1.35]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #000000 (text-black) | font Inter
- Body Copy (Paragraph): 14px | line-height 18px (leading-[1.29]) | letter-spacing 0.14px (tracking-[0.01em]) | weight 400 (font-[400]) | color #59544F (text-[#59544F]) | font Inter

## Components
- Primary button: height 44px, padding 0px 20px, radius 9999px, bg #FFFFFF, text #000000, 16px / 400
- Card: bg transparent, border none, radius 16px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for ElevenLabs’s exact #FDFCFC canvas and #F5F3F1 surface pairing.
- NEVER replace Waldenburg (w300) display typography or ignore its signature scale (48px / -0.02em (w300)).
- NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.07) (1px rgba(0,0,0,0.07)).
- 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 Geist Mono.

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

npx taste-skill add elevenlabs