How to build a UI in the Ashby style

:root {
  /* Ashby style — extracted from ashbyhq.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #FCFCFE;
  --text: #141415;
  --text-muted: #717075;
  --accent: #473BCE;
  --border: #EEEDEF;
  --font-heading: TTNormsPro, Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'TTNormsPro / Inter', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 72px;
  --h1-tracking: -0.04em;
  --h1-weight: 575;
  --radius-button: 6px;
  --radius-common: 6px;
  --shadow-common: rgb(255, 255, 255) 0px 0px 0px 4.5px, rgba(0, 0, 0, 0.1) 0px 0px 0px 5.5px;
  --ease: ease-out, ease-out, ease-out;
  --duration: 0.12s, 0.12s, 0.12s;
}

// tailwind.config.js — Ashby style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#FCFCFE",
        ink: "#141415",
        muted: "#717075",
        accent: "#473BCE",
        line: "#EEEDEF",
      },
      fontFamily: {
        heading: ["TTNormsPro", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["TTNormsPro / Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["SF Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["72px", { letterSpacing: "-0.04em", fontWeight: "575" }] },
      borderRadius: { button: "6px", card: "6px" },
      boxShadow: { brand: "rgb(255, 255, 255) 0px 0px 0px 4.5px, rgba(0, 0, 0, 0.1) 0px 0px 0px 5.5px" },
      transitionTimingFunction: { brand: "ease-out, ease-out, ease-out" },
    },
  },
};

---
name: ashby-style
description: Build UI in the Ashby visual style (Analytics-Driven Recruiting SaaS & Royal Indigo TTNormsPro). Use when the user asks for a Ashby-like look.
---

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

## Tokens
- canvasBg: #FFFFFF — Primary Ashby page canvas
- surfaceElevated: #FCFCFE — Primary elevated card & bento surface
- surfaceSecondary: #FFFFFF — Secondary interactive container / hover fill
- borderPrimary: #EEEDEF — Primary structural divider (1px solid #EEEDEF)
- borderSecondary: #EEEDEF — Secondary nested module or pill border
- textPrimary: #141415 — Hero H1, section H2 & high-contrast foreground
- textMuted: #717075 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #473BCE — Primary interactive CTA & brand highlight (6px)
- accentSecondary: #473BCE — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: TTNormsPro; body: TTNormsPro / Inter; mono: SF Mono
- Hero H1: 72px | line-height 79.2px (leading-[1.1]) | letter-spacing -2.88px (tracking-[-0.04em]) | weight 575 (font-[575]) | color #141415 (text-[#141415]) | font TTNormsPro
- Section H2 (Primary): 44px | line-height 48.4px (leading-[1.1]) | letter-spacing -1.1px (tracking-[-0.025em]) | weight 575 (font-[575]) | color #141415 (text-[#141415]) | font TTNormsPro
- Card / Feature H3: 20px | line-height 25px (leading-[1.25]) | letter-spacing -0.5px (tracking-[-0.025em]) | weight 500 (font-[500]) | color #141415 (text-[#141415]) | font TTNormsPro
- Body Copy (Paragraph): 20px | line-height 30px (leading-[1.5]) | letter-spacing -0.16px (tracking-[-0.008em]) | weight 400 (font-[400]) | color #717075 (text-[#717075]) | font TTNormsPro

## Components
- Primary button: height 36px, padding 1px 16px, radius 6px, bg transparent, text #FCFCFE, 16px / 545
- Card: bg #FFFFFF, border 1px solid #F4F4F4, radius 6px, padding 20px 26px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Ashby’s exact #FFFFFF canvas and #FCFCFE surface pairing.
- NEVER replace TTNormsPro display typography or ignore its signature scale (72px / -0.04em (w575)).
- NEVER use thick opaque borders that clash with #EEEDEF (1px solid #EEEDEF).
- NEVER deviate from the signature button geometry (6px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with SF Mono.

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

npx taste-skill add ashby