How to build a UI in the Mintlify style

:root {
  /* Mintlify style — extracted from mintlify.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F9F6F3;
  --text: #121715;
  --text-muted: rgba(8, 9, 10, 0.8);
  --accent: #0077A6;
  --border: #F1F0EE;
  --font-heading: arizonaFlare, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 50px;
  --h1-tracking: -0.04em;
  --h1-weight: 400;
  --radius-button: 4px;
  --radius-common: 6px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.7s;
}

// tailwind.config.js — Mintlify style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F9F6F3",
        ink: "#121715",
        muted: "rgba(8, 9, 10, 0.8)",
        accent: "#0077A6",
        line: "#F1F0EE",
      },
      fontFamily: {
        heading: ["arizonaFlare", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["50px", { letterSpacing: "-0.04em", fontWeight: "400" }] },
      borderRadius: { button: "4px", card: "6px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.22, 1, 0.36, 1)" },
    },
  },
};

---
name: mintlify-style
description: Build UI in the Mintlify visual style (Warm Daylight Documentation & Editorial Arizona Flare Serif). Use when the user asks for a Mintlify-like look.
---

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

## Tokens
- canvasBg: #FFFFFF — Primary Mintlify page canvas
- surfaceElevated: #F9F6F3 — Primary elevated card & bento surface
- surfaceSecondary: #F9F6F3 — Secondary interactive container / hover fill
- borderPrimary: #F1F0EE — Primary structural divider (1px solid #F1F0EE)
- borderSecondary: rgba(0, 0, 0, 0.04) — Secondary nested module or pill border
- textPrimary: #121715 — Hero H1, section H2 & high-contrast foreground
- textMuted: rgba(8, 9, 10, 0.8) — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0077A6 — Primary interactive CTA & brand highlight (4px)
- accentSecondary: #0077A6 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: arizonaFlare; body: Inter; mono: JetBrains Mono
- Hero H1: 50px | line-height 52px (leading-[1.04]) | letter-spacing -2px (tracking-[-0.04em]) | weight 400 (font-[400]) | color #08090A (text-[#08090A]) | font arizonaFlare
- Section H2 (Primary): 36px | line-height 40px (leading-[1.11]) | letter-spacing -0.72px (tracking-[-0.02em]) | weight 500 (font-[500]) | color #121715 (text-[#121715]) | font inter
- Card / Feature H3: 35px | line-height 40px (leading-[1.14]) | letter-spacing -0.35px (tracking-[-0.01em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font inter
- Body Copy (Paragraph): 18px | line-height 24px (leading-[1.33]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color rgba(8, 8, 10, 0.6) (text-[rgba(8,8,10,0.6)]) | font inter

## Components
- Primary button: height 42px, padding 12px 12px, radius 4px, bg #08090A, text #FFFFFF, 14px / 500
- Card: bg transparent, border 1px solid rgba(26, 166, 128, 0.08), radius 23.4654px 23.4654px 0px 0px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Mintlify’s exact #FFFFFF canvas and #F9F6F3 surface pairing.
- NEVER replace arizonaFlare display typography or ignore its signature scale (50px / -0.04em (w400)).
- NEVER use thick opaque borders that clash with #F1F0EE (1px solid #F1F0EE).
- NEVER deviate from the signature button geometry (4px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with JetBrains Mono.

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

npx taste-skill add mintlify