---
version: alpha
name: The Echo Book
description: Type-forward editorial minimalism for a design book — near-black ink on warm off-white paper, a single molten-orange accent (#f9652f) that carries every CTA and emphasis, Inter set tight with negative tracking, and numbered section markers that frame the page like a printed table of contents.
colors:
  # Canvas + ink
  background: "#f8f8f8"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  ink: "#121212"
  ink-deep: "#141517"
  ink-soft: "#1c1c1c"

  # Accent — molten orange, used for CTAs + emphasis only
  primary: "#f9652f"
  primary-hover: "#e14e1a"
  primary-active: "#c63e10"
  accent-bright: "#ff5e2b"

  # Secondary signal colors (badges, status)
  amber: "#f5b614"
  red: "#e5484d"

  # Neutral scale
  gray-500: "#767676"
  gray-400: "#ababab"
  gray-200: "#e5e5e5"
  gray-100: "#ededed"

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

typography:
  display-hero:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 55px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.03em
  section-heading:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.02em
  sub-heading:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  card-title:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.02em
  quote:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.02em
  body-large:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.01em
  body:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0em
  button-ui:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.01em
  label-num:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0em
  caption:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0em

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

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

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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-200}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.gray-500}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.gray-200}"

  number-marker:
    textColor: "{colors.primary}"
    typography: "{typography.label-num}"

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

  quote-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.quote}"
    padding: 24px 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.gray-200}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
---

# The Echo Book Design System

## Overview

The Echo Book is the promotional site for a design book — "How to Design Brands That Move Culture" — and its visual language is the argument made manifest. Built on Framer, the page reads like a well-set printed object: a warm off-white canvas (`{colors.background}`), near-black ink (`{colors.ink}`), and a single, unmissable molten-orange accent (`{colors.primary}`) that does all the persuading. There is no secondary brand color competing for attention. The orange is the echo.

Typography carries the whole identity. Everything is set in Inter, weighted between 400 and 600, with consistent negative letter-spacing (-0.01em to -0.03em) that tightens as the type gets larger. The hero runs to 55px at weight 600 with -0.03em tracking, giving headlines a compressed, confident, editorial feel — type that behaves like a book jacket rather than a marketing banner. Body copy relaxes to a comfortable 16–18px at generous line-heights (1.60–1.65) so long-form reading stays effortless.

The structural signature is the numbered section marker. Chapters and content blocks are introduced by orange numerals (01, 02, 03…) set small and bold (`{typography.label-num}`), mimicking a printed table of contents and reinforcing the book metaphor. White surfaces (`{colors.surface}`) float on the off-white canvas as cards and quote frames, separated by thin neutral hairlines (`{colors.gray-200}`) rather than heavy shadows. The result is calm, paper-like, and unmistakably literary.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) with near-black ink — paper, not screen-white
- A single molten-orange accent (`{colors.primary}`) reserved for CTAs, emphasis, and numerals
- Inter throughout, 400–600 weights, with progressive negative tracking (-0.01em → -0.03em)
- Numbered section markers (01, 02…) in orange — the table-of-contents motif
- Pill-shaped CTAs in solid orange; secondary buttons are white with a hairline
- Hairline neutral borders (`{colors.gray-200}`) instead of shadows for depth
- Large, type-forward pull quotes carrying testimonials and the book's argument

## Colors

### Primary
- **Paper** (`{colors.background}`): Page canvas — warm off-white, the printed-page substrate.
- **Card White** (`{colors.surface}`): Cards, quote frames, inputs — a brighter white floating on paper.
- **Ink** (`{colors.ink}`): Primary text and headings. Near-black for warmth without harshness.

### Accent
- **Echo Orange** (`{colors.primary}`): Every CTA, link emphasis, and section numeral. The single brand color.
- **Echo Orange Hover** (`{colors.primary-hover}`): Darker hover state on primary buttons.
- **Echo Orange Active** (`{colors.primary-active}`): Pressed/active state.
- **Accent Bright** (`{colors.accent-bright}`): A hotter orange used in decorative gradient washes.

