How to build a UI in the Polar style

:root {
  /* Polar style — extracted from polar.sh by taste-skill */
  --canvas: #090909;
  --surface: #111111;
  --text: #FFFFFF;
  --text-muted: #858585;
  --accent: #FFFFFF;
  --border: #212121;
  --font-heading: 'PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter / PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'GeistMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 36px;
  --h1-tracking: 0em;
  --h1-weight: 400;
  --radius-button: 9999px;
  --radius-common: 12px;
  --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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.075s;
}

// tailwind.config.js — Polar style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#090909",
        surface: "#111111",
        ink: "#FFFFFF",
        muted: "#858585",
        accent: "#FFFFFF",
        line: "#212121",
      },
      fontFamily: {
        heading: ["PP Neue Montreal", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter / PP Neue Montreal", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["GeistMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["36px", { letterSpacing: "0em", fontWeight: "400" }] },
      borderRadius: { button: "9999px", card: "12px" },
      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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: polar-style
description: Build UI in the Polar visual style (Nordic Dark Monetization & PP Neue Montreal Minimalist). Use when the user asks for a Polar-like look.
---

# Polar Style — Quick Rules (source: polar.sh, extracted by taste-skill)

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

## Typography
- Heading font: PP Neue Montreal; body: Inter / PP Neue Montreal; mono: GeistMono
- Hero H1: 36px | line-height 45px (leading-[1.25]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font PP Neue Montreal
- Section H2 (Primary): 48px | line-height 60px (leading-[1.25]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font PP Neue Montreal
- Section H2 (Secondary): 30px | line-height 41.3px (leading-[1.38]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font PP Neue Montreal
- Card / Feature H3: 20px | line-height 27.5px (leading-[1.38]) | letter-spacing 0.24px (tracking-[0.012em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font PP Neue Montreal

## Components
- Primary button: height 40px, padding 12px 20px, radius 9999px, bg #FFFFFF, text #000000, 14px / 550
- Card: bg transparent, border 1px solid #181818, radius 7.6px, padding 48px 48px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Polar’s exact #090909 canvas and #111111 surface pairing.
- NEVER replace PP Neue Montreal display typography or ignore its signature scale (36px / 1.25 (w400)).
- NEVER use thick opaque borders that clash with #212121 (1px solid #212121).
- NEVER deviate from the signature button geometry (9999px (Pill)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with GeistMono.

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

npx taste-skill add polar