How to build a UI in the PlanetScale style

:root {
  /* PlanetScale style — extracted from planetscale.com by taste-skill */
  --canvas: #FAFAFA;
  --surface: #FFFFFF;
  --text: #111111;
  --text-muted: #414141;
  --accent: #F35815;
  --border: #C1C1C1;
  --font-heading: 'SF Mono / ui-monospace', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'SF Mono / ui-monospace', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono / ui-monospace', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 20px;
  --h1-tracking: 0em;
  --h1-weight: 700;
  --radius-button: 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — PlanetScale style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FAFAFA",
        surface: "#FFFFFF",
        ink: "#111111",
        muted: "#414141",
        accent: "#F35815",
        line: "#C1C1C1",
      },
      fontFamily: {
        heading: ["SF Mono / ui-monospace", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["SF Mono / ui-monospace", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["SF Mono / ui-monospace", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["20px", { letterSpacing: "0em", fontWeight: "700" }] },
      borderRadius: { button: "0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: planetscale-style
description: Build UI in the PlanetScale visual style (Pure Monospace ASCII Engineering Manual & Zero-Radius Brutalism). Use when the user asks for a PlanetScale-like look.
---

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

## Tokens
- canvasBg: #FAFAFA — Primary PlanetScale page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: #111111 — Secondary interactive container / hover fill
- borderPrimary: #C1C1C1 — Primary structural divider (1px solid #C1C1C1)
- borderSecondary: #C1C1C1 — Secondary nested module or pill border
- textPrimary: #111111 — Hero H1, section H2 & high-contrast foreground
- textMuted: #414141 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #F35815 — Primary interactive CTA & brand highlight (0px (Sharp Brutalist))
- accentSecondary: #F35815 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: SF Mono / ui-monospace; body: SF Mono / ui-monospace; mono: SF Mono / ui-monospace
- Hero H1: 20px | line-height 28px (leading-[1.4]) | letter-spacing -0.4px (tracking-[-0.02em]) | weight 700 (font-[700]) | color #111111 (text-[#111111]) | font ui-monospace
- Section H2 (Primary): 18px | line-height 26px (leading-[1.44]) | letter-spacing -0.2px (tracking-[-0.011em]) | weight 700 (font-[700]) | color #111111 (text-[#111111]) | font ui-monospace
- Card / Feature H3: 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #414141 (text-[#414141]) | font ui-monospace
- Body Copy (Paragraph): 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #414141 (text-[#414141]) | font ui-monospace

## Components
- Primary button: height 32px, padding 0px 8px, radius 0px, bg #F35815, text #FFFFFF, 16px / 600
- Card: bg #FFFFFF, border 1px solid #C1C1C1

## Never
- NEVER substitute generic uncalibrated gray backgrounds for PlanetScale’s exact #FAFAFA canvas and #FFFFFF surface pairing.
- NEVER replace SF Mono / ui-monospace display typography or ignore its signature scale (20px Mono / -0.02em (w700)).
- NEVER use thick opaque borders that clash with #C1C1C1 (1px solid #C1C1C1).
- NEVER deviate from the signature button geometry (0px (Sharp Brutalist)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with SF Mono / ui-monospace.

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

npx taste-skill add planetscale