### Signal
- **Amber** (`{colors.amber}`): Occasional secondary highlight / status.
- **Red** (`{colors.red}`): Error / strong status.

### Neutral Scale
- **Gray 500** (`{colors.gray-500}`): Secondary text, captions, attributions.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder text.
- **Gray 200** (`{colors.gray-200}`): Hairline borders, dividers, card outlines.
- **Gray 100** (`{colors.gray-100}`): Subtlest separation lines.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Inter Placeholder, sans-serif` (Framer's default chain — Inter is the live typeface across the site).

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 55px hero headline — book-jacket impact |
| `section-heading` | 40px chapter / section titles |
| `sub-heading` | 32px sub-sections |
| `card-title` | 24px feature / chapter cards |
| `quote` | 28px pull quotes and testimonials |
| `body-large` | 18px introductions and lead paragraphs |
| `body` | 16px standard reading text |
| `button-ui` | 16px buttons and nav links |
| `label-num` | 14px bold orange section numerals |
| `caption` | 12px attributions, metadata |

### Principles
- **Tracking scales with size**: tightest at the hero (-0.03em), relaxing through -0.02em and -0.01em down to neutral at body — the compression reads as editorial confidence.
- **Three weights, strict roles**: 400 (reading), 500 (UI / quotes), 600 (headings / numerals). No 700 or above.
- **Generous reading line-height**: body runs 1.60–1.65 so the long-form book pitch stays comfortable.
- **Numerals as navigation**: orange bold numbers stand in for chapter markers, tying the page to the printed object.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Rhythm is built on an 8px base with large jumps (`{spacing.3xl}`–`{spacing.4xl}`) between major sections for a calm, paper-like cadence.

### Grid & Container
- Single centered column for the hero and reading passages, max width ~1100px
- Content blocks introduced by an orange numeral, then heading, then body
- White cards and quote frames sit on the off-white canvas, divided by hairlines

### Whitespace Philosophy
- **Editorial calm**: large vertical gaps between sections; the page breathes like a book spread
- **Single accent restraint**: orange appears sparingly so each instance reads as emphasis, never decoration
- **Hairline depth**: separation comes from thin `{colors.gray-200}` borders and the paper/card tonal step, not shadows

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — solid Echo Orange, white text, full pill, 14px 28px padding. The single CTA style.
- **`button-secondary`** — white surface, ink text, hairline border, full pill.

### Markers & Badges
- **`number-marker`** — orange bold numeral (01, 02…) introducing each section.
- **`badge`** — white pill with hairline border, muted gray label.

### Cards & Quotes
- **`card`** — white surface, `{rounded.lg}`, hairline border, 24px padding.
- **`quote-block`** — large 28px weight-500 pull quote on the canvas, attribution below in gray.

### Inputs
- **`input`** — white surface, hairline border, `{rounded.sm}`, ink text.

### Navigation
- **`nav-bar`** — transparent-on-paper header, ink links at 16px weight 500, orange pill CTA right-aligned.

## Do's and Don'ts

### Do
- Set everything in Inter with negative tracking that tightens as size grows
- Reserve `{colors.primary}` for CTAs, emphasis, and section numerals only
- Use the warm off-white `{colors.background}` as canvas — never pure white for the page
- Introduce content blocks with orange numbered markers
- Use hairline `{colors.gray-200}` borders for separation instead of shadows
- Keep CTAs fully pill-shaped and solid orange

### Don't
- Don't introduce a second brand color — the orange is the only accent
- Don't use weight 700+ — 600 is the ceiling
- Don't set the page canvas to pure `#ffffff` (reserve that for cards)
- Don't add heavy drop shadows — depth is tonal and hairline
- Don't use positive letter-spacing on headings
- Don't scatter the orange decoratively — every instance should mean "act" or "note this"

---

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