How to build a UI in the Clerk style

:root {
  /* Clerk style — extracted from clerk.com by taste-skill */
  --canvas: #F7F7F8;
  --surface: #FFFFFF;
  --text: #131316;
  --text-muted: #747686;
  --accent: #6C47FF;
  --border: rgba(0, 0, 0, 0.06);
  --font-heading: 'Geist / geistNumbers', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter / Geist', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'soehneMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 56px;
  --h1-tracking: -0.035em;
  --h1-weight: 700;
  --radius-button: 9999px;
  --radius-common: 6px;
  --shadow-common: rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.45s;
}

// tailwind.config.js — Clerk style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#F7F7F8",
        surface: "#FFFFFF",
        ink: "#131316",
        muted: "#747686",
        accent: "#6C47FF",
        line: "rgba(0, 0, 0, 0.06)",
      },
      fontFamily: {
        heading: ["Geist / geistNumbers", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter / Geist", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["soehneMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["56px", { letterSpacing: "-0.035em", fontWeight: "700" }] },
      borderRadius: { button: "9999px", card: "6px" },
      boxShadow: { brand: "rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: clerk-style
description: Build UI in the Clerk visual style (Tactile Micro-Shadow Auth Components & Electric Violet). Use when the user asks for a Clerk-like look.
---

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

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

## Typography
- Heading font: Geist / geistNumbers; body: Inter / Geist; mono: soehneMono
- Hero H1: 56px | line-height 64px (leading-[1.14]) | letter-spacing -1.96px (tracking-[-0.035em]) | weight 700 (font-[700]) | color #131316 (text-[#131316]) | font geistNumbers
- Section H2 (Primary): 20px | line-height 26.7px (leading-[1.33]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #212126 (text-[#212126]) | font ui-sans-serif
- Card / Feature H3: Subheading with crisp line-height
- Body Copy (Paragraph): 18px | line-height 27.9px (leading-[1.55]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #5E5F6E (text-[#5E5F6E]) | font geistNumbers

## Components
- Primary button: height 30px, padding 0px 12px, radius 9999px, bg rgba(20, 20, 20, 0.05), text #131316, 13px / 500
- Card: bg transparent, border none, radius 16.5px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Clerk’s exact #F7F7F8 canvas and #FFFFFF surface pairing.
- NEVER replace Geist / geistNumbers display typography or ignore its signature scale (56px / -0.035em (w700)).
- NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.06) (1px rgba(0,0,0,0.06)).
- NEVER deviate from the signature button geometry (9999px / 6px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with soehneMono.

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

npx taste-skill add clerk