--- version: alpha name: Withframes description: Apple-keynote minimalism in the dark — near-black canvas with off-white SF text, pastel multi-color gradients (lavender/sky/cyan) as the only chroma, pill buttons, and large compressed display type. A film-camera app site that borrows the macOS product-page grammar. colors: # Canvas + ink background: "#000000" surface: "#1d1d1f" surface-soft: "#2c2c2e" ink: "#f5f5f7" ink-pure: "#ffffff" # Secondary / muted text ink-secondary: "#86868b" ink-tertiary: "#6e6e73" ink-quaternary: "#48484a" # Borders / dividers border: "#424245" border-soft: "#2c2c2e" light-gray: "#d2d2d7" # Pastel gradient accents (the only chroma in the system) accent: "#bbb9f7" # lavender accent-violet: "#cfabf4" accent-pink: "#e793fa" accent-blue: "#87baf8" accent-sky: "#99d2fc" accent-cyan: "#56dfda" accent-teal: "#5ec5e5" # On-color on-primary: "#000000" on-ink: "#000000" # Overlay / glass overlay-dark: "#161617" # was rgba(22,22,23,.8) overlay-scrim: "#000000" # was rgba(0,0,0,.7) glass-stroke: "#3a3a3c" # was rgba(255,255,255,.24) over black typography: display-hero: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 96px fontWeight: 600 lineHeight: 1.05 letterSpacing: -2px display-large: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 80px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.5px section-heading: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.08 letterSpacing: -1px heading: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.5px sub-heading: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.5px card-title: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.25px body-large: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 21px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 19px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px button-large: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0px button-ui: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px eyebrow: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0px caption: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px 4xl: 96px 5xl: 160px rounded: none: 0px sm: 4px md: 10px lg: 16px xl: 20px 2xl: 28px pill: 9999px components: # Filled CTA — white pill on dark button-filled: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 0px 18px height: 38px button-filled-hover: backgroundColor: "{colors.ink-pure}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 0px 18px height: 38px # Outlined ghost pill button-outlined: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 0px 18px height: 38px borderColor: "{colors.light-gray}" button-outlined-hover: backgroundColor: "{colors.ink-pure}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 0px 18px height: 38px borderColor: "{colors.ink-pure}" # Small toolbar pill (top nav) button-small: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 0px 10px height: 22px # Top toolbar — translucent dark glass nav-bar: backgroundColor: "{colors.overlay-dark}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 12px 24px borderColor: "{colors.border-soft}" # Surface card — raised dark panel card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.border}" # Feature / media card with larger radius card-feature: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.2xl}" padding: 40px borderColor: "{colors.border}" # Pricing tier card card-pricing: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.xl}" padding: 32px borderColor: "{colors.border}" # Eyebrow label above feature titles eyebrow: textColor: "{colors.ink-secondary}" typography: "{typography.eyebrow}" # Muted body / supporting copy text-muted: textColor: "{colors.ink-secondary}" typography: "{typography.body}" --- # Withframes Design System ## Overview Withframes is a film-camera app whose marketing site speaks fluent Apple. The canvas is pure black (`{colors.background}`) with off-white text (`{colors.ink}`, #f5f5f7 — never pure white for reading), the exact dark-mode grammar of an apple.com product page. Type is the San Francisco system stack at large, tightly-tracked display sizes; chrome is monochrome; and the only chroma in the entire system arrives as soft pastel gradients — lavender, sky, cyan, pink — washing behind hero media and feature art. It is restraint as confidence: a small app presenting itself with keynote-grade calm. The system is almost entirely achromatic. A four-step gray ramp carries hierarchy — `{colors.ink}` for headings and primary copy, `{colors.ink-secondary}` (#86868b) for supporting text, `{colors.ink-tertiary}` for captions, and `{colors.border}` (#424245) for the hairline dividers between dark sections. Surfaces lift off the black canvas as near-black panels (`{colors.surface}`, #1d1d1f) rather than via shadow; depth comes from value steps, not elevation. This keeps the page feeling flat, glassy, and cinematic. Buttons are the tell. Everything is a pill (`{rounded.pill}`): a white filled pill for the primary CTA (white background, black label, brightening to pure white on hover) and a hairline-outlined ghost pill that inverts to solid white-on-black on hover. The top toolbar is a translucent dark-glass bar. Pastel gradients never touch the UI chrome — they live only in imagery and atmospheric backgrounds, exactly as Apple reserves color for product photography while keeping the interface monochrome. **Key Characteristics:** - Pure black canvas (`{colors.background}`) with off-white `{colors.ink}` (#f5f5f7) reading text — never pure white - San Francisco system font stack at large, negatively-tracked display sizes (up to 96px) - Pastel multi-color gradients (lavender/sky/cyan/pink) as the only chroma — atmospheric, never in chrome - Pill buttons throughout: white-filled CTA + hairline-outlined ghost, both invert on hover - Near-black raised surfaces (`{colors.surface}`) for depth instead of shadows - Four-step gray ramp for text hierarchy (#f5f5f7 → #86868b → #6e6e73 → #48484a) - Translucent dark-glass top toolbar - Three-weight type system: 400 (body), 600 (headings), 700 (occasional emphasis) ## Colors ### Canvas & Ink - **Black** (`{colors.background}`): Page canvas. True black for cinematic, gallery-dark feel. - **Off-White** (`{colors.ink}`): Headings and primary reading text (#f5f5f7). Softer than pure white to ease contrast on black. - **Pure White** (`{colors.ink-pure}`): Button fills, hover states, the brightest accents only. - **Surface** (`{colors.surface}`): Raised dark panels and cards (#1d1d1f). - **Surface Soft** (`{colors.surface-soft}`): Slightly lifted inner surfaces (#2c2c2e). ### Text Hierarchy - **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, eyebrows (#86868b). - **Ink Tertiary** (`{colors.ink-tertiary}`): Captions, fine print (#6e6e73). - **Ink Quaternary** (`{colors.ink-quaternary}`): Disabled, faintest labels (#48484a). ### Borders & Dividers - **Border** (`{colors.border}`): Hairline section dividers (#424245). - **Border Soft** (`{colors.border-soft}`): Card edges on dark surfaces (#2c2c2e). - **Light Gray** (`{colors.light-gray}`): Outlined-button stroke (#d2d2d7). ### Pastel Accent Gradients (the only chroma) - **Lavender** (`{colors.accent}`): Primary atmospheric accent (#bbb9f7). - **Violet** (`{colors.accent-violet}`): Gradient mid-stop (#cfabf4). - **Pink** (`{colors.accent-pink}`): Warm gradient stop (#e793fa). - **Blue** (`{colors.accent-blue}`): Cool gradient stop (#87baf8). - **Sky** (`{colors.accent-sky}`): Light blue gradient stop (#99d2fc). - **Cyan** (`{colors.accent-cyan}`): Bright gradient stop (#56dfda). - **Teal** (`{colors.accent-teal}`): Deeper gradient stop (#5ec5e5). ### Overlay & Glass - **Overlay Dark** (`{colors.overlay-dark}`): Translucent toolbar/glass backdrop (#161617). - **Glass Stroke** (`{colors.glass-stroke}`): Hairline on glass surfaces (#3a3a3c). ## Typography ### Font Family - **Primary**: San Francisco via the system stack — `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif`. No web font is loaded; the site leans entirely on the OS UI font, which on Apple devices is SF Pro. - **Weights**: 400 (body), 600 (headings, eyebrows), 700 (occasional strong emphasis). ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`). | Token | Use | |---|---| | `display-hero` | 96px hero headline — keynote billboard | | `display-large` | 80px large display | | `section-heading` | 64px feature-section titles | | `heading` | 48px section headings | | `sub-heading` | 40px sub-sections | | `card-title` | 32px feature/pricing card titles | | `body-large` | 21px intros, lead paragraphs | | `body` | 19px standard reading text | | `body-small` | 17px secondary copy | | `button-large` | 17px primary buttons | | `button-ui` | 14px compact UI text | | `eyebrow` | 14px weight-600 section eyebrows | | `caption` | 12px metadata, fine print | ### Principles - **System font, no downloads**: The whole identity rides on SF Pro through the system stack — fast, native, and Apple-fluent. - **Compression at scale**: Display sizes carry negative tracking (-2px at 96px) that relaxes to neutral by body size. - **Three weights, strict roles**: 400 reads, 600 announces, 700 emphasizes sparingly. - **Off-white, not white**: Reading text is #f5f5f7 on black — slightly dimmed to soften the contrast bloom of pure white on pure black. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Built on a 4/8px base, jumping to large section rhythms (`{spacing.4xl}` 96px, `{spacing.5xl}` 160px) for keynote-style vertical breathing room. ### Grid & Container - Centered max-width content column (~1024–1200px) with a wider `wrapper-large` for hero media - Hero: full-bleed video/mockup with pastel gradient wash behind - Feature sections: eyebrow + large title + body, alternating media sides - Pricing: three equal tier cards in a row ### Whitespace Philosophy - **Keynote pacing**: Generous vertical space between sections (`{spacing.4xl}`–`{spacing.5xl}`) so each feature lands on its own beat. - **Dark gallery**: Black canvas makes pastel gradients and product media glow; emptiness is intentional. - **Hairline separation**: Sections divide via `{colors.border}` hairlines and spacing, not background shifts. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | Black canvas, no edge | Page background, text blocks | | Surface (Level 1) | `{colors.surface}` panel, `{colors.border-soft}` edge | Cards, feature panels | | Glass (Level 2) | `{colors.overlay-dark}` translucent + blur, `{colors.glass-stroke}` hairline | Sticky top toolbar | | Gradient Wash | Soft pastel multi-color gradient behind media | Hero and feature backgrounds | **Depth Philosophy**: Depth is expressed through value, not shadow. Surfaces lift by getting lighter (#000 → #1d1d1f → #2c2c2e), and the only glow on the page is the atmospheric pastel gradient behind product imagery. Chrome stays flat and matte. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved | | `sm` | 4px | Small inline elements | | `md` | 10px | Inputs, small media | | `lg` | 16px | Cards, media tiles | | `xl` | 20px | Feature/pricing cards | | `2xl` | 28px | Large media containers | | `pill` | 9999px | All buttons, toolbar chips | ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-filled}`, `{components.card}`). ### Buttons - **`button-filled`** — White pill, black label. Primary CTA; brightens to pure white on hover. - **`button-outlined`** — Hairline `{colors.light-gray}` stroke ghost pill; inverts to solid white-on-black on hover. - **`button-small`** — Compact toolbar pill (22px tall) for the top nav. ### Cards - **`card`** — Near-black `{colors.surface}` panel, `{rounded.xl}` corners, hairline edge. - **`card-feature`** — Larger `{rounded.2xl}` media/feature panel. - **`card-pricing`** — Tier card with 32px title and 32px padding. ### Navigation - **`nav-bar`** — Sticky translucent dark-glass toolbar. Logo left, pill buttons right. ### Distinctive Components - **Pastel Gradient Wash**: Soft lavender→sky→cyan→pink gradients behind hero and feature media — the system's only color, never applied to UI chrome. - **Checkmark Feature Lists**: Circle-check icons before each feature/pricing line. - **Glass Toolbar**: Translucent `{colors.overlay-dark}` bar with blur, hairline bottom edge. ## Do's and Don'ts ### Do - Use off-white `{colors.ink}` (#f5f5f7) for reading text on black, not pure white - Keep all chroma in atmospheric pastel gradients behind media - Make every button a pill; invert filled/outlined on hover - Express depth with lighter surfaces (#1d1d1f, #2c2c2e), not shadows - Use the SF system font stack at large, negatively-tracked display sizes - Pace sections with keynote-scale vertical whitespace ### Don't - Don't apply pastel gradients to buttons, text, or chrome — media only - Don't use pure white for body copy on black - Don't add drop shadows for elevation — use value steps - Don't break the three-weight system (400/600/700) - Don't introduce square-cornered buttons — pills only - Don't divide sections with background-color blocks — use hairlines and space --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, hero type scales down sharply, stacked pricing | | Tablet | 600–1024px | 2-up feature grids, larger media | | Desktop | 1024–1400px | Full layout, centered content column | | Large | >1400px | Generous margins, wider hero media wrapper | ### Touch Targets - Large buttons 38px tall with comfortable pill padding - Small toolbar pills 22px — desktop-oriented - Feature/pricing cards full-width tappable on mobile ### Collapsing Strategy - Hero headline: 96px → scales down while keeping negative tracking - Pricing: three columns → stacked single column - Feature media: alternating sides → stacked above copy - Toolbar: pill buttons persist; logo + CTA remain ### Image Behavior - Hero video/iPhone mockup maintains aspect ratio and rounded frame - Pastel gradient wash softens and simplifies on small screens - Media tiles keep `{rounded.lg}`–`{rounded.2xl}` corners at all sizes --- ## Agent Prompt Guide ### Quick Color Reference - Background: Black `{colors.background}` - Heading/body text: Off-white `{colors.ink}` (#f5f5f7) - Muted text: `{colors.ink-secondary}` (#86868b) - Surfaces: `{colors.surface}` (#1d1d1f) - Dividers: `{colors.border}` (#424245) - CTA: white pill `{colors.ink}` with black label - Chroma: pastel gradients only (lavender `{colors.accent}` → cyan `{colors.accent-cyan}`) ### Example Component Prompts - "Create a dark hero on black. Headline 96px SF/system weight 600, letter-spacing -2px, color `{colors.ink}`. Subtitle 21px weight 400 in `{colors.ink-secondary}`. White filled pill CTA (`{colors.ink}` bg, black text, 9999px, 38px tall) plus an outlined ghost pill with `{colors.light-gray}` hairline. Soft lavender→sky→cyan gradient wash behind the product mockup." - "Build a feature card: `{colors.surface}` background, `{rounded.xl}` radius, hairline `{colors.border-soft}` edge, 24px padding. Eyebrow 14px weight 600 in `{colors.ink-secondary}`, title 32px weight 600 `{colors.ink}`, body 19px weight 400 in `{colors.ink-secondary}`." - "Design a sticky glass toolbar: translucent `{colors.overlay-dark}` with blur, hairline bottom in `{colors.border-soft}`, logo left, small white pill buttons right." ### Iteration Guide 1. Black canvas, off-white (#f5f5f7) text — never pure white for reading 2. Pastels only in atmospheric gradients behind media, never in chrome 3. Every button is a pill that inverts on hover 4. Depth = lighter surfaces, never shadow 5. SF system stack, three weights (400/600/700), negative tracking on display sizes --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Withframes. Brand names and trademarks belong to their respective owners.