---
version: alpha
name: Cinematic Commerce
description: A dark stage, rim light, and one hero product before the title card.
colors:
  primary: "#F4F2ED"
  secondary: "#A6A7AA"
  tertiary: "#D7D9DC"
  background: "#090A0B"
  surface: "#15171A"
  onPrimary: "#18181B"
  onSecondary: "#F4F4F5"
  onTertiary: "#18181B"
  onBackground: "#FAFAF9"
  onSurface: "#FAFAF9"
  outline: "#303338"
  muted: "#95979B"
  success: "#75A887"
  warning: "#D0A45B"
  error: "#D76C68"
typography:
  h1:
    fontFamily: Geist
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.04em
  h2:
    fontFamily: Geist
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  h3:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  body:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  label:
    fontFamily: Geist
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  caption:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 28px
  full: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  hero:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  media:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.lg}"
  list-item:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.onSurface}"
    height: 44px
  footer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted}"
---

# Cinematic Commerce

## Overview

A dark stage, rim light, and one hero product before the title card. The atmosphere is gallery-airy, artsy and chaotic, with fluid CSS motion. Tone: cinematic, restrained, product-led. Density 2/10, variance 8/10, motion 6/10. Material: Near-black cinema stage, full-bleed product image, oversized light type, and one white capsule CTA. No dashboard cards or competing primary actions.

How to use: Place this file at the repository root. Tell Cursor / Claude Code / Codex: read DESIGN.md and obey its tokens and Do/Don'ts.

## Colors

Semantic roles for the dark theme. Keep a single accent; do not introduce a second brand hue.

- **primary** (`#F4F2ED`)
- **secondary** (`#A6A7AA`)
- **tertiary** (`#D7D9DC`)
- **background** (`#090A0B`)
- **surface** (`#15171A`)
- **outline** (`#303338`)
- **muted** (`#95979B`)
- **success** (`#75A887`)
- **warning** (`#D0A45B`)
- **error** (`#D76C68`)
- **onPrimary** (`#18181B`)
- **onSecondary** (`#F4F4F5`)
- **onTertiary** (`#18181B`)
- **onBackground** (`#FAFAF9`)
- **onSurface** (`#FAFAF9`)

## Typography

Hierarchy comes from weight and size, not from shouting. Body line length stays near 65 characters.

- **h1**: Geist 400 / 56px / 1.02 / -0.04em
- **h2**: Geist 400 / 36px / 1.2 / -0.02em
- **h3**: Geist 600 / 20px / 1.3 / -0.01em
- **body**: Geist 400 / 16px / 1.55 / 0em
- **label**: Geist 500 / 13px / 1.3 / 0.02em
- **caption**: Geist 400 / 12px / 1.4 / 0em
- **mono**: "JetBrains Mono" 500 / 13px / 1.45 / 0em

## Layout

Spacing scale: xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px.

iOS: 44pt targets, respect Safe Area and Dynamic Type, SF Symbols, Large Titles and grouped lists.

Web: mobile-first, single column below 768px, body ≥ 16px, clamp() headlines, max-width 1120–1400px, min-h-[100dvh] for full-height sections.

Every element occupies its own spatial zone. No overlapping hero text. Collapse multi-column layouts below 768px.

## Elevation & Depth

- sm: `0 1px 0 rgba(255,255,255,0.08)`
- md: `0 24px 70px rgba(0,0,0,0.38)`
- lg: `0 48px 120px rgba(0,0,0,0.56)`
- surface: `hairline`
- recipe: Near-black cinema stage, full-bleed product image, oversized light type, and one white capsule CTA. No dashboard cards or competing primary actions.

Tint shadows toward the background hue. High-density layouts may replace cards with hairline dividers.
Motion is wired: press, toggle, slider, and canvas theme use 520ms / cubic-bezier(0.22, 1, 0.36, 1), spring stiffness 100 / damping 20. Liquid/clay press is springy; brutal press eats the offset; neu press becomes inset.


## Shapes

Radius scale: sm=4px, md=8px, lg=16px, xl=28px, full=999px.

## Components

- **Hero** (`web.hero` / left / lg): Hero uses left layout, one CTA, no "Scroll to explore".
- **Media** (`media` / wide / lg): Geometric cover or local image, radius from tokens. No remote images.
- **List Item** (`list-item` / chevron / md): Min 44pt rows, title + subtitle, optional chevron.
- **Footer** (`web.footer` / default / md): Quiet footer with clear link groups.

## Do's and Don'ts

### Do
- Use semantic color tokens, never raw hex in components.
- Keep a single accent; hierarchy comes from type weight and space.
- Define default, hover, focus-visible, pressed, disabled, and loading states.
- Meet WCAG 2.2 AA contrast for body text and interactive labels.
- Touch targets are at least 44×44pt on iOS and 44px on web.
- Let one full-bleed product image own the composition.
- Use oversized light-weight type and one white capsule CTA.
- Keep secondary controls quiet enough to preserve the title-card rhythm.

### Don't
- Do not use Inter as the display face for premium work.
- Do not use pure black #000000 for large surfaces.
- Do not add neon outer glows or custom mouse cursors.
- Do not ship three equal feature cards as the default layout.
- Do not hide focus rings or drop below AA contrast.
- Do not turn the landing page into a dashboard card grid.
- Do not use colorful gradient CTAs or multiple primary actions.
- Do not place logos or third-party marks in the hero media.