How to build a UI in the Cal.com style

:root {
  /* Cal.com style — extracted from cal.com by taste-skill */
  --canvas: #F4F4F4;
  --surface: #FFFFFF;
  --text: #242424;
  --text-muted: #898989;
  --accent: #242424;
  --border: #E5E5E5;
  --font-heading: 'Cal Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 64px;
  --h1-tracking: 0em;
  --h1-weight: 600;
  --radius-button: 12px;
  --radius-common: 12px;
  --shadow-common: rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset;
}

// tailwind.config.js — Cal.com style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#F4F4F4",
        surface: "#FFFFFF",
        ink: "#242424",
        muted: "#898989",
        accent: "#242424",
        line: "#E5E5E5",
      },
      fontFamily: {
        heading: ["Cal Sans", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Roboto Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["64px", { letterSpacing: "0em", fontWeight: "600" }] },
      borderRadius: { button: "12px", card: "12px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset" },
    },
  },
};

---
name: cal-style
description: Build UI in the Cal.com visual style (Neo-Brutalist Swiss Scheduling & Geometric Cal Sans). Use when the user asks for a Cal.com-like look.
---

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

## Tokens
- canvasBg: #F4F4F4 — Primary Cal.com page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: #F4F4F4 — Secondary interactive container / hover fill
- borderPrimary: #E5E5E5 — Primary structural divider (1px solid #E5E5E5)
- borderSecondary: #E5E5E5 — Secondary nested module or pill border
- textPrimary: #242424 — Hero H1, section H2 & high-contrast foreground
- textMuted: #898989 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #242424 — Primary interactive CTA & brand highlight (12px)
- accentSecondary: #7826B1 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Cal Sans; body: Inter; mono: Roboto Mono
- Hero H1: 64px | line-height 70.4px (leading-[1.1]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #242424 (text-[#242424]) | font Cal Sans
- Section H2 (Primary): 48px | line-height 52.8px (leading-[1.1]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #242424 (text-[#242424]) | font Cal Sans
- Card / Feature H3: 18px | line-height 23.4px (leading-[1.3]) | letter-spacing -0.2px (tracking-[-0.011em]) | weight 300 (font-[300]) | color #242424 (text-[#242424]) | font Cal Sans UI Variable Light
- Body Copy (Paragraph): 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 300 (font-[300]) | color #898989 (text-[#898989]) | font Cal Sans UI Variable Light

## Components
- Primary button: height 36px, padding 8px 12px, radius 12px, bg transparent, text #0000EE, 12px / 400
- Card: bg #FFFFFF, border none, radius 12px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Cal.com’s exact #F4F4F4 canvas and #FFFFFF surface pairing.
- NEVER replace Cal Sans display typography or ignore its signature scale (64px / 1.1 (w600)).
- NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).
- NEVER deviate from the signature button geometry (12px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with Roboto Mono.

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

npx taste-skill add cal