Awesome Design Md

Awesome DESIGN.md

A curated collection of 54 DESIGN.md files extracted from real, developer-focused websites. Each file is a complete design system specification that AI agents can read to generate pixel-perfect, brand-consistent UI.

What is DESIGN.md?

DESIGN.md is a concept introduced by Google Stitch — a plain-text design system document that AI agents read to generate consistent UI. It's just a markdown file. Drop it into your project root and any AI coding agent instantly understands how your UI should look.

How to Use

1. User says "make it look like [brand]" → Find the matching reference file below 2. Read the reference file from references/{site-name}.md 3. Copy the DESIGN.md content into the user's project root as DESIGN.md 4. Use the design tokens (colors, typography, spacing, components) when generating UI code

Available Design Systems

AI & Machine Learning

Developer Tools & Platforms

Infrastructure & Cloud

Design & Productivity

Fintech & Crypto

Enterprise & Consumer

What Each DESIGN.md Contains

Every file follows the Google Stitch DESIGN.md format with 9 sections:

1. Visual Theme & Atmosphere — Mood, density, design philosophy 2. Color Palette & Roles — Semantic name + hex + functional role 3. Typography Rules — Font families, full hierarchy table 4. Component Stylings — Buttons, cards, inputs, navigation with states 5. Layout Principles — Spacing scale, grid, whitespace philosophy 6. Depth & Elevation — Shadow system, surface hierarchy 7. Do's and Don'ts — Design guardrails and anti-patterns 8. Responsive Behavior — Breakpoints, touch targets, collapsing strategy 9. Agent Prompt Guide — Quick color reference, ready-to-use prompts

Workflow

1. User specifies a brand → Direct match

User: "Build me a landing page that looks like Stripe"
→ Read references/stripe.md
→ Copy content to user's project as DESIGN.md
→ Use the design tokens to generate UI code

2. User wants to browse → Filter and suggest

User: "Show me dark-themed design systems"
→ Suggest: Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, etc.
→ Let user pick, then load that reference

3. User doesn't specify a style → Smart recommendation

When the user asks to build a UI without mentioning any brand or style preference (e.g., "帮我做一个落地页", "写一个 dashboard", "做一个 SaaS 官网"), proactively recommend 3–5 design systems based on the project type:

Recommendation workflow:

User: "帮我做一个 AI 聊天产品的界面"
→ Agent: "推荐以下设计风格供你选择：
   1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
   2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
   3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
   4. ⬛ Vercel — 黑白精准，极致简约
   5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
   选一个编号，我直接用对应的设计系统帮你生成。"
→ User picks one → Load reference → Generate UI

If the user says "随便" or "你决定":

• Default to Vercel (safest all-rounder: clean, modern, professional)
• Mention the choice and offer to switch: "我先用 Vercel 风格（简约黑白），不喜欢随时换。"

Design System: Airbnb

1. Visual Theme & Atmosphere

Airbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (#ffffff) with the iconic Rausch Red (#ff385c) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.

The typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's "belong anywhere" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.

What distinguishes Airbnb is its palette-based token system (--palette-*) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.

Key Characteristics:

• Pure white canvas with Rausch Red (#ff385c) as singular brand accent
• Airbnb Cereal VF — custom variable font with warm, rounded terminals
• Palette-based token system (--palette-*) for systematic color management
• Three-layer card shadows: border ring + soft blur + stronger blur
• Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements
• Circular navigation controls (50% radius)
• Photography-first listing cards — images are the hero content
• Near-black text (#222222) — warm, not cold
• Luxe Purple (#460479) and Plus Magenta (#92174d) for premium tiers

2. Color Palette & Roles

Primary Brand

• Rausch Red (#ff385c): --palette-bg-primary-core, primary CTA, brand accent, active states
• Deep Rausch (#e00b41): --palette-bg-tertiary-core, pressed/dark variant of brand red
• Error Red (#c13515): --palette-text-primary-error, error text on light
• Error Dark (#b32505): --palette-text-secondary-error-hover, error hover

Premium Tiers

• Luxe Purple (#460479): --palette-bg-primary-luxe, Airbnb Luxe tier branding
• Plus Magenta (#92174d): --palette-bg-primary-plus, Airbnb Plus tier branding

Text Scale

• Near Black (#222222): --palette-text-primary, primary text — warm, not cold
• Focused Gray (#3f3f3f): --palette-text-focused, focused state text
• Secondary Gray (#6a6a6a): Secondary text, descriptions
• Disabled (rgba(0,0,0,0.24)): --palette-text-material-disabled, disabled state
• Link Disabled (#929292): --palette-text-link-disabled, disabled links

Interactive

• Legal Blue (#428bff): --palette-text-legal, legal links, informational
• Border Gray (#c1c1c1): Border color for cards and dividers
• Light Surface (#f2f2f2): Circular navigation buttons, secondary surfaces

Surface & Shadows

• Pure White (#ffffff): Page background, card surfaces
• Card Shadow (rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px): Three-layer warm lift
• Hover Shadow (rgba(0,0,0,0.08) 0px 4px 12px): Button hover elevation

3. Typography Rules

Font Family

• Primary: Airbnb Cereal VF, fallbacks: Circular, -apple-system, system-ui, Roboto, Helvetica Neue
• OpenType Features: "salt" (stylistic alternates) on specific caption elements

Hierarchy

Principles

• Warm weight range: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.
• Negative tracking on headings: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.
• "salt" OpenType feature: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.
• Variable font precision: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.

4. Component Stylings

Buttons

Primary Dark

• Background: #222222 (near-black, not pure black)
• Text: #ffffff
• Padding: 0px 24px
• Radius: 8px
• Hover: transitions to error/brand accent via var(--accent-bg-error)
• Focus: 0 0 0 2px var(--palette-grey1000) ring + scale(0.92)

Circular Nav

• Background: #f2f2f2
• Text: #222222
• Radius: 50% (circle)
• Hover: shadow rgba(0,0,0,0.08) 0px 4px 12px + translateX(50%)
• Active: 4px white border ring + focus shadow
• Focus: scale(0.92) shrink animation

Cards & Containers

• Background: #ffffff
• Radius: 14px (badges), 20px (cards/buttons), 32px (large)
• Shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px (three-layer)
• Listing cards: full-width photography on top, details below
• Carousel controls: circular 50% buttons

Inputs

• Search: #222222 text
• Focus: var(--palette-bg-primary-error) background tint + 0 0 0 2px ring
• Radius: depends on context (search bar uses pill-like rounding)

Navigation

• White sticky header with search bar centered
• Airbnb logo (Rausch Red) left-aligned
• Category filter pills: horizontal scroll below search
• Circular nav controls for carousel navigation
• "Become a Host" text link, avatar/menu right-aligned

Image Treatment

• Listing photography fills card top with generous height
• Image carousel with dot indicators
• Heart/wishlist icon overlay on images
• 8px–14px radius on contained images

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px

Grid & Container

• Full-width header with centered search
• Category pill bar: horizontal scrollable row
• Listing grid: responsive multi-column (3–5 columns on desktop)
• Full-width footer with link columns

Whitespace Philosophy

• Travel-magazine spacing: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.
• Photography density: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.
• Search bar prominence: The search bar gets maximum vertical space in the header — finding your destination is the primary action.

Border Radius Scale

• Subtle (4px): Small links
• Standard (8px): Buttons, tabs, search elements
• Badge (14px): Status badges, labels
• Card (20px): Feature cards, large buttons
• Large (32px): Large containers, hero elements
• Circle (50%): Nav controls, avatars, icons

6. Depth & Elevation

Shadow Philosophy: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (0px 0px 0px 1px at 0.02 opacity) is an ultra-subtle border. Layer 2 (0px 2px 6px at 0.04) provides soft ambient shadow. Layer 3 (0px 4px 8px at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.

7. Do's and Don'ts

Do

• Use #222222 (warm near-black) for text — never pure #000000
• Apply Rausch Red (#ff385c) only for primary CTAs and brand moments — it's the singular accent
• Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional
• Apply the three-layer card shadow for all elevated surfaces
• Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls
• Use photography as the primary visual content — listings are image-first
• Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy
• Use circular (50%) buttons for carousel/navigation controls

Don't

• Don't use pure black (#000000) for text — always #222222 (warm)
• Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only
• Don't use thin font weights (300, 400) for headings — 500 minimum
• Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated
• Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core
• Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system
• Don't override the palette token system — use --palette-* variables consistently

8. Responsive Behavior

Breakpoints

Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.

Touch Targets

• Circular nav buttons: adequate 50% radius sizing
• Listing cards: full-card tap target on mobile
• Search bar: prominently sized for thumb interaction
• Category pills: horizontally scrollable with generous padding

Collapsing Strategy

• Listing grid: 5 → 4 → 3 → 2 → 1 columns
• Search: expanded bar → compact bar → overlay
• Category pills: horizontal scroll at all sizes
• Navigation: full header → mobile simplified
• Map: side panel → overlay/toggle

Image Behavior

• Listing photos: carousel with swipe on mobile
• Responsive image sizing with aspect ratio maintained
• Heart overlay positioned consistently across sizes
• Photo quality adjusts based on viewport

9. Agent Prompt Guide

Quick Color Reference

• Background: Pure White (#ffffff)
• Text: Near Black (#222222)
• Brand accent: Rausch Red (#ff385c)
• Secondary text: #6a6a6a
• Disabled: rgba(0,0,0,0.24)
• Card border: rgba(0,0,0,0.02) 0px 0px 0px 1px
• Card shadow: full three-layer stack
• Button surface: #f2f2f2

Example Component Prompts

• "Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a."
• "Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon)."
• "Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius)."
• "Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent."
• "Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline."

Iteration Guide

1. Start with white — the photography provides all the color 2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only 3. Near-black (#222222) for text — the warmth matters 4. Three-layer shadows create natural, warm lift — always use all three layers 5. Generous radius: 8px buttons, 20px cards, 50% controls 6. Cereal VF at 500–700 weight — no thin weights for any heading 7. Photography is hero — every listing card is image-first

Design System: Airtable

1. Visual Theme & Atmosphere

Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (#181d26) and Airtable Blue (#1b61c9) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.

Key Characteristics:

• White canvas with deep navy text (#181d26)
• Airtable Blue (#1b61c9) as primary CTA and link color
• Haas + Haas Groot Disp dual font system
• Positive letter-spacing on body text (0.08px–0.28px)
• 12px radius buttons, 16px–32px for cards
• Multi-layer blue-tinted shadow: rgba(45,127,249,0.28) 0px 1px 3px
• Semantic theme tokens: --theme_* CSS variable naming

2. Color Palette & Roles

Primary

• Deep Navy (#181d26): Primary text
• Airtable Blue (#1b61c9): CTA buttons, links
• White (#ffffff): Primary surface
• Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Semantic

• Success Green (#006400): --theme_success-text
• Weak Text (rgba(4,14,32,0.69)): --theme_text-weak
• Secondary Active (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Neutral

• Dark Gray (#333333): Secondary text
• Mid Blue (#254fad): Link/accent blue variant
• Border (#e0e2e6): Card borders
• Light Surface (#f8fafc): Subtle surface

Shadows

• Blue-tinted (rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset)
• Soft (rgba(15,48,106,0.05) 0px 0px 20px)

3. Typography Rules

Font Families

• Primary: Haas, fallbacks: -apple-system, system-ui, Segoe UI, Roboto
• Display: Haas Groot Disp, fallback: Haas

Hierarchy

4. Component Stylings

Buttons

• Primary Blue: #1b61c9, white text, 16px 24px padding, 12px radius
• White: white bg, #181d26 text, 12px radius, 1px border white
• Cookie Consent: #1b61c9 bg, 2px radius (sharp)

Cards: 1px solid #e0e2e6, 16px–24px radius

Inputs: Standard Haas styling

5. Layout

• Spacing: 1–48px (8px base)
• Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)

6. Depth

• Blue-tinted multi-layer shadow system
• Soft ambient: rgba(15,48,106,0.05) 0px 0px 20px

7. Do's and Don'ts

Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons

Don't: Skip positive letter-spacing, use heavy shadows

8. Responsive Behavior

Breakpoints: 425–1664px (23 breakpoints)

9. Agent Prompt Guide

• Text: Deep Navy (#181d26)
• CTA: Airtable Blue (#1b61c9)
• Background: White (#ffffff)
• Border: #e0e2e6

Design System: Apple

1. Visual Theme & Atmosphere

Apple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.

The typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset — precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.

The color story is starkly binary. Product sections alternate between pure black (#000000) backgrounds with white text and light gray (#f5f5f7) backgrounds with near-black text (#1d1d1f). This creates a cinematic pacing — dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (#0071e3), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.

Key Characteristics:

• SF Pro Display/Text with optical sizing — letterforms adapt automatically to size context
• Binary light/dark section rhythm: black (#000000) alternating with light gray (#f5f5f7)
• Single accent color: Apple Blue (#0071e3) reserved exclusively for interactive elements
• Product-as-hero photography on solid color fields — no gradients, no textures, no distractions
• Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact
• Full-width section layout with centered content — the viewport IS the canvas
• Pill-shaped CTAs (980px radius) creating soft, approachable action buttons
• Generous whitespace between sections allowing each product moment to breathe

2. Color Palette & Roles

Primary

• Pure Black (#000000): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.
• Light Gray (#f5f5f7): Alternate section backgrounds, informational areas. Not white — the slight blue-gray tint prevents sterility.
• Near Black (#1d1d1f): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.

Interactive

• Apple Blue (#0071e3): --sk-focus-color, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.
• Link Blue (#0066cc): --sk-body-link-color, inline text links. Slightly darker than Apple Blue for text-level readability.
• Bright Blue (#2997ff): Links on dark backgrounds. Higher luminance for contrast on black sections.

Text

• White (#ffffff): Text on dark backgrounds, button text on blue/dark CTAs.
• Near Black (#1d1d1f): Primary body text on light backgrounds.
• Black 80% (rgba(0, 0, 0, 0.8)): Secondary text, nav items on light backgrounds. Slightly softened.
• Black 48% (rgba(0, 0, 0, 0.48)): Tertiary text, disabled states, carousel controls.

Surface & Dark Variants

• Dark Surface 1 (#272729): Card backgrounds in dark sections.
• Dark Surface 2 (#262628): Subtle surface variation in dark contexts.
• Dark Surface 3 (#28282a): Elevated cards on dark backgrounds.
• Dark Surface 4 (#2a2a2d): Highest dark surface elevation.
• Dark Surface 5 (#242426): Deepest dark surface tone.

Button States

• Button Active (#ededf2): Active/pressed state for light buttons.
• Button Default Light (#fafafc): Search/filter button backgrounds.
• Overlay (rgba(210, 210, 215, 0.64)): Media control scrims, overlays.
• White 32% (rgba(255, 255, 255, 0.32)): Hover state on dark modal close buttons.

Shadows

• Card Shadow (rgba(0, 0, 0, 0.22) 3px 5px 30px 0px): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.

3. Typography Rules

Font Family

• Display: SF Pro Display, with fallbacks: SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Body: SF Pro Text, with fallbacks: SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.

Hierarchy

Principles

• Optical sizing as philosophy: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.
• Weight restraint: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.
• Negative tracking at all sizes: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.
• Extreme line-height range: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.

4. Component Stylings

Buttons

Primary Blue (CTA)

• Background: #0071e3 (Apple Blue)
• Text: #ffffff
• Padding: 8px 15px
• Radius: 8px
• Border: 1px solid transparent
• Font: SF Pro Text, 17px, weight 400
• Hover: background brightens slightly
• Active: #ededf2 background shift
• Focus: 2px solid var(--sk-focus-color, #0071E3) outline
• Use: Primary call-to-action ("Buy", "Shop iPhone")

Primary Dark

• Background: #1d1d1f
• Text: #ffffff
• Padding: 8px 15px
• Radius: 8px
• Font: SF Pro Text, 17px, weight 400
• Use: Secondary CTA, dark variant

Pill Link (Learn More / Shop)

• Background: transparent
• Text: #0066cc (light bg) or #2997ff (dark bg)
• Radius: 980px (full pill)
• Border: 1px solid #0066cc
• Font: SF Pro Text, 14px-17px
• Hover: underline decoration
• Use: "Learn more" and "Shop" links — the signature Apple inline CTA

Filter / Search Button

• Background: #fafafc
• Text: rgba(0, 0, 0, 0.8)
• Padding: 0px 14px
• Radius: 11px
• Border: 3px solid rgba(0, 0, 0, 0.04)
• Focus: 2px solid var(--sk-focus-color, #0071E3) outline
• Use: Search bars, filter controls

Media Control

• Background: rgba(210, 210, 215, 0.64)
• Text: rgba(0, 0, 0, 0.48)
• Radius: 50% (circular)
• Active: scale(0.9), background shifts
• Focus: 2px solid var(--sk-focus-color, #0071e3) outline, white bg, black text
• Use: Play/pause, carousel arrows

Cards & Containers

• Background: #f5f5f7 (light) or #272729-#2a2a2d (dark)
• Border: none (borders are rare in Apple's system)
• Radius: 5px-8px
• Shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px for elevated product cards
• Content: centered, generous padding
• Hover: no standard hover state — cards are static, links within them are interactive

Navigation

• Background: rgba(0, 0, 0, 0.8) (translucent dark) with backdrop-filter: saturate(180%) blur(20px)
• Height: 48px (compact)
• Text: #ffffff at 12px, weight 400
• Active: underline on hover
• Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport
• Mobile: collapses to hamburger with full-screen overlay menu
• The nav floats above content, maintaining its dark translucent glass regardless of section background

Image Treatment

• Products on solid-color fields (black or white) — no backgrounds, no context, just the object
• Full-bleed section images that span the entire viewport width
• Product photography at extremely high resolution with subtle shadows
• Lifestyle images confined to rounded-corner containers (12px+ radius)

Distinctive Components

Product Hero Module

• Full-viewport-width section with solid background (black or #f5f5f7)
• Product name as the primary headline (SF Pro Display, 56px, weight 600)
• One-line descriptor below in lighter weight
• Two pill CTAs side by side: "Learn more" (outline) and "Buy" / "Shop" (filled)

Product Grid Tile

• Square or near-square card on contrasting background
• Product image dominating 60-70% of the tile
• Product name + one-line description below
• "Learn more" and "Shop" link pair at bottom

Feature Comparison Strip

• Horizontal scroll of product variants
• Each variant as a vertical card with image, name, and key specs
• Minimal chrome — the products speak for themselves

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px
• Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.

Grid & Container

• Max content width: approximately 980px (the recurring "980px radius" in pill buttons echoes this width)
• Hero: full-viewport-width sections with centered content block
• Product grids: 2-3 column layouts within centered container
• Single-column for hero moments — one product, one message, full attention
• No visible grid lines or gutters — spacing creates implied structure

Whitespace Philosophy

• Cinematic breathing room: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty — it is the pause between scenes in a film.
• Vertical rhythm through color blocks: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, #f5f5f7, white). Each color change signals a new "scene."
• Compression within, expansion between: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.

Border Radius Scale

• Micro (5px): Small containers, link tags
• Standard (8px): Buttons, product cards, image containers
• Comfortable (11px): Search inputs, filter buttons
• Large (12px): Feature panels, lifestyle image containers
• Full Pill (980px): CTA links ("Learn more", "Shop"), navigation pills
• Circle (50%): Media controls (play/pause, arrows)

6. Depth & Elevation

Shadow Philosophy: Apple uses shadow extremely sparingly. The primary shadow (3px 5px 30px with 0.22 opacity) is soft, wide, and offset — mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the "product as physical sculpture" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).

Decorative Depth

• Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content
• Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows
• Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones

7. Do's and Don'ts

Do

• Use SF Pro Display at 20px+ and SF Pro Text below 20px — respect the optical sizing boundary
• Apply negative letter-spacing at all text sizes (not just headlines) — Apple tracks tight universally
• Use Apple Blue (#0071e3) ONLY for interactive elements — it must be the singular accent
• Alternate between black and light gray (#f5f5f7) section backgrounds for cinematic rhythm
• Use 980px pill radius for CTA links — the signature Apple link shape
• Keep product imagery on solid-color fields with no competing visual elements
• Use the translucent dark glass (rgba(0,0,0,0.8) + blur) for sticky navigation
• Compress headline line-heights to 1.07-1.14 — Apple headlines are famously tight

Don't

• Don't introduce additional accent colors — the entire chromatic budget is spent on blue
• Don't use heavy shadows or multiple shadow layers — Apple's shadow system is one soft diffused shadow or nothing
• Don't use borders on cards or containers — Apple almost never uses visible borders (except on specific buttons)
• Don't apply wide letter-spacing to SF Pro — it is designed to run tight at every size
• Don't use weight 800 or 900 — the maximum is 700 (bold), and even that is rare
• Don't add textures, patterns, or gradients to backgrounds — solid colors only
• Don't make the navigation opaque — the glass blur effect is essential to the Apple UI identity
• Don't center-align body text — Apple body copy is left-aligned; only headlines center
• Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTAs: 8px 15px padding creating ~44px touch height
• Navigation links: 48px height with adequate spacing
• Media controls: 50% radius circular buttons, minimum 44x44px
• "Learn more" pills: generous padding for comfortable tapping

Collapsing Strategy

• Hero headlines: 56px Display → 40px → 28px on mobile, maintaining tight line-height proportionally
• Product grids: 3-column → 2-column → single column stacked
• Navigation: full horizontal nav → compact mobile menu (hamburger)
• Product hero modules: full-bleed maintained at all sizes, text scales down
• Section backgrounds: maintain full-width color blocks at all breakpoints — the cinematic rhythm never breaks
• Image sizing: products scale proportionally, never crop — the product silhouette is sacred

Image Behavior

• Product photography maintains aspect ratio at all breakpoints
• Hero product images scale down but stay centered
• Full-bleed section backgrounds persist at every size
• Lifestyle images may crop on mobile but maintain their rounded corners
• Lazy loading for below-fold product images

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Apple Blue (#0071e3)
• Page background (light): #f5f5f7
• Page background (dark): #000000
• Heading text (light): #1d1d1f
• Heading text (dark): #ffffff
• Body text: rgba(0, 0, 0, 0.8) on light, #ffffff on dark
• Link (light bg): #0066cc
• Link (dark bg): #2997ff
• Focus ring: #0071e3
• Card shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

Example Component Prompts

• "Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding)."
• "Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px."
• "Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right."
• "Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below."
• "Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA."

Iteration Guide

1. Every interactive element gets Apple Blue (#0071e3) — no other accent colors 2. Section backgrounds alternate: black for immersive moments, #f5f5f7 for informational moments 3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below — never mix 4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px 5. The navigation glass effect (translucent dark + blur) is non-negotiable — it defines the Apple web experience 6. Products always appear on solid color fields — never on gradients, textures, or lifestyle backgrounds in hero modules 7. Shadow is rare and always soft: 3px 5px 30px 0.22 opacity or nothing at all 8. Pill CTAs use 980px radius — this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape

Design System: BMW

1. Visual Theme & Atmosphere

BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.

The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.

What makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (--site-context-highlight-color: #1c69d4, --site-context-focus-color: #0653b6, --site-context-metainfo-color: #757575) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (#1c69d4) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.

Key Characteristics:

• BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority
• BMW Blue (#1c69d4) as singular accent — used only for interactive elements
• Zero border-radius detected — angular, sharp-cornered, industrial geometry
• Dark hero photography + white content sections — showroom lighting rhythm
• CSS variable-driven theming: --site-context-* tokens for brand flexibility
• Weight 900 for navigation emphasis — extreme contrast with 300 display
• Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering
• Full-bleed automotive photography as primary visual content

2. Color Palette & Roles

Primary Brand

• Pure White (#ffffff): --site-context-theme-color, primary surface, card backgrounds
• BMW Blue (#1c69d4): --site-context-highlight-color, primary interactive accent
• BMW Focus Blue (#0653b6): --site-context-focus-color, keyboard focus and active states

Neutral Scale

• Near Black (#262626): Primary text on light surfaces, dark link text
• Meta Gray (#757575): --site-context-metainfo-color, secondary text, metadata
• Silver (#bbbbbb): Tertiary text, muted links, footer elements

Interactive States

• All links hover to white (#ffffff) — suggesting primarily dark-surface navigation
• Text links use underline: none on hover — clean interaction

Shadows

• Minimal shadow system — depth through photography and dark/light section contrast

3. Typography Rules

Font Families

• Display Light: BMWTypeNextLatin Light, fallbacks: Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo
• Body / UI: BMWTypeNextLatin, same fallback stack

Hierarchy

Principles

• Light display, heavy navigation: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.
• Universal uppercase display: The 60px hero is always uppercase — creating a monumental, architectural quality.
• Tight everything: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.
• Single font family: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.

4. Component Stylings

Buttons

• Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
• Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
• Border: white bottom-border on dark surfaces (1px solid #ffffff)
• No border-radius — sharp rectangular buttons

Cards & Containers

• No border-radius — all containers are sharp-cornered rectangles
• White backgrounds on light sections
• Dark backgrounds for hero/feature sections
• No visible borders on most elements

Navigation

• BMWTypeNextLatin 18px weight 900 for primary nav links
• White text on dark header
• BMW logo 54x54px
• Hover: remains white, text-decoration none
• "Home" text link in header

Image Treatment

• Full-bleed automotive photography
• Dark cinematic lighting
• Edge-to-edge hero images
• Car photography as primary visual content

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px

Grid & Container

• Full-width hero photography
• Centered content sections
• Footer: multi-column link grid

Whitespace Philosophy

• Showroom pacing: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.
• Compressed content: Body text areas use tight line-heights and compact spacing — information-dense, no waste.

Border Radius Scale

• None detected. BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.

6. Depth & Elevation

Shadow Philosophy: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.

7. Do's and Don'ts

Do

• Use BMWTypeNextLatin Light (300) uppercase for all display headings
• Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable
• Use BMW Blue (#1c69d4) only for interactive elements — never decoratively
• Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional
• Use full-bleed automotive photography for hero sections
• Keep line-heights tight (1.15–1.30) throughout
• Use --site-context-* CSS variables for theming

Don't

• Don't round corners — zero radius is the BMW identity
• Don't use BMW Blue for backgrounds or large surfaces — it's an accent only
• Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes
• Don't add decorative elements — the photography and typography carry everything
• Don't use relaxed line-heights — BMW text is always compressed
• Don't lighten the dark hero sections — the contrast with white IS the design

8. Responsive Behavior

Breakpoints

Collapsing Strategy

• Hero: 60px → scales down, maintains uppercase
• Navigation: horizontal → hamburger
• Photography: full-bleed maintained at all sizes
• Content sections: stack vertically
• Footer: multi-column → stacked

9. Agent Prompt Guide

Quick Color Reference

• Background: Pure White (#ffffff)
• Text: Near Black (#262626)
• Secondary text: Meta Gray (#757575)
• Accent: BMW Blue (#1c69d4)
• Focus: BMW Focus Blue (#0653b6)
• Muted: Silver (#bbbbbb)

Example Component Prompts

• "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
• "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
• "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
• "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."

Iteration Guide

1. Zero border-radius — every corner is sharp, no exceptions 2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav) 3. BMW Blue for interactive only — never as background or decoration 4. Photography carries emotion — the UI is pure precision 5. Tight line-heights everywhere — 1.15 to 1.30 is the range

Design System: Cal.com

1. Visual Theme & Atmosphere

Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (#242424), mid-gray secondary text (#898989), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.

Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.

The elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (0px 0px 0px 1px), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.

Key Characteristics:

• Purely grayscale brand palette — no brand colors, boldness through monochrome
• Cal Sans custom geometric display font with extremely tight default letter-spacing
• Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
• Cal Sans for headings, Inter for body — clean typographic division
• Wide border-radius scale from 2px to 9999px (pill) — versatile rounding
• White canvas with near-black (#242424) text — maximum contrast, zero decoration
• Product screenshots as primary visual content — the scheduling UI sells itself
• Built on Framer platform

2. Color Palette & Roles

Primary

• Charcoal (#242424): Primary heading and button text — Cal.com's signature near-black, warmer than pure black
• Midnight (#111111): Deepest text/overlay color — used at 50% opacity for subtle overlays
• White (#ffffff): Primary background and surface — the dominant canvas

Secondary & Accent

• Link Blue (#0099ff): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
• Focus Ring (#3b82f6 at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction
• Default Link (#0000ee): Browser-default link color on some elements — unmodified, signaling openness

Surface & Background

• Pure White (#ffffff): Primary page background and card surfaces
• Light Gray (approx #f5f5f5): Subtle section differentiation — barely visible tint
• Mid Gray (#898989): Secondary text, descriptions, and muted labels

Neutrals & Text

• Charcoal (#242424): Headlines, buttons, primary UI text
• Midnight (#111111): Deep black for high-contrast links and nav text
• Mid Gray (#898989): Descriptions, secondary labels, muted content
• Pure Black (#000000): Certain link text elements
• Border Gray (approx rgba(34, 42, 53, 0.08–0.10)): Shadow-based borders using ring shadows instead of CSS borders

Semantic & Accent

• Cal.com is deliberately colorless for brand elements — "a grayscale brand to emphasise on boldness and professionalism"
• Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome
• The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral

Gradient System

• No gradients on the marketing site — the design is fully flat and monochrome
• Depth is achieved entirely through shadows, not color transitions

3. Typography Rules

Font Family

• Display: Cal Sans — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)
• Body: Inter — "rock-solid" standard body font. Fallback: Inter Placeholder
• UI Light: Cal Sans UI Variable Light — light-weight variant (300) for softer UI text with -0.2px letter-spacing
• UI Medium: Cal Sans UI Medium — medium-weight variant (500) for emphasized captions
• Mono: Roboto Mono — for code blocks and technical content
• Tertiary: Matter Regular / Matter SemiBold / Matter Medium — additional body fonts for specific contexts

Hierarchy

Principles

• Cal Sans at large, Inter at small: Cal Sans is exclusively for headings and display — never for body text. The system enforces this division strictly
• Tight by default, space when small: Cal Sans letters are "intentionally spaced to be extremely close" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming
• Weight 300 body variant: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines
• Weight 600 dominance: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight
• Negative tracking on light text: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms

4. Component Stylings

Buttons

• Dark Primary: #242424 (or #1e1f23) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
• White/Ghost: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
• Pill: 9999px radius for rounded pill-shaped actions and badges
• Compact: 4px padding, small text — utility actions within product UI
• Inset highlight: Some buttons feature rgba(255, 255, 255, 0.15) 0px 2px 0px inset — a subtle inner-top highlight creating a 3D pressed effect

Cards & Containers

• Shadow Card: White background, multi-layered shadow — rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px. The ring shadow (0px 0px 0px 1px) acts as a shadow-border
• Product UI Cards: Screenshots of the scheduling interface displayed in card containers with shadow elevation
• Radius: 8px for standard cards, 12px for larger containers, 16px for prominent sections
• Hover: Likely subtle shadow deepening or scale transform

Inputs & Forms

• Select dropdown: White background, #000000 text, 1px solid rgb(118, 118, 118) border
• Focus: Uses Framer's focus outline system (--framer-focus-outline)
• Text input: 8px radius, standard border treatment
• Minimal form presence: The marketing site prioritizes CTA buttons over complex forms

Navigation

• Top nav: White/transparent background, Cal Sans links at near-black
• Nav text: #111111 (Midnight) for primary links, #000000 for emphasis
• CTA button: Dark Primary in the nav — high contrast call-to-action
• Mobile: Collapses to hamburger with simplified navigation
• Sticky: Fixed on scroll

Image Treatment

• Product screenshots: Large scheduling UI screenshots — the product is the primary visual
• Trust logos: Grayscale company logos in a horizontal trust bar
• Aspect ratios: Wide landscape for product UI screenshots
• No decorative imagery: No illustrations, photos, or abstract graphics — pure product + typography

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
• Section padding: 80px–96px vertical between major sections (generous)
• Card padding: 12px–24px internal
• Component gaps: 4px–8px between related elements
• Notable jump: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier

Grid & Container

• Max width: ~1200px content container, centered
• Column patterns: Full-width hero, centered text blocks, 2-3 column feature grids
• Feature showcase: Product screenshots flanked by description text
• Breakpoints: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated

Whitespace Philosophy

• Lavish section spacing: 80px–96px between sections creates a breathable, premium feel
• Product-first content: Screenshots dominate the visual space — minimal surrounding decoration
• Centered headlines: Cal Sans headings centered with generous margins above and below

Border Radius Scale

• 2px: Subtle rounding on inline elements
• 4px: Small UI components
• 6px–7px: Buttons, small cards, images
• 8px: Standard interactive elements — buttons, inputs, images
• 12px: Medium containers — links, larger cards, images
• 16px: Large section containers
• 29px: Special rounded elements
• 100px: Large rounding — nearly circular on small elements
• 1000px: Very large rounding
• 9999px: Full pill shape — badges, links

6. Depth & Elevation

Shadow Philosophy

Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:

• Ring borders: 0px 0px 0px 1px shadows act as borders, avoiding CSS border entirely. This creates hairline containment without affecting layout
• Diffused soft shadows: 0px 4px 8px at 5% opacity add gentle ambient depth
• Sharp contact shadows: 0px 1px 5px -4px at 70% opacity create tight bottom-edge shadows for grounding
• Inset highlights: White inset shadows at the top of buttons create a subtle 3D bevel
• Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together

Decorative Depth

• No gradients or glow effects
• All depth comes from the sophisticated shadow compositing system
• The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table

7. Do's and Don'ts

Do

• Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing
• Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it
• Maintain the grayscale palette — boldness comes from contrast, not color
• Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow
• Keep backgrounds pure white — the monochrome philosophy requires a clean canvas
• Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality
• Let product screenshots be the visual content — no illustrations, no decorative graphics
• Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel

Don't

• Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading
• Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only
• Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach
• Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px
• Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges
• Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only
• Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character
• Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 8px radius with comfortable padding (10px+ vertical)
• Nav links: Dark text with adequate spacing
• Mobile CTAs: Full-width dark buttons for easy thumb access
• Pill badges: 9999px radius creates large, tappable targets

Collapsing Strategy

• Navigation: Full horizontal nav → hamburger on mobile
• Hero: 64px Cal Sans display → ~36px on mobile
• Feature grids: Multi-column → 2-column → single stacked column
• Product screenshots: Scale within containers, maintaining aspect ratios
• Section spacing: Reduces from 80px–96px to ~48px on mobile

Image Behavior

• Product screenshots scale responsively
• Trust logos reflow to multi-row grid on mobile
• No art direction changes — same compositions at all sizes
• Images use 7px–12px border-radius for consistent rounded corners

9. Agent Prompt Guide

Quick Color Reference

• Primary Text: Charcoal (#242424)
• Deep Text: Midnight (#111111)
• Secondary Text: Mid Gray (#898989)
• Background: Pure White (#ffffff)
• Link: Link Blue (#0099ff)
• CTA Button: Charcoal (#242424) bg, white text
• Shadow Border: rgba(34, 42, 53, 0.08) ring

Example Component Prompts

• "Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)"
• "Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius"
• "Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning"
• "Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background"
• "Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow"

Iteration Guide

When refining existing screens generated with this design system: 1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them 2. Check that the palette is purely grayscale — if you see brand colors, remove them 3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders 4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space 5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes

Design System: Claude (Anthropic)

1. Visual Theme & Atmosphere

Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (#f5f4ed) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.

The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (#c96442), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.

What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (#5e5d59, #87867f, #4d4c48) — there are no cool blue-grays anywhere. Borders are cream-tinted (#f0eee6, #e8e6dc), shadows use warm transparent blacks, and even the darkest surfaces (#141413, #30302e) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.

Key Characteristics:

• Warm parchment canvas (#f5f4ed) evoking premium paper, not screens
• Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
• Terracotta brand accent (#c96442) — warm, earthy, deliberately un-tech
• Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
• Organic, editorial illustrations replacing typical tech iconography
• Ring-based shadow system (0px 0px 0px 1px) creating border-like depth without visible borders
• Magazine-like pacing with generous section spacing and serif-driven hierarchy

2. Color Palette & Roles

Primary

• Anthropic Near Black (#141413): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.
• Terracotta Brand (#c96442): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.
• Coral Accent (#d97757): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.

Secondary & Accent

• Error Crimson (#b53333): A deep, warm red for error states — serious without being alarming.
• Focus Blue (#3898ec): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.

Surface & Background

• Parchment (#f5f4ed): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.
• Ivory (#faf9f5): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.
• Pure White (#ffffff): Reserved for specific button surfaces and maximum-contrast elements.
• Warm Sand (#e8e6dc): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.
• Dark Surface (#30302e): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.
• Deep Dark (#141413): Dark-theme page background and primary dark surface.

Neutrals & Text

• Charcoal Warm (#4d4c48): Button text on light warm surfaces — the go-to dark-on-light text.
• Olive Gray (#5e5d59): Secondary body text — a distinctly warm medium-dark gray.
• Stone Gray (#87867f): Tertiary text, footnotes, and de-emphasized metadata.
• Dark Warm (#3d3d3a): Dark text links and emphasized secondary text.
• Warm Silver (#b0aea5): Text on dark surfaces — a warm, parchment-tinted light gray.

Semantic & Accent

• Border Cream (#f0eee6): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.
• Border Warm (#e8e6dc): Prominent borders, section dividers, and emphasized containment on light surfaces.
• Border Dark (#30302e): Standard border on dark surfaces — maintains the warm tone.
• Ring Warm (#d1cfc5): Shadow ring color for button hover/focus states.
• Ring Subtle (#dedc01): Secondary ring variant for lighter interactive surfaces.
• Ring Deep (#c2c0b6): Deeper ring for active/pressed states.

Gradient System

• Claude's design is gradient-free in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a "gradient" effect as the eye moves through cream → sand → stone → charcoal → black sections.

3. Typography Rules

Font Family

• Headline: Anthropic Serif, with fallback: Georgia
• Body / UI: Anthropic Sans, with fallback: Arial
• Code: Anthropic Mono, with fallback: Arial

Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.

Hierarchy

Principles

• Serif for authority, sans for utility: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.
• Single weight for serifs: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent "voice" across all headline sizes, as if the same author wrote every heading.
• Relaxed body line-height: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.
• Tight-but-not-compressed headings: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.
• Micro letter-spacing on labels: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.

4. Component Stylings

Buttons

Warm Sand (Secondary)

• Background: Warm Sand (#e8e6dc)
• Text: Charcoal Warm (#4d4c48)
• Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
• Radius: comfortably rounded (8px)
• Shadow: ring-based (#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px)
• The workhorse button — warm, unassuming, clearly interactive

White Surface

• Background: Pure White (#ffffff)
• Text: Anthropic Near Black (#141413)
• Padding: 8px 16px 8px 12px
• Radius: generously rounded (12px)
• Hover: shifts to secondary background color
• Clean, elevated button for light surfaces

Dark Charcoal

• Background: Dark Surface (#30302e)
• Text: Ivory (#faf9f5)
• Padding: 0px 12px 0px 8px
• Radius: comfortably rounded (8px)
• Shadow: ring-based (#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px)
• The inverted variant for dark-on-light emphasis

Brand Terracotta

• Background: Terracotta Brand (#c96442)
• Text: Ivory (#faf9f5)
• Radius: 8–12px
• Shadow: ring-based (#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px)
• The primary CTA — the only button with chromatic color

Dark Primary

• Background: Anthropic Near Black (#141413)
• Text: Warm Silver (#b0aea5)
• Padding: 9.6px 16.8px
• Radius: generously rounded (12px)
• Border: thin solid Dark Surface (1px solid #30302e)
• Used on dark theme surfaces

Cards & Containers

• Background: Ivory (#faf9f5) or Pure White (#ffffff) on light surfaces; Dark Surface (#30302e) on dark
• Border: thin solid Border Cream (1px solid #f0eee6) on light; 1px solid #30302e on dark
• Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media
• Shadow: whisper-soft (rgba(0,0,0,0.05) 0px 4px 24px) for elevated content
• Ring shadow: 0px 0px 0px 1px patterns for interactive card states
• Section borders: 1px 0px 0px (top-only) for list item separators

Inputs & Forms

• Text: Anthropic Near Black (#141413)
• Padding: 1.6px 12px (very compact vertical)
• Border: standard warm borders
• Focus: ring with Focus Blue (#3898ec) border-color — the only cool color moment
• Radius: generously rounded (12px)

Navigation

• Sticky top nav with warm background
• Logo: Claude wordmark in Anthropic Near Black
• Links: mix of Near Black (#141413), Olive Gray (#5e5d59), and Dark Warm (#3d3d3a)
• Nav border: 1px solid #30302e (dark) or 1px solid #f0eee6 (light)
• CTA: Terracotta Brand button or White Surface button
• Hover: text shifts to foreground-primary, no decoration

Image Treatment

• Product screenshots showing the Claude chat interface
• Generous border-radius on media (16–32px)
• Embedded video players with rounded corners
• Dark UI screenshots provide contrast against warm light canvas
• Organic, hand-drawn illustrations for conceptual sections

Distinctive Components

Model Comparison Cards

• Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
• Each model gets a bordered card with name, description, and capability badges
• Border Warm (#e8e6dc) separation between items

Organic Illustrations

• Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
• Abstract, conceptual rather than literal product diagrams
• The primary visual personality — no other AI company uses this style

Dark/Light Section Alternation

• The page alternates between Parchment light and Near Black dark sections
• Creates a reading rhythm like chapters in a book
• Each section feels like a distinct environment

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
• Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
• Card internal padding: approximately 24–32px
• Section vertical spacing: generous (estimated 80–120px between major sections)

Grid & Container

• Max container width: approximately 1200px, centered
• Hero: centered with editorial layout
• Feature sections: single-column or 2–3 column card grids
• Model comparison: clean 3-column grid
• Full-width dark sections breaking the container for emphasis

Whitespace Philosophy

• Editorial pacing: Each section breathes like a magazine spread — generous top/bottom margins create natural reading pauses.
• Serif-driven rhythm: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.
• Content island approach: Sections alternate between light and dark environments, creating distinct "rooms" for each message.

Border Radius Scale

• Sharp (4px): Minimal inline elements
• Subtly rounded (6–7.5px): Small buttons, secondary interactive elements
• Comfortably rounded (8–8.5px): Standard buttons, cards, containers
• Generously rounded (12px): Primary buttons, input fields, nav elements
• Very rounded (16px): Featured containers, video players, tab lists
• Highly rounded (24px): Tag-like elements, highlighted containers
• Maximum rounded (32px): Hero containers, embedded media, large cards

6. Depth & Elevation

Shadow Philosophy: Claude communicates depth through warm-toned ring shadows rather than traditional drop shadows. The signature 0px 0px 0px 1px pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.

Decorative Depth

• Light/Dark alternation: The most dramatic depth effect comes from alternating between Parchment (#f5f4ed) and Near Black (#141413) sections — entire sections shift elevation by changing the ambient light level.
• Warm ring halos: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.

7. Do's and Don'ts

Do

• Use Parchment (#f5f4ed) as the primary light background — the warm cream tone IS the Claude personality
• Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional
• Use Terracotta Brand (#c96442) only for primary CTAs and the highest-signal brand moments
• Keep all neutrals warm-toned — every gray should have a yellow-brown undertone
• Use ring shadows (0px 0px 0px 1px) for interactive element states instead of drop shadows
• Maintain the editorial serif/sans hierarchy — serif for content headlines, sans for UI
• Use generous body line-height (1.60) for a literary reading experience
• Alternate between light and dark sections to create chapter-like page rhythm
• Apply generous border-radius (12–32px) for a soft, approachable feel

Don't

• Don't use cool blue-grays anywhere — the palette is exclusively warm-toned
• Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs
• Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted
• Don't use sharp corners (< 6px radius) on buttons or cards — softness is core to the identity
• Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts
• Don't use pure white (#ffffff) as a page background — Parchment (#f5f4ed) or Ivory (#faf9f5) are always warmer
• Don't use geometric/tech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling
• Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality
• Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code
• Don't mix in sans-serif for headlines — the serif/sans split is the typographic identity

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons use generous padding (8–16px vertical minimum)
• Navigation links adequately spaced for thumb navigation
• Card surfaces serve as large touch targets
• Minimum recommended: 44x44px

Collapsing Strategy

• Navigation: Full horizontal nav collapses to hamburger on mobile
• Feature sections: Multi-column → stacked single column
• Hero text: 64px → 36px → ~25px progressive scaling
• Model cards: 3-column → stacked vertical
• Section padding: Reduces proportionally but maintains editorial rhythm
• Illustrations: Scale proportionally, maintain aspect ratios

Image Behavior

• Product screenshots scale proportionally within rounded containers
• Illustrations maintain quality at all sizes
• Video embeds maintain 16:9 aspect ratio with rounded corners
• No art direction changes between breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Brand CTA: "Terracotta Brand (#c96442)"
• Page Background: "Parchment (#f5f4ed)"
• Card Surface: "Ivory (#faf9f5)"
• Primary Text: "Anthropic Near Black (#141413)"
• Secondary Text: "Olive Gray (#5e5d59)"
• Tertiary Text: "Stone Gray (#87867f)"
• Borders (light): "Border Cream (#f0eee6)"
• Dark Surface: "Dark Surface (#30302e)"

Example Component Prompts

• "Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius."
• "Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px)."
• "Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e)."
• "Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px."
• "Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans."

Iteration Guide

1. Focus on ONE component at a time 2. Reference specific color names — "use Olive Gray (#5e5d59)" not "make it gray" 3. Always specify warm-toned variants — no cool grays 4. Describe serif vs sans usage explicitly — "Anthropic Serif for the heading, Anthropic Sans for the label" 5. For shadows, use "ring shadow (0px 0px 0px 1px)" or "whisper shadow" — never generic "drop shadow" 6. Specify the warm background — "on Parchment (#f5f4ed)" or "on Near Black (#141413)" 7. Keep illustrations organic and conceptual — describe "hand-drawn-feeling" style

Design System: Clay

1. Visual Theme & Atmosphere

Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (#faf9f7) and oat-toned borders (#dad4c8, #eee9df) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.

The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets ("ss01", "ss03", "ss10", "ss11", "ss12") that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.

What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (rotateZ(-8deg)), translate upward (translateY(-80%)), change background to a contrasting swatch color, and cast a hard offset shadow (rgb(0,0,0) -7px 7px). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.

Key Characteristics:

• Warm cream canvas (#faf9f7) with oat-toned borders (#dad4c8) — artisanal, not clinical
• Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
• Roobert font with 5 OpenType stylistic sets — quirky geometric character
• Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
• Space Mono for code and technical labels
• Generous border radius: 24px cards, 40px sections, 1584px pills
• Mixed border styles: solid + dashed in the same interface
• Multi-layer shadow with inset highlight: 0px 1px 1px + -1px inset + -0.5px

2. Color Palette & Roles

Primary

• Clay Black (#000000): Text, headings, pricing card text, --_theme--pricing-cards---text
• Pure White (#ffffff): Card backgrounds, button backgrounds, inverse text
• Warm Cream (#faf9f7): Page background — the warm, paper-like canvas

Swatch Palette — Named Colors

Matcha (Green)

• Matcha 300 (#84e7a5): --_swatches---color--matcha-300, light green accent
• Matcha 600 (#078a52): --_swatches---color--matcha-600, mid green
• Matcha 800 (#02492a): --_swatches---color--matcha-800, deep green for dark sections

Slushie (Cyan)

• Slushie 500 (#3bd3fd): --_swatches---color--slushie-500, bright cyan accent
• Slushie 800 (#0089ad): --_swatches---color--slushie-800, deep teal

Lemon (Gold)

• Lemon 400 (#f8cc65): --_swatches---color--lemon-400, warm pale gold
• Lemon 500 (#fbbd41): --_swatches---color--lemon-500, primary gold
• Lemon 700 (#d08a11): --_swatches---color--lemon-700, deep amber
• Lemon 800 (#9d6a09): --_swatches---color--lemon-800, dark amber

Ube (Purple)

• Ube 300 (#c1b0ff): --_swatches---color--ube-300, soft lavender
• Ube 800 (#43089f): --_swatches---color--ube-800, deep purple
• Ube 900 (#32037d): --_swatches---color--ube-900, darkest purple

Pomegranate (Pink/Red)

• Pomegranate 400 (#fc7981): --_swatches---color--pomegranate-400, warm coral-pink

Blueberry (Navy Blue)

• Blueberry 800 (#01418d): --_swatches---color--blueberry-800, deep navy

Neutral Scale (Warm)

• Warm Silver (#9f9b93): Secondary/muted text, footer links
• Warm Charcoal (#55534e): Tertiary text, dark muted links
• Dark Charcoal (#333333): Link text on light backgrounds

Surface & Border

• Oat Border (#dad4c8): Primary border — warm, cream-toned structural lines
• Oat Light (#eee9df): Secondary lighter border
• Cool Border (#e6e8ec): Cool-toned border for contrast sections
• Dark Border (#525a69): Border on dark sections
• Light Frost (#eff1f3): Subtle button background (at 0% opacity on hover)

Badges

• Badge Blue Bg (#f0f8ff): Blue-tinted badge surface
• Badge Blue Text (#3859f9): Vivid blue badge text
• Focus Ring (rgb(20, 110, 245) solid 2px): Accessibility focus indicator

Shadows

• Clay Shadow (rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px): Multi-layer with inset highlight — the signature
• Hard Offset (rgb(0,0,0) -7px 7px): Hover state — playful hard shadow

3. Typography Rules

Font Families

• Primary: Roobert, fallback: Arial
• Monospace: Space Mono
• OpenType Features: "ss01", "ss03", "ss10", "ss11", "ss12" on all Roobert text (display uses all 5; body/UI uses "ss03", "ss10", "ss11", "ss12")

Hierarchy

Principles

• Five stylistic sets as identity: The combination of "ss01", "ss03", "ss10", "ss11", "ss12" on Roobert creates a distinctive typographic personality. ss01 is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
• Aggressive display compression: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
• Weight 600 for headings, 500 for UI, 400 for body: Clean three-tier system where each weight has a strict role.
• Uppercase labels with positive tracking: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.

4. Component Stylings

Buttons

Primary (Transparent with Hover Animation)

• Background: transparent (rgba(239, 241, 243, 0))
• Text: #000000
• Padding: 6.4px 12.8px
• Border: none (or 1px solid #717989 for outlined variant)
• Hover: background shifts to swatch color (e.g., #434346), text to white, rotateZ(-8deg), translateY(-80%), hard shadow rgb(0,0,0) -7px 7px
• Focus: rgb(20, 110, 245) solid 2px outline

White Solid

• Background: #ffffff
• Text: #000000
• Padding: 6.4px
• Hover: oat-200 swatch color, animated rotation + shadow
• Use: Primary CTA on colored sections

Ghost Outlined

• Background: transparent
• Text: #000000
• Padding: 8px
• Border: 1px solid #717989
• Radius: 4px
• Hover: dragonfruit swatch color, white text, animated rotation

Cards & Containers

• Background: #ffffff on cream canvas
• Border: 1px solid #dad4c8 (warm oat) or 1px dashed #dad4c8
• Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
• Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px
• Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)

Inputs & Forms

• Text: #000000
• Border: 1px solid #717989
• Radius: 4px
• Focus: rgb(20, 110, 245) solid 2px outline

Navigation

• Sticky top nav on cream background
• Roobert 15px weight 500 for nav links
• Clay logo left-aligned
• CTA buttons right-aligned with pill radius
• Border bottom: 1px solid #dad4c8
• Mobile: hamburger collapse at 767px

Image Treatment

• Product screenshots in white cards with oat borders
• Colorful illustrated sections with swatch background colors
• 8px–24px radius on images
• Full-width colorful section backgrounds

Distinctive Components

Swatch Color Sections

• Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
• White text on dark swatches, black text on light swatches
• Each section tells a distinct product story through its color

Playful Hover Buttons

• Rotate -8deg + translate upward on hover
• Hard offset shadow (-7px 7px) instead of soft blur
• Background transitions to contrasting swatch color
• Creates a physical, toy-like interaction quality

Dashed Border Elements

• Dashed borders (1px dashed #dad4c8) alongside solid borders
• Used for secondary containers and decorative elements
• Adds a hand-drawn, craft-like quality

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px

Grid & Container

• Max content width centered
• Feature sections alternate between white cards and colorful swatch backgrounds
• Card grids: 2–3 columns on desktop
• Full-width colorful sections break the grid
• Footer with generous 40px radius container

Whitespace Philosophy

• Warm, generous breathing: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
• Color as spatial rhythm: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
• Craft-like density inside cards: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.

Border Radius Scale

• Sharp (4px): Ghost buttons, inputs
• Standard (8px): Small cards, images, links
• Badge (11px): Tag badges
• Card (12px): Standard cards, buttons
• Feature (24px): Feature cards, images, panels
• Section (40px): Large sections, footer, containers
• Pill (1584px): CTAs, pill-shaped buttons

6. Depth & Elevation

Shadow Philosophy: Clay's shadow system is uniquely three-layered: a downward cast (0px 1px 1px), an upward inset highlight (0px -1px 1px inset), and a subtle edge (0px -0.5px 1px). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (-7px 7px) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.

Decorative Depth

• Full-width swatch-colored sections create dramatic depth through color contrast
• Dashed borders add visual texture alongside solid borders
• Product illustrations with warm, organic art style

7. Do's and Don'ts

Do

• Use warm cream (#faf9f7) as the page background — the warmth is the identity
• Apply all 5 OpenType stylistic sets on Roobert headings: "ss01", "ss03", "ss10", "ss11", "ss12"
• Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
• Apply the playful hover animation: rotateZ(-8deg), translateY(-80%), hard shadow -7px 7px
• Use warm oat borders (#dad4c8) — not neutral gray
• Mix solid and dashed borders for visual variety
• Use generous radius: 24px for cards, 40px for sections
• Use weight 600 exclusively for headings, 500 for UI, 400 for body

Don't

• Don't use cool gray backgrounds — the warm cream (#faf9f7) is non-negotiable
• Don't use neutral gray borders (#ccc, #ddd) — always use the warm oat tones
• Don't mix more than 2 swatch colors in the same section
• Don't skip the OpenType stylistic sets — they define Roobert's character
• Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
• Don't use small border radius (<12px) on feature cards — the generous rounding is structural
• Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
• Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 6.4px + 12.8px padding for adequate touch area
• Nav links: 15px font with generous spacing
• Mobile: full-width buttons for easy tapping

Collapsing Strategy

• Hero: 80px → 60px → smaller display text
• Navigation: horizontal → hamburger at 767px
• Feature sections: multi-column → stacked
• Colorful sections: maintain full-width but compress padding
• Card grids: 3-column → 2-column → single column

Image Behavior

• Product screenshots scale proportionally
• Colorful section illustrations adapt to viewport width
• Rounded corners maintained across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Background: Warm Cream (#faf9f7)
• Text: Clay Black (#000000)
• Secondary text: Warm Silver (#9f9b93)
• Border: Oat Border (#dad4c8)
• Green accent: Matcha 600 (#078a52)
• Cyan accent: Slushie 500 (#3bd3fd)
• Gold accent: Lemon 500 (#fbbd41)
• Purple accent: Ube 800 (#43089f)
• Pink accent: Pomegranate 400 (#fc7981)

Example Component Prompts

• "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
• "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
• "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
• "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
• "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."

Iteration Guide

1. Start with warm cream (#faf9f7) — never cool white 2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube 3. Oat borders (#dad4c8) everywhere — dashed variants for decoration 4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert 5. Hover animations are the signature — rotation + hard shadow, not subtle fades 6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate 7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles

Design System: ClickHouse

1. Visual Theme & Atmosphere

ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (#000000) with dark charcoal cards (#414141 borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (#faff69) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.

The typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.

What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (#faff69 on #000000) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (#166534) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.

Key Characteristics:

• Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast
• Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
• Dark charcoal card system with #414141 borders at 80% opacity
• Forest green (#166534) secondary CTA buttons
• Performance stats as oversized display numbers
• Uppercase labels with wide letter-spacing (1.4px) for navigation structure
• Active/pressed state shifts text to pale yellow (#f4f692)
• All links hover to neon yellow-green — unified interactive signal
• Inset shadows on select elements creating "pressed into the surface" depth

2. Color Palette & Roles

Primary

• Neon Volt (#faff69): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
• Forest Green (#166534): Secondary CTA color — a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
• Dark Forest (#14572f): A darker green variant for borders and secondary accents.

Secondary & Accent

• Pale Yellow (#f4f692): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.
• Border Olive (#4f5100): A dark olive-yellow for ghost button borders — the neon's muted sibling.
• Olive Dark (#161600): The darkest neon-tinted color for subtle brand text.

Surface & Background

• Pure Black (#000000): The primary page background — absolute black for maximum contrast.
• Near Black (#141414): Button backgrounds and slightly elevated dark surfaces.
• Charcoal (#414141): The primary border color at 80% opacity — the workhorse for card and container containment.
• Deep Charcoal (#343434): Darker border variant for subtle division lines.
• Hover Gray (#3a3a3a): Button hover state background — slightly lighter than Near Black.

Neutrals & Text

• Pure White (#ffffff): Primary text on dark surfaces.
• Silver (#a0a0a0): Secondary body text and muted content.
• Mid Gray (#585858 at 28%): Subtle gray overlay for depth effects.
• Border Gray (#e5e7eb): Light border variant (used in rare light contexts).

Gradient System

• None in the traditional sense. ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.

3. Typography Rules

Font Family

• Primary: Inter (Next.js optimized variant __Inter_d1b8ee)
• Secondary Display: Basier (__basier_a58b65), with fallbacks: Arial, Helvetica
• Code: Inconsolata (__Inconsolata_a25f62)

Hierarchy

Principles

• Weight 900 is the weapon: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
• Full weight spectrum: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.
• Uppercase with maximum tracking: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.
• Dual sans-serif: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.

4. Component Stylings

Buttons

Neon Primary

• Background: Neon Volt (#faff69)
• Text: Near Black (#151515)
• Padding: 0px 16px
• Radius: sharp (4px)
• Border: 1px solid #faff69
• Hover: background shifts to dark (rgb(29, 29, 29)), text stays
• Active: text shifts to Pale Yellow (#f4f692)
• The eye-catching CTA — neon on black

Dark Solid

• Background: Near Black (#141414)
• Text: Pure White (#ffffff)
• Padding: 12px 16px
• Radius: 4px or 8px
• Border: 1px solid #141414
• Hover: bg shifts to Hover Gray (#3a3a3a), text to 80% opacity
• Active: text to Pale Yellow
• The standard action button

Forest Green

• Background: Forest Green (#166534)
• Text: Pure White (#ffffff)
• Padding: 12px 16px
• Border: 1px solid #141414
• Hover: same dark shift
• Active: Pale Yellow text
• The "Get Started" / primary conversion button

Ghost / Outlined

• Background: transparent
• Text: Pure White (#ffffff)
• Padding: 0px 32px
• Radius: 4px
• Border: 1px solid #4f5100 (olive-tinted)
• Hover: dark bg shift
• Active: Pale Yellow text
• Secondary actions with neon-tinted border

Pill Toggle

• Background: transparent
• Radius: pill (9999px)
• Used for toggle/switch elements

Cards & Containers

• Background: transparent or Near Black
• Border: 1px solid rgba(65, 65, 65, 0.8) — the signature charcoal containment
• Radius: 4px (small elements) or 8px (cards, containers)
• Shadow Level 1: subtle (rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px)
• Shadow Level 2: medium (rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px)
• Shadow Level 3: inset (rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset) — the "pressed" effect
• Neon-highlighted cards: selected/active cards get neon yellow-green border or accent

Navigation

• Dark nav on black background
• Logo: ClickHouse wordmark + icon in yellow/neon
• Links: white text, hover to Neon Volt (#faff69)
• CTA: Neon Volt button or Forest Green button
• Uppercase labels for categories

Distinctive Components

Performance Stats

• Oversized numbers (72px+, weight 700–900)
• Brief descriptions beneath
• High-contrast neon accents on key metrics
• The primary visual proof of performance claims

Neon-Highlighted Card

• Standard dark card with neon yellow-green border highlight
• Creates "selected" or "featured" treatment
• The accent border makes the card pop against the dark canvas

Code Blocks

• Dark surface with Inconsolata at weight 600
• Neon and white syntax highlighting
• Terminal-like aesthetic

Trust Bar

• Company logos on dark background
• Monochrome/white logo treatment
• Horizontal layout

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
• Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
• Section vertical spacing: generous (48–64px)

Grid & Container

• Max container width: up to 2200px (extra-wide) with responsive scaling
• Hero: full-width dark with massive typography
• Feature sections: multi-column card grids with dark borders
• Stats: horizontal metric bar
• Full-dark page — no light sections

Whitespace Philosophy

• Dark void as canvas: The pure black background provides infinite depth — elements float in darkness.
• Dense information: Feature cards and stats are packed with data, reflecting the database product's performance focus.
• Neon highlights as wayfinding: Yellow-green accents guide the eye through the dark interface like runway lights.

Border Radius Scale

• Sharp (4px): Buttons, badges, small elements, code blocks
• Comfortable (8px): Cards, containers, dividers
• Pill (9999px): Toggle buttons, status indicators

6. Depth & Elevation

Shadow Philosophy: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the inset shadow (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.

7. Do's and Don'ts

Do

• Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black
• Use Inter at weight 900 for hero display text — the extreme weight IS the personality
• Keep everything on pure black (#000000) — never use dark gray as the page background
• Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
• Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy
• Show performance stats as oversized display numbers — it's the core visual argument
• Use uppercase with wide letter-spacing (1.4px) for section labels
• Apply Pale Yellow (#f4f692) for active/pressed text states
• Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback

Don't

• Don't introduce additional colors — the palette is strictly black, neon, green, and gray
• Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)
• Don't reduce display weight below 700 — heavy weight is core to the personality
• Don't use light/white backgrounds anywhere — the entire experience is dark
• Don't round corners beyond 8px — the sharp geometry reflects database precision
• Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead
• Don't skip the inset shadow on active states — the "pressed" effect is distinctive
• Don't use warm neutrals — all grays are perfectly neutral

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons with 12px 16px padding minimum
• Card surfaces as touch targets
• Adequate nav link spacing

Collapsing Strategy

• Hero text: 96px → 72px → 48px → 36px
• Feature grids: Multi-column → 2 → 1 column
• Stats: Horizontal → stacked
• Navigation: Full → hamburger

Image Behavior

• Product screenshots maintain aspect ratio
• Code blocks use horizontal scroll on narrow screens
• All images on dark backgrounds

9. Agent Prompt Guide

Quick Color Reference

• Brand Accent: "Neon Volt (#faff69)"
• Page Background: "Pure Black (#000000)"
• CTA Green: "Forest Green (#166534)"
• Card Border: "Charcoal (rgba(65,65,65,0.8))"
• Primary Text: "Pure White (#ffffff)"
• Secondary Text: "Silver (#a0a0a0)"
• Active State: "Pale Yellow (#f4f692)"
• Button Surface: "Near Black (#141414)"

Example Component Prompts

• "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
• "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
• "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
• "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
• "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."

Iteration Guide

1. Keep everything on pure black — no dark gray alternatives 2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds 3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body 4. Active states use Pale Yellow (#f4f692) — not just opacity changes 5. All links hover to Neon Volt — consistent interactive feedback 6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism