---
version: alpha
name: Format
description: Studio-clean SaaS minimalism with editorial warmth — near-black ink on a soft off-white canvas, a single confident coral-red accent echoing vinyl-record graphics, generous whitespace, large rounded cards, and a friendly geometric sans.
colors:
  # Canvas + ink
  background: "#fbfaf8"
  surface: "#ffffff"
  surface-soft: "#f4f2ee"
  ink: "#16140f"
  ink-secondary: "#5c5850"
  ink-muted: "#8c877d"

  # Accent — coral-red (vinyl), with playful supports
  primary: "#ec4d3a"
  primary-hover: "#d63c2a"
  accent-magenta: "#e0408c"
  accent-blue: "#3b6fe0"

  # Neutral scale
  gray-200: "#e7e4dd"
  gray-100: "#efece6"
  gray-50: "#f7f5f1"

  # Interactive
  link: "#ec4d3a"
  focus: "#3b6fe0"
  border: "#e3dfd7"
  border-strong: "#16140f"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fbfaf8"

typography:
  display-hero:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.5px
  eyebrow:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.6px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  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.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 32px
    borderColor: "{colors.border}"
  listen-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
---

# Format Design System

## Overview

Format's site presents the studio-grade calm of a modern audio-marketing SaaS: a soft, paper-warm off-white canvas (`{colors.background}`) carrying near-black ink (`{colors.ink}`), broken by a single confident coral-red accent (`{colors.primary}`) that traces directly back to the brand's vinyl-record graphics. Where many AI tools lean cold-blue and technical, Format reads warm, editorial, and human — fitting a product about turning content into listenable podcasts.

The type system pairs a friendly geometric sans (Poppins-class) for headings and UI with a neutral humanist sans (Inter-class) for reading copy. Headlines run large with gentle negative tracking, confident but never compressed; body copy stays comfortable at 17px with relaxed 1.6 line-height. The voice is approachable rather than engineered.

Structurally the page is whitespace-forward and card-driven. Content sits in large rounded cards (`{rounded.lg}`–`{rounded.xl}`) over the warm canvas, with hairline neutral borders (`{colors.border}`) doing the separating instead of heavy shadow. The coral accent appears as the primary pill CTA and as occasional playful supports (magenta, blue) echoing the multi-color vinyl artwork — color used as brand personality, not chrome.

**Key Characteristics:**
- Paper-warm off-white canvas (`{colors.background}`) rather than pure white — editorial warmth
- Single coral-red accent (`{colors.primary}`) from the vinyl graphics, with magenta/blue playful supports
- Poppins-class geometric sans for headings/UI, Inter-class for reading copy
- Fully rounded pill CTAs over large rounded content cards
- Hairline neutral borders, minimal shadow — separation by space and line
- Generous whitespace and large section rhythm
- Dark high-contrast "Listen" pills against the warm canvas

## Colors

### Primary
- **Vinyl Coral** (`{colors.primary}`): Primary CTA, links, brand accent. The signature, pulled from the record graphics.
- **Coral Hover** (`{colors.primary-hover}`): Pressed/hover state for the coral CTA.
- **Format Ink** (`{colors.ink}`): Headlines, body, dark pills. Near-black with faint warmth.

### Playful Supports
- **Magenta** (`{colors.accent-magenta}`): Secondary vinyl accent, illustrative highlights.
- **Blue** (`{colors.accent-blue}`): Tertiary vinyl accent, also the focus ring.

### Canvas & Surface
- **Canvas** (`{colors.background}`): Page background, paper-warm off-white.
- **Surface** (`{colors.surface}`): Card and input fills, pure white for lift.
- **Surface Soft** (`{colors.surface-soft}`): Feature-card tint, muted sections.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Description and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, placeholders.

### Neutral Scale
- **Gray 200** (`{colors.gray-200}`): Stronger dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle dividers.
- **Gray 50** (`{colors.gray-50}`): Faint surface tint.

### Interactive
- **Link** (`{colors.link}`): Inline links, coral.
- **Focus** (`{colors.focus}`): Keyboard focus ring, blue.
- **Border** (`{colors.border}`): Hairline card/input borders.
- **Border Strong** (`{colors.border-strong}`): Outlined secondary button border, ink.

## Typography

### Font Family
- **Headings / UI**: `Poppins`, with fallbacks `Arial, sans-serif` — friendly geometric sans.
- **Body**: `Inter`, with fallbacks `Arial, sans-serif` — neutral humanist sans for reading.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline |
| `section-heading` | Section titles |
| `card-title` | Card and feature headings |
| `eyebrow` | Uppercase-ish labels, badges |
| `body-large` | Hero subtitle, intros |
| `body` | Standard reading text |
| `body-small` | UI text, captions area |
| `button-ui` | Buttons and nav links |
| `caption` | Metadata, tags |

