---
version: alpha
name: Lovers Spaces
description: Editorial design-publication system — PolySans grotesque for UI/body paired with Heldane and Self Modern serif display, oversized negative-tracked hero type, warm cream and cool gray surfaces on white, a single electric-orange selection accent, and oversized pill radii on tags and avatars.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-cream: "#e5e1ce"
  surface-soft: "#fafafa"
  ink: "#000000"
  ink-secondary: "#4b4b4b"
  ink-muted: "#8b8b8b"

  # Accent — selection / highlight only
  primary: "#ff5800"
  on-primary: "#000000"

  # Editorial swatch tints (image-derived palette tags)
  tint-gold: "#d9a422"
  tint-lilac: "#a998e7"
  tint-sage: "#a0e06e"
  tint-clay: "#bfa690"
  tint-stone: "#907c6e"

  # Neutral scale
  gray-200: "#efefef"
  gray-300: "#d9d9d9"
  gray-400: "#b0b0b0"
  gray-500: "#8b8b8b"
  gray-600: "#55555a"
  gray-700: "#333333"

  # Borders
  border: "#efefef"
  border-strong: "#d9d9d9"

  # Focus
  focus: "#1199ff"

typography:
  hero-display:
    fontFamily: "Self Modern, Heldane, Georgia, Times New Roman, serif"
    fontSize: 152px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -5.16px
  display:
    fontFamily: "Heldane, Georgia, Times New Roman, serif"
    fontSize: 95px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -3.218px
  serif-heading:
    fontFamily: "Heldane, Georgia, Times New Roman, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1875
    letterSpacing: -0.8px
  serif-feature:
    fontFamily: "YoungSerif, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  section-heading:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.64px
  body-large:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  body-light:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.35
    letterSpacing: 0px
  ui-label:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Aktiv Grotesk, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 1.92px
  caption:
    fontFamily: "PolySans, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 7px
  sm: 14px
  md: 20px
  lg: 24px
  xl: 56px
  2xl: 69px
  pill: 100px
  full: 9999px

components:
  # Primary pill CTA — black
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.background}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary pill — outlined
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"

  # Tag / filter pill — gray surface
  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Eyebrow / category label
  badge-eyebrow:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  # Interview card
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"

  # Featured card on cream surface
  card-featured:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px
    borderColor: "{colors.surface-cream}"

  # Avatar — circular
  avatar:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.full}"
    size: 48px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Newsletter / subscribe block
  subscribe-block:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 40px
---

# Lovers Spaces Design System

## Overview

Lovers Spaces (the Lovers Magazine publication) is an editorial design system built for reading — a long-form interview magazine about modern creatives that treats typography as the entire product. The canvas is pure white (`{colors.background}`) with true-black ink (`{colors.ink}`), and the page is organized like a printed magazine: oversized serif display headlines anchor each spread, while a clean grotesque carries every label, caption, and UI control. There is almost no chrome — the design earns its presence through type scale, generous whitespace, and a disciplined warm/cool surface pairing rather than borders, shadows, or color.

The type system is a deliberate two-voice conversation. **Self Modern** and **Heldane** are the serif display faces, set at billboard sizes (up to 152px) with aggressive negative tracking (-5.16px at hero) so the headlines feel compressed and editorial, like a fashion masthead. **YoungSerif** appears as a softer feature serif for pull quotes and accents. Against all of this, **PolySans** — a neutral geometric grotesque — does the unglamorous work of body copy, navigation, tags, and metadata, with **Aktiv Grotesk** reserved for wide-tracked uppercase eyebrows. Serif for emotion, grotesque for information.

Color is almost entirely absent as a system, which is the point. The palette is black ink on white, mediated by two surface temperatures: a cool light gray (`{colors.surface}`) and a warm cream (`{colors.surface-cream}`) used to lift featured interviews and the subscribe block. The only saturated color in the entire interface is an electric orange (`{colors.primary}`) — and it is reserved almost exclusively for text selection, the kind of detail that signals a design-literate audience. The scattered jewel tones (gold, lilac, sage) are image-derived palette tags pulled from each creative's portfolio, not UI chrome.

**Key Characteristics:**
- Two-voice typography: Self Modern / Heldane serif display vs PolySans grotesque for UI and body
- Oversized hero serif (up to 152px) with extreme negative tracking (-5.16px)
- Aktiv Grotesk wide-tracked uppercase eyebrows for category labels
- Black ink on white — color is reserved, not decorative
- Warm cream (`{colors.surface-cream}`) and cool gray (`{colors.surface}`) surface pairing for featured content
- A single electric-orange accent (`{colors.primary}`) used for text selection
- Oversized pill radii (69–100px) on tags, buttons, and avatars
- Image-derived palette tags as the only chromatic moments

## Colors

### Primary
- **Black** (`{colors.ink}`): All primary text, headlines, body, nav. True black for editorial sharpness.
- **White** (`{colors.background}`): Page background and card surfaces.
- **Electric Orange** (`{colors.primary}`): Text selection highlight and rare interactive accent. The signature color.

### Surfaces
- **Cool Gray** (`{colors.surface}`): Tag pills, secondary blocks, avatar fallbacks.
- **Warm Cream** (`{colors.surface-cream}`): Featured interview cards and the subscribe block — the warm counterpoint.
- **Soft White** (`{colors.surface-soft}`): Subtle off-white sections.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, metadata, secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Timestamps, tertiary labels, placeholders.

### Editorial Palette Tags
- **Gold** (`{colors.tint-gold}`), **Lilac** (`{colors.tint-lilac}`), **Sage** (`{colors.tint-sage}`), **Clay** (`{colors.tint-clay}`), **Stone** (`{colors.tint-stone}`): Image-derived swatches tagging each creative's portfolio palette. Decorative content, never UI chrome.

### Neutrals & Borders
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, stronger separators.
- **Focus** (`{colors.focus}`): Keyboard focus ring.

## Typography

### Font Family
- **Display serif**: `Self Modern` (hero) and `Heldane`, with fallbacks `Georgia, Times New Roman, serif`
- **Feature serif**: `YoungSerif`, fallback `Georgia, serif`
- **Sans / UI / body**: `PolySans`, with fallbacks `Arial, Helvetica, sans-serif`
- **Eyebrow / uppercase**: `Aktiv Grotesk`, with fallbacks `Arial, Helvetica, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `hero-display` | 152px serif hero — masthead-scale impact, -5.16px tracking |
| `display` | Large serif display, 95px |
| `serif-heading` | Section and article titles |
| `serif-feature` | YoungSerif pull quotes and feature accents |
| `section-heading` | PolySans section labels |
| `body-large` | Lead paragraphs, interview intros |
| `body` | Standard reading text |
| `body-light` | Lighter body weight (300) |
| `ui-label` | Buttons, nav, interactive labels |
| `eyebrow` | Wide-tracked uppercase category labels (Aktiv Grotesk) |
| `caption` | Metadata, timestamps, tags |

### Principles
- **Serif for emotion, grotesque for information**: Display serifs (Self Modern / Heldane) carry headlines and brand feeling; PolySans handles every functional label.
- **Compression at scale**: Hero and display serifs use heavy negative tracking (-5.16px hero, -3.2px display) so large type reads as one engineered mass.
- **Restrained weights**: PolySans lives at 300/400/500/600; serifs stay at 400. No heavy bolding — hierarchy comes from face and size, not weight.
- **Uppercase eyebrows**: Aktiv Grotesk at ~0.12em+ tracking marks categories and sections.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous editorial rhythm — sections breathe with `{spacing.4xl}`–`{spacing.5xl}` vertical gaps.

### Grid & Container
- Magazine-style content column with wide outer margins
- Featured interviews get full-bleed or cream-card treatment
- Interview index uses a responsive card grid (1 → 2 → 3 columns)
- Hero headline frequently spans near-full width to maximize serif scale

### Whitespace Philosophy
- **Print-magazine air**: Large vertical spacing between sections; type does the work, not boxes.
- **Surface temperature for emphasis**: Featured/subscribe blocks switch to warm cream rather than adding borders or shadows.
- **Minimal chrome**: Hairline `{colors.border}` dividers replace heavy framing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Body, most cards |
| Hairline (Level 1) | `1px {colors.border}` divider/outline | Cards, sections |
| Surface lift (Level 2) | Cream or gray surface shift, no shadow | Featured cards, subscribe block |
| Focus | `2px {colors.focus}` ring | Keyboard focus |

**Shadow Philosophy**: Depth is communicated through surface temperature and whitespace, not drop shadows. A featured interview "lifts" by sitting on warm cream; a tag "recedes" by sitting on cool gray. Shadows are essentially absent — this is a flat, print-derived system.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, dividers |
| `xs` | 7px | Small chips, eyebrow badges |
| `sm` | 14px | Inputs, small cards |
| `md` | 20px | Standard cards |
| `lg` | 24px | Interview cards, media |
| `xl` | 56px | Featured cards, subscribe block |
| `2xl` | 69px | Large pill containers |
| `pill` | 100px | Buttons, tags |
| `full` | 9999px | Avatars, circular elements |

## Components

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

### Buttons
- **`button-primary`** — Black pill, white text, `{rounded.pill}`. The default CTA (Read Interview, Subscribe).
- **`button-secondary`** — White pill with `{colors.border-strong}` outline.

### Pills & Tags
- **`tag`** — Cool-gray pill with secondary ink, used for role/discipline filters.
- **`badge-eyebrow`** — Wide-tracked uppercase category label.

### Cards
- **`card`** — White interview card, hairline border, large radius, edge-to-edge media.
- **`card-featured`** — Warm-cream featured interview card, `{rounded.xl}`.

### Avatars
- **`avatar`** — Circular (`{rounded.full}`) creator portrait, gray fallback.

### Inputs
- **`input`** — White field, `{colors.border-strong}` outline; focus switches to `{colors.focus}`.

### Navigation
- **`nav-bar`** — White sticky header, PolySans 14px links, hairline bottom border.

### Distinctive Components
- **Subscribe block** — Warm-cream panel (`{components.subscribe-block}`) for the Pulse newsletter, set off purely by surface temperature.
- **Palette tags** — Image-derived swatch chips showing each creative's portfolio colors.

## Do's and Don'ts

### Do
- Pair Self Modern / Heldane serif display with PolySans for everything functional
- Use heavy negative tracking on large serif headlines (-5.16px hero, -3.2px display)
- Reserve `{colors.primary}` orange for selection and rare accents only
- Use surface temperature (cream vs gray) to create hierarchy instead of shadows
- Use oversized pill radii (69–100px) on tags, buttons, and avatars
- Set category eyebrows in wide-tracked uppercase Aktiv Grotesk

### Don't
- Don't add drop shadows — this is a flat, print-derived system
- Don't let orange become a decorative or fill color
- Don't set body copy in the serif faces — serifs are for display only
- Don't use positive tracking on display serifs
- Don't introduce borders where a surface shift will do the job
- Don't bold PolySans past 600

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, hero serif scales down sharply |
| Tablet | 640–920px | 2-column interview grid begins |
| Desktop | 920–1280px | 3-column grids, full editorial spacing |
| Large | >1280px | Centered column, maximum hero scale |

### Touch Targets
- Pill buttons use 12px+ vertical padding
- Tags have 14px horizontal padding for tap comfort
- Nav links at 14px with generous spacing

### Collapsing Strategy
- Hero serif: 152px → scales down proportionally, maintains negative tracking
- Interview grid: 3-column → 2-column → single column
- Featured cards: side-by-side → stacked
- Subscribe block: horizontal form → stacked
- Section spacing: 96px+ → ~40px on mobile

### Image Behavior
- Interview portraits maintain rounded-corner treatment at all sizes
- Featured imagery may go full-bleed on mobile
- Palette swatch tags wrap below the image

---

## Agent Prompt Guide

### Quick Color Reference
- Primary text: Black `{colors.ink}`
- Background: White `{colors.background}`
- Featured surface: Warm Cream `{colors.surface-cream}`
- Tag surface: Cool Gray `{colors.surface}`
- Accent (selection only): Orange `{colors.primary}`
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Create an editorial hero: white background, serif headline (Self Modern / Heldane) at 152px weight 400, line-height 0.92, letter-spacing -5.16px, color `{colors.ink}`. Subhead in PolySans 18px weight 400 `{colors.ink-secondary}`. Black pill CTA (`{rounded.pill}`, 12px 24px padding)."
- "Design an interview card: white surface, 1px `{colors.border}`, `{rounded.lg}` radius, edge-to-edge portrait on top, serif title (Heldane 36px) below, PolySans 16px metadata, role tag in a cool-gray pill."
- "Build a featured block on warm cream `{colors.surface-cream}`, `{rounded.xl}` radius, 40px padding, serif heading, PolySans body, no shadow."
- "Create a category eyebrow: Aktiv Grotesk 12px weight 600 uppercase, letter-spacing 1.92px, color `{colors.ink-secondary}`."

### Iteration Guide
1. Serif (Self Modern / Heldane) for display only; PolySans for all UI and body
2. Heavy negative tracking scales with serif size — never positive
3. Color is reserved: black on white, orange only for selection
4. Hierarchy comes from surface temperature (cream/gray) and whitespace, not shadows
5. Oversized pill radii (69–100px) define the chrome silhouette
6. Eyebrows are wide-tracked uppercase Aktiv Grotesk

---

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