How to build a UI in the Framer style

:root {
  /* Framer style — extracted from framer.com by taste-skill */
  --canvas: #000000;
  --surface: #111111;
  --text: #FFFFFF;
  --text-muted: #999999;
  --accent: #0099FF;
  --border: rgba(0, 153, 255, 0.42);
  --font-heading: 'GT Walsheim Medium', 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: 54px;
  --h1-tracking: -0.04em;
  --h1-weight: 500;
  --radius-button: 8px;
  --radius-common: 15px;
  --shadow-common: rgba(255, 255, 255, 0.35) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.35) 0px -1px 1px 0px inset;
}

// tailwind.config.js — Framer style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#000000",
        surface: "#111111",
        ink: "#FFFFFF",
        muted: "#999999",
        accent: "#0099FF",
        line: "rgba(0, 153, 255, 0.42)",
      },
      fontFamily: {
        heading: ["GT Walsheim Medium", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["54px", { letterSpacing: "-0.04em", fontWeight: "500" }] },
      borderRadius: { button: "8px", card: "15px" },
      boxShadow: { brand: "rgba(255, 255, 255, 0.35) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.35) 0px -1px 1px 0px inset" },
    },
  },
};

---
name: framer-style
description: Build UI in the Framer visual style (Pitch-Black Interactive Canvas & Electric #0099FF Blue Glow). Use when the user asks for a Framer-like look.
---

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

## Tokens
- canvasBg: #000000 — Primary Framer page canvas
- surfaceElevated: #111111 — Primary elevated card & bento surface
- surfaceSecondary: #111111 — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 153, 255, 0.42) — Primary structural divider (1px rgba(0,153,255,0.42))
- borderSecondary: #0099FF — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: #999999 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0099FF — Primary interactive CTA & brand highlight (8px)
- accentSecondary: #FFFFFF — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: GT Walsheim Medium; body: Inter; mono: JetBrains Mono
- Hero H1: 54px | line-height 54px (leading-[1]) | letter-spacing -2.16px (tracking-[-0.04em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font GT Walsheim Medium
- Section H2 (Primary): 54px | line-height 54px (leading-[1]) | letter-spacing -2.16px (tracking-[-0.04em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font GT Walsheim Medium
- Section H2 (Secondary): 44px | line-height 48.4px (leading-[1.1]) | letter-spacing -1.76px (tracking-[-0.04em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font GT Walsheim Medium
- Card / Feature H3: 18px | line-height 24.3px (leading-[1.35]) | letter-spacing -0.2px (tracking-[-0.011em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font Inter Variable

## Components
- Primary button: height 30px, padding 8px 10px, radius 8px, bg #FFFFFF, text #0000EE, 12px / 400
- Card: bg #111111, border 1px solid rgba(0, 153, 255, 0.42)

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Framer’s exact #000000 canvas and #111111 surface pairing.
- NEVER replace GT Walsheim Medium display typography or ignore its signature scale (54px / -0.04em (w500)).
- NEVER use thick opaque borders that clash with rgba(0, 153, 255, 0.42) (1px rgba(0,153,255,0.42)).
- 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 JetBrains Mono.

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

npx taste-skill add framer