How to build a UI in the WorkOS style

:root {
  /* WorkOS style — extracted from workos.com by taste-skill */
  --canvas: #F9F9FB;
  --surface: #FFFFFF;
  --text: #29363D;
  --text-muted: #5E6C75;
  --accent: #6363F1;
  --border: #E8EAED;
  --font-heading: 'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 80px;
  --h1-tracking: -0.07em;
  --h1-weight: 500;
  --radius-button: 100px;
  --radius-common: 4px;
  --shadow-common: rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.17) 0px 5px 10px -4px;
  --ease: ease;
  --duration: 0.2s;
}

// tailwind.config.js — WorkOS style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#F9F9FB",
        surface: "#FFFFFF",
        ink: "#29363D",
        muted: "#5E6C75",
        accent: "#6363F1",
        line: "#E8EAED",
      },
      fontFamily: {
        heading: ["Untitled Sans", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Untitled Sans", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["IBM Plex Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["80px", { letterSpacing: "-0.07em", fontWeight: "500" }] },
      borderRadius: { button: "100px", card: "4px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.17) 0px 5px 10px -4px" },
      transitionTimingFunction: { brand: "ease" },
    },
  },
};

---
name: workos-style
description: Build UI in the WorkOS visual style (Enterprise-Ready Architectural Precision & Untitled Sans). Use when the user asks for a WorkOS-like look.
---

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

## Tokens
- canvasBg: #F9F9FB — Primary WorkOS page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: #F9F9FB — Secondary interactive container / hover fill
- borderPrimary: #E8EAED — Primary structural divider (1px solid #E8EAED)
- borderSecondary: rgba(0, 0, 49, 0.1) — Secondary nested module or pill border
- textPrimary: #29363D — Hero H1, section H2 & high-contrast foreground
- textMuted: #5E6C75 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #6363F1 — Primary interactive CTA & brand highlight (100px (Pill))
- accentSecondary: #23F0C3 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Untitled Sans; body: Untitled Sans; mono: IBM Plex Mono
- Hero H1: 80px | line-height 84px (leading-[1.05]) | letter-spacing -5.6px (tracking-[-0.07em]) | weight 500 (font-[500]) | color #29363D (text-[#29363D]) | font Untitled Sans
- Section H2 (Primary): 28px | line-height 33.6px (leading-[1.2]) | letter-spacing -1.4px (tracking-[-0.05em]) | weight 500 (font-[500]) | color #6363F1 (text-[#6363F1]) | font Untitled Sans
- Card / Feature H3: Subheading with crisp line-height
- Body Copy (Paragraph): 19px | line-height 30.4px (leading-[1.6]) | letter-spacing -0.19px (tracking-[-0.01em]) | weight 400 (font-[400]) | color #656B8A (text-[#656B8A]) | font Untitled Sans

## Components
- Primary button: height 43px, padding 12px 24px, radius 100px, bg #6363F1, text #FFFFFF, 16px / 500
- Card: bg transparent, border 7px solid #F0F0F5, radius 46px 46px 0px 0px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for WorkOS’s exact #F9F9FB canvas and #FFFFFF surface pairing.
- NEVER replace Untitled Sans display typography or ignore its signature scale (80px / -0.07em (w500)).
- NEVER use thick opaque borders that clash with #E8EAED (1px solid #E8EAED).
- NEVER deviate from the signature button geometry (100px (Pill)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with IBM Plex Mono.

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

npx taste-skill add workos