### Principles
- **Two-family pairing**: Poppins for personality (headings, buttons), Inter for legibility (paragraphs).
- **Gentle, not aggressive tracking**: Headlines use mild negative letter-spacing — confident, never minified.
- **Comfortable reading**: Body at 17px / 1.6 — generous, magazine-like.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps to `{spacing.3xl}` and `{spacing.4xl}` for section rhythm.

### Grid & Container
- Max content width: approximately 1180px
- Hero: centered single column with generous top padding
- Features: 3-column "how it works" grid collapsing to single column
- Podcast demos: card list with paired "Listen" pills

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical padding between sections (`{spacing.3xl}`–`{spacing.4xl}`).
- **Separation by line, not shadow**: Hairline `{colors.border}` and space replace heavy elevation.
- **Color as punctuation**: The warm canvas stays quiet so coral and vinyl accents read loud.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inputs, chips |
| `md` | 12px | Inputs, small cards |
| `lg` | 20px | Standard content cards |
| `xl` | 28px | Feature cards, large panels |
| `pill` | 9999px | Buttons, badges, listen pills |

## Components

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

### Buttons
- **`button-primary`** — Coral fill, white text, full pill. The default CTA ("Book a demo").
- **`button-secondary`** — White surface, ink text, ink outline, full pill.
- **`listen-pill`** — Dark ink fill, warm-white text, pill — the podcast play action.

### Pills & Badges
- **`badge`** — Soft surface tint, secondary ink, eyebrow type, full pill.

### Cards
- **`card`** — White surface, hairline border, `{rounded.lg}`, generous padding.
- **`card-feature`** — Soft tinted surface, `{rounded.xl}`, larger padding for feature blocks.

### Inputs
- **`input`** — White surface, hairline border. Focus uses `{colors.focus}` blue border.

### Navigation
- **`nav-bar`** — Warm canvas, ink links, coral CTA right, hairline bottom border. Includes EN/FR language switch.

## Do's and Don'ts

### Do
- Keep the canvas paper-warm off-white (`{colors.background}`), not pure white
- Use coral (`{colors.primary}`) as the single primary accent; reserve magenta/blue for illustrative vinyl accents
- Pair Poppins (headings/UI) with Inter (reading copy)
- Use full pills for all buttons and the listen action
- Separate with hairline borders and whitespace, not heavy shadow
- Keep headline tracking gently negative — confident, not compressed

### Don't
- Don't introduce cold blue as a UI base color — Format reads warm
- Don't set body copy in Poppins — Inter carries reading
- Don't over-shadow cards; the system is line-and-space driven
- Don't use coral for large fills or backgrounds — it's punctuation
- Don't square off buttons — pills are the brand shape

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, full-width CTAs |
| Tablet | 600–1024px | 2-column grids, condensed nav |
| Desktop | 1024–1180px | Full 3-column layout, max content width |
| Large | >1180px | Centered, generous side margins |

### Touch Targets
- Pill buttons use comfortable 12px vertical padding
- Listen pills sized for tap on podcast cards
- Nav links spaced for touch; CTA stays visible

### Collapsing Strategy
- Hero: 56px → scales down, maintains gentle tracking
- Navigation: horizontal links → hamburger with language switch
- Feature grid: 3-column → single column
- Podcast cards: side-by-side listen pill → stacked

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Vinyl Coral `{colors.primary}`
- Background: Paper-warm off-white `{colors.background}`
- Heading text: Format Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: hairline `{colors.border}`
- Focus ring: Blue `{colors.focus}`

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Headline 56px Poppins weight 600, letter-spacing -1.6px, color `{colors.ink}`. Subtitle 20px Inter weight 400, `{colors.ink-secondary}`. Coral pill CTA (`{colors.primary}`, full pill, 12px 24px) plus outlined secondary pill (`{colors.surface}`, ink border)."
- "Design a podcast card: white surface, hairline `{colors.border}`, 20px radius, 28px padding. Title 24px Poppins weight 600. Paired dark 'Listen' pill (`{colors.ink}` fill, warm-white text)."
- "Build a feature card: soft surface `{colors.surface-soft}`, 28px radius, 32px padding, Poppins title, Inter body in `{colors.ink-secondary}`."

### Iteration Guide
1. Warm canvas + single coral accent is the foundation — keep color quiet, accents loud
2. Poppins announces, Inter reads — never swap roles
3. Pills everywhere for actions; large rounding on content cards
4. Hairline borders + whitespace over shadow
5. Magenta and blue are illustrative (vinyl) supports, not UI chrome

---

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