How to build a UI in the Notion style

:root {
  /* Notion style — extracted from notion.so by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F6F5F4;
  --text: #000000;
  --text-muted: #615D59;
  --accent: #0075DE;
  --border: rgba(0, 0, 0, 0.1);
  --font-heading: NotionInter, Inter, system-ui, -apple-system, sans-serif;
  --font-body: NotionInter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 96px;
  --h1-tracking: -0.048em;
  --h1-weight: 600;
  --radius-button: 8px;
  --radius-common: 8px;
  --shadow-common: rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px;
  --ease: cubic-bezier(0.42, 0, 1, 1);
  --duration: 0.2s;
}

// tailwind.config.js — Notion style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F6F5F4",
        ink: "#000000",
        muted: "#615D59",
        accent: "#0075DE",
        line: "rgba(0, 0, 0, 0.1)",
      },
      fontFamily: {
        heading: ["NotionInter", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["NotionInter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["SFMono-Regular", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["96px", { letterSpacing: "-0.048em", fontWeight: "600" }] },
      borderRadius: { button: "8px", card: "8px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.42, 0, 1, 1)" },
    },
  },
};

---
name: notion-style
description: Build UI in the Notion visual style (Warm Workspace Canvas & Monumental NotionInter Display). Use when the user asks for a Notion-like look.
---

# Notion Style — Quick Rules (source: notion.so, extracted by taste-skill)

## Tokens
- canvasBg: #FFFFFF — Primary Notion page canvas
- surfaceElevated: #F6F5F4 — Primary elevated card & bento surface
- surfaceSecondary: #F9F9F8 — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 0, 0, 0.1) — Primary structural divider (1px rgba(0,0,0,0.1))
- borderSecondary: rgba(0, 0, 0, 0.1) — Secondary nested module or pill border
- textPrimary: #000000 — Hero H1, section H2 & high-contrast foreground
- textMuted: #615D59 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0075DE — Primary interactive CTA & brand highlight (8px)
- accentSecondary: #005BAB — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: NotionInter; body: NotionInter; mono: SFMono-Regular
- Hero H1: 96px | line-height 100px (leading-[1.04]) | letter-spacing -4.6px (tracking-[-0.048em]) | weight 600 (font-[600]) | color rgba(0, 0, 0, 0.95) (text-[rgba(0,0,0,0.95)]) | font NotionInter
- Section H2 (Primary): 54px | line-height 56px (leading-[1.04]) | letter-spacing -1.88px (tracking-[-0.035em]) | weight 700 (font-[700]) | color rgba(0, 0, 0, 0.95) (text-[rgba(0,0,0,0.95)]) | font NotionInter
- Card / Feature H3: 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #000000 (text-black) | font NotionInter
- Body Copy (Paragraph): 20px | line-height 28px (leading-[1.4]) | letter-spacing -0.12px (tracking-[-0.006em]) | weight 400 (font-[400]) | color rgba(0, 0, 0, 0.9) (text-[rgba(0,0,0,0.9)]) | font NotionInter

## Components
- Primary button: height 36px, padding 4px 14px, radius 8px, bg #0075DE, text #FFFFFF, 16px / 500
- Card: bg transparent, border 1px solid rgba(0, 0, 0, 0.1), radius 8px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Notion’s exact #FFFFFF canvas and #F6F5F4 surface pairing.
- NEVER replace NotionInter display typography or ignore its signature scale (96px / -0.048em (w600)).
- NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.1) (1px rgba(0,0,0,0.1)).
- NEVER deviate from the signature button geometry (8px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with SFMono-Regular.

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

npx taste-skill add notion