---
version: alpha
name: Live Surface
description: Photo-real material studio minimalism — a near-white gallery canvas where product imagery is the hero, set in clean geometric sans with restrained near-black ink, soft neutral surfaces, hairline borders, and a single confident dark CTA. Color is reserved for the work, not the chrome.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f6f4"
  surface-sunken: "#f0efec"
  ink: "#1a1a1a"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#5c5c5c"
  ink-tertiary: "#8a8a87"
  ink-muted: "#b3b2ae"

  # Primary action — confident dark
  primary: "#111111"
  primary-hover: "#2e2e2e"
  on-primary: "#ffffff"

  # Accent — restrained warm spotlight (used sparingly on highlights/links)
  accent: "#c8553d"
  accent-soft: "#f3e3de"

  # Borders + dividers (hairline neutrals)
  border: "#e6e5e1"
  border-strong: "#d6d5d0"
  divider: "#ececea"

  # Surface tints
  tint-warm: "#faf9f6"
  tint-cool: "#f4f5f6"

  # On-color
  on-surface: "#1a1a1a"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.1px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"

  eyebrow-label:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.eyebrow}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-pricing:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  media-tile:
    backgroundColor: "{colors.surface-sunken}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-accent:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Live Surface Design System

## Overview

Live Surface is a photo-real material and surface visualization studio for designers — software that wraps artwork onto physically-accurate materials in real time. Its visual identity follows the cardinal rule of every serious creative tool: the chrome disappears so the work can speak. The page is a near-white gallery (`{colors.background}`) where richly-rendered product imagery carries all the color, and the interface around it stays disciplined, neutral, and quiet.

The type system is a clean geometric sans (Inter, with Helvetica Neue fallback) carrying confident but restrained negative tracking at display sizes (-1.68px on the hero). Headlines feel engineered and composed rather than loud; body copy relaxes to comfortable reading rhythm with generous line-height. Ink is a soft near-black (`{colors.ink}`) rather than pure black, and the secondary scale steps down through warm-neutral grays so hierarchy reads without any reliance on color.

Surfaces are layered with whisper-soft warm neutrals — `{colors.surface-soft}` and `{colors.surface-sunken}` define cards and media wells against the white canvas, separated by hairline borders (`{colors.border}`) rather than heavy shadows. The one place the system raises its voice is the primary action: a confident near-black pill CTA (`{colors.primary}`) that anchors the hero and pricing. A single restrained warm accent (`{colors.accent}`) appears only on highlights, links, and feature badges — never as decorative chrome.

**Key Characteristics:**
- Near-white gallery canvas (`{colors.background}`) — imagery is the hero, chrome recedes
- Inter / geometric sans with confident negative tracking at display sizes
- Soft near-black ink (`{colors.ink}`), never pure black, with a warm-neutral gray scale
- Hairline neutral borders (`{colors.border}`) instead of heavy shadows
- Warm-neutral layered surfaces (`{colors.surface-soft}`, `{colors.surface-sunken}`)
- One confident dark pill CTA (`{colors.primary}`) as the single loud element
- A restrained warm accent (`{colors.accent}`) reserved for highlights, links, badges
- Generous whitespace and large media wells for surface previews

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text and headings — a soft near-black, not pure.
- **White** (`{colors.background}`): Page canvas and card surfaces.
- **Primary** (`{colors.primary}`): Confident dark CTA fill — the single loud element.

### Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Eyebrows, captions, muted metadata.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder and disabled text.

### Accent
- **Accent** (`{colors.accent}`): Warm spotlight — links, highlights, feature badge text.
- **Accent Soft** (`{colors.accent-soft}`): Tinted badge background for the accent.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Warm-neutral card and panel fill.
- **Surface Sunken** (`{colors.surface-sunken}`): Media wells, image placeholders, recessed tiles.
- **Tint Warm** (`{colors.tint-warm}`): Subtle warm section wash.
- **Tint Cool** (`{colors.tint-cool}`): Subtle cool section wash.

### Borders
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Secondary button and input outlines.
- **Divider** (`{colors.divider}`): Faint section separators.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A clean geometric grotesque used at every level — display, body, and UI.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — composed, engineered presence |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections and feature intros |
| `card-title` | Card and pricing-plan titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and links |
| `caption` | Metadata, badges, tags |
| `eyebrow` | Uppercase tracked section labels |

### Principles
- **Composed, not loud**: Display sizes use measured negative tracking (-1.68px hero) for an engineered feel without shouting.
- **Color-free hierarchy**: The warm-neutral gray scale carries hierarchy so accent color stays reserved for the work.
- **Three weights**: 400 (reading), 500 (UI/interactive), 600 (headings/emphasis).
- **Tracked eyebrows**: Small uppercase labels use positive tracking (+1.2px) as the one exception to the negative-tracking system.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with generous jumps at the section level (`{spacing.4xl}`, `{spacing.5xl}`) for gallery-grade whitespace.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: single-column with a large media well beneath or beside the headline
- Feature sections: 2–3 column grids of cards and media tiles
- Pricing: equal-width card row (Pro Monthly / Yearly / Studio)

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical rhythm between sections so imagery breathes.
- **Imagery is the color**: The neutral chrome exists to make rendered surfaces pop.
- **Hairline separation**: Borders and spacing, not shadows, define structure.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text blocks |
| Hairline | `1px solid {colors.border}` | Cards, media tiles, nav |
| Recessed | `{colors.surface-sunken}` fill | Media wells, image placeholders |
| Raised CTA | Dark pill `{colors.primary}` | Primary action only |

**Shadow Philosophy**: Depth is structural, not atmospheric. Live Surface separates surfaces with warm-neutral fills and hairline borders rather than drop shadows, keeping the focus on the photographic richness of the rendered material previews.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `xs` | 4px | Tags, inline chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Media tiles |
| `lg` | 16px | Standard and soft cards |
| `xl` | 24px | Pricing cards |
| `pill` | 9999px | Buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Near-black pill, white text. The single confident CTA.
- **`button-secondary`** — White pill with `{colors.border-strong}` outline.

### Cards
- **`card`** — White surface, hairline border, 16px radius.
- **`card-soft`** — Warm-neutral fill for secondary panels.
- **`card-pricing`** — Larger 24px-radius card for pricing plans.

### Media
- **`media-tile`** — Sunken warm-neutral well for surface previews and screenshots.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline. Focus darkens the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — White header, hairline bottom border, dark pill CTA right-aligned.

### Badges
- **`badge`** — Neutral pill for metadata.
- **`badge-accent`** — Warm accent-tinted pill for feature highlights.

## Do's and Don'ts

### Do
- Keep the canvas near-white and let rendered imagery carry the color
- Use `{colors.ink}` (soft near-black), never pure black, for primary text
- Separate surfaces with hairline borders, not heavy shadows
- Reserve the dark pill CTA for the single primary action
- Use the warm accent (`{colors.accent}`) only on highlights, links, and badges
- Carry hierarchy with the gray scale, not color

### Don't
- Don't add decorative color to the chrome — color belongs to the work
- Don't use heavy drop shadows for elevation
- Don't use pure black for body text
- Don't introduce a second loud action color competing with the dark CTA
- Don't crowd media wells — give surface previews generous whitespace

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px headline scales down, tracking stays proportional
- Feature cards: 3-column → 2-column → single column
- Pricing row: 3 cards → stacked
- Nav: links + CTA → menu toggle
- Media wells: maintain aspect ratio, full-width on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: near-black `{colors.primary}`
- Background: white `{colors.background}`
- Heading text: soft near-black `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: hairline `{colors.border}`
- Accent: warm `{colors.accent}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Inter weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Lead 19px weight 400 in `{colors.ink-secondary}`. Dark pill CTA (`{colors.primary}`, 9999px radius, 12px 24px padding) and an outline secondary pill (`{colors.border-strong}` border)."
- "Design a pricing card: white surface, 1px `{colors.border}`, 24px radius, 32px padding. Title 22px Inter weight 600. Body in `{colors.ink-secondary}`."
- "Build a media tile: `{colors.surface-sunken}` fill, 12px radius, 1px `{colors.border}` outline, for surface previews."
- "Add a feature badge: `{colors.accent-soft}` background, `{colors.accent}` text, pill radius, 4px 12px padding, 13px weight 500."

### Iteration Guide
1. Keep chrome neutral — imagery provides the color
2. Tracking scales with size: -1.68px hero, -1.2px section, normal at UI sizes
3. Three weights only: 400 read, 500 interact, 600 announce
4. Hairline borders for structure, never heavy shadows
5. One dark CTA; warm accent reserved for highlights only

---

## 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 Live Surface. Brand names and trademarks belong to their respective owners.