How to build a UI in the Inngest style

:root {
  /* Inngest style — extracted from inngest.com by taste-skill */
  --canvas: #0C0A09;
  --surface: #1C1C1C;
  --text: #FFFFFF;
  --text-muted: #A8A29E;
  --accent: #F76246;
  --border: rgba(255, 255, 255, 0.08);
  --font-heading: WhyteV1, Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter / Whyte', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'CircularXXMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 72px;
  --h1-tracking: 0em;
  --h1-weight: 400;
  --radius-button: 6px;
  --radius-common: 6px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(28, 28, 28) 0px 0px 0px 2px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 0.3s;
}

// tailwind.config.js — Inngest style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#0C0A09",
        surface: "#1C1C1C",
        ink: "#FFFFFF",
        muted: "#A8A29E",
        accent: "#F76246",
        line: "rgba(255, 255, 255, 0.08)",
      },
      fontFamily: {
        heading: ["WhyteV1", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter / Whyte", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["CircularXXMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["72px", { letterSpacing: "0em", fontWeight: "400" }] },
      borderRadius: { button: "6px", card: "6px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(28, 28, 28) 0px 0px 0px 2px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.2, 0.8, 0.2, 1)" },
    },
  },
};

---
name: inngest-style
description: Build UI in the Inngest visual style (Warm Obsidian Stone & Swiss Whyte / Coral-Cobalt Contrast). Use when the user asks for a Inngest-like look.
---

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

## Tokens
- canvasBg: #0C0A09 — Primary Inngest page canvas
- surfaceElevated: #1C1C1C — Primary elevated card & bento surface
- surfaceSecondary: rgba(244, 96, 74, 0.09) — Secondary interactive container / hover fill
- borderPrimary: rgba(255, 255, 255, 0.08) — Primary structural divider (1px rgba(255,255,255,0.08))
- borderSecondary: rgba(255, 255, 255, 0.08) — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: #A8A29E — Lead paragraphs, descriptions & muted labels
- accentPrimary: #F76246 — Primary interactive CTA & brand highlight (6px)
- accentSecondary: #F76246 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: WhyteV1; body: Inter / Whyte; mono: CircularXXMono
- Hero H1: 72px | line-height 68.4px (leading-[0.95]) | letter-spacing -1.44px (tracking-[-0.02em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font WhyteV1
- Section H2 (Primary): 64px | line-height 70.4px (leading-[1.1]) | letter-spacing -2.24px (tracking-[-0.035em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font WhyteV1
- Section H2 (Secondary): 40px | line-height 50px (leading-[1.25]) | letter-spacing -0.4px (tracking-[-0.01em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font Whyte Inktrap
- Card / Feature H3: 32px | line-height 32px (leading-[1]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font Whyte

## Components
- Primary button: height 42px, padding 0px 20px, radius 6px, bg #FFFFFF, text #000000, 12px / 600
- Card: bg transparent, border none, radius 6px, padding 20px 20px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Inngest’s exact #0C0A09 canvas and #1C1C1C surface pairing.
- NEVER replace WhyteV1 display typography or ignore its signature scale (72px / 0.95 (w400)).
- NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.08) (1px rgba(255,255,255,0.08)).
- 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 CircularXXMono.

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

npx taste-skill add inngest