---
version: alpha
name: Monolog
description: Editorial restraint for a creative studio — warm off-white canvas with near-black ink, oversized line-broken display headlines, numbered section markers (00 / 03), monochromatic logo grids, and a single warm-amber accent reserved for emphasis. Outcomes first, taste second.

colors:
  # Canvas + ink
  background: "#f4f2ee"
  surface: "#ffffff"
  surface-soft: "#eeebe5"
  ink: "#1a1916"
  ink-pure: "#000000"
  ink-secondary: "#56534c"
  ink-muted: "#8c887f"

  # Accent — used sparingly for emphasis / hover
  primary: "#c8602a"
  accent-warm: "#e0a96d"

  # Lines + borders
  border: "#d9d5cd"
  border-strong: "#c2bdb2"

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

  # Neutral scale
  gray-900: "#1a1916"
  gray-600: "#56534c"
  gray-400: "#8c887f"
  gray-200: "#d9d5cd"
  gray-100: "#eeebe5"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1.5px
  display-large:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.5px
  section-marker:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

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

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

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

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

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

  card-image:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"

  section-marker:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.section-marker}"
    padding: 0px

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

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

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

# Monolog Design System

## Overview

Monolog is a creative studio that presents itself with editorial restraint — the design reads like a printed portfolio brochure rather than a typical agency site. The canvas is a warm off-white (`{colors.background}`), a paper-stock cream that softens the whole page and signals craft over flash. Against it, near-black ink (`{colors.ink}`) carries the typography with high but not harsh contrast. The studio's stated philosophy, "outcomes first, taste second," is mirrored in a system that prioritizes legibility, rhythm, and purposeful negative space over decoration.

The defining typographic move is the oversized, condensed display headline. Hero copy is set in a tall, narrow display face (Anton-class) and deliberately line-broken across multiple lines ("build / an experience / that moves / people"), turning the headline into a composed object that fills the viewport. Body and UI text drop to a clean neutral grotesque (Inter-class) at comfortable reading sizes, creating a deliberate two-voice hierarchy: a loud condensed display for impact, a quiet humanist sans for substance.

Structure is communicated through numbered section markers — small monospaced labels like `00 / 03` that act as a table-of-contents rhythm down the page. These markers, plus monochromatic client-logo grids and large editorial photography, do most of the visual work. Color is held back almost entirely: a single warm amber-terracotta accent (`{colors.primary}`) appears only on hover states and rare points of emphasis, never as decorative chrome. The result is restrained, confident, and human.

**Key Characteristics:**
- Warm paper-cream canvas (`{colors.background}`) instead of pure white — craft, not sterility
- Oversized condensed display headlines (Anton-class), deliberately line-broken into composed blocks
- Two-voice type system: condensed display for impact, Inter humanist grotesque for reading
- Monospaced numbered section markers (`00 / 03`) providing structural rhythm
- Near-monochrome palette — a single warm amber-terracotta accent reserved for hover/emphasis
- Monochromatic client-logo grids and large editorial photography carry the page
- Generous whitespace and section spacing; minimal borders, hairline dividers only

## Colors

### Canvas & Ink
- **Paper Cream** (`{colors.background}`): The signature warm off-white page background.
- **White** (`{colors.surface}`): Card and panel surfaces that sit slightly brighter than the canvas.
- **Soft Cream** (`{colors.surface-soft}`): Tinted surface for image frames, badges, hovers.
- **Studio Ink** (`{colors.ink}`): Primary text and headings — near-black with a warm bias.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Section markers, captions, tertiary metadata.

### Accent
- **Terracotta** (`{colors.primary}`): The lone accent — hover states, emphasis links, active markers.
- **Warm Amber** (`{colors.accent-warm}`): Lighter accent tint for highlights and subtle washes.

### Lines & Borders
- **Hairline** (`{colors.border}`): Dividers, card outlines, subtle separation.
- **Border Strong** (`{colors.border-strong}`): Secondary button outlines, input borders.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted labels, placeholders.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle surface tint.

## Typography

### Font Family
- **Display**: `Anton` (condensed), with fallbacks `Oswald, Arial Narrow, sans-serif`
- **Text / UI**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif`
- **Mono**: `JetBrains Mono`, for section markers and technical labels

### 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` | 88px condensed hero — line-broken billboard headline |
| `display-large` | Large section display headlines |
| `section-heading` | Inter feature/section titles |
| `sub-heading` | Sub-sections, intros |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `button-ui` | Buttons, nav links |
| `label-mono` | Monospaced labels, tags |
| `section-marker` | Numbered section markers (00 / 03) |
| `caption` | Metadata, image captions |

### Principles
- **Two voices, strict roles**: condensed display (Anton-class) for headlines only; Inter for everything readable.
- **Line-broken display**: hero headlines are manually broken across lines to compose as a block, not to flow.
- **Mono for structure**: numbered markers and labels use JetBrains Mono with slight positive tracking.
- **Restraint in weight**: Inter stays in the 400–600 range; the condensed display carries impact through scale, not weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}`–`{spacing.4xl}`) between major sections.

### Grid & Container
- Max content width approximately 1280px
- Hero: left-aligned or full-bleed single column with oversized headline
- Project/feature sections: alternating 2-column splits of image + text
- Client logos: monochromatic grid, evenly spaced

### Whitespace Philosophy
- **Editorial breathing room**: large vertical spacing (`{spacing.3xl}`+) between sections; whitespace is the primary separator.
- **Markers over rules**: numbered section markers replace heavy dividers; borders stay hairline.
- **Photography-led**: large images anchor sections; text wraps around generous margins.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed images, flush sections |
| `xs` | 2px | Inline emphasis |
| `sm` | 4px | Inputs, small controls |
| `md` | 8px | Cards, image frames |
| `lg` | 12px | Larger panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Studio Ink fill, cream text, pill radius. Hovers to Terracotta.
- **`button-secondary`** — Cream surface with `{colors.border-strong}` outline; border darkens to ink on hover.

### Cards
- **`card`** — White surface on the cream canvas, hairline border, generous 32px padding.
- **`card-image`** — Soft-cream framed image container, no padding, hairline border.

### Markers & Badges
- **`section-marker`** — Monospaced numbered label (00 / 03) in muted ink; the structural signature.
- **`badge`** — Soft-cream pill, monospaced label, used for tags and categories.

### Navigation
- **`nav-bar`** — Cream sticky header, Inter 15px weight 500 links, hairline bottom border.

### Inputs
- **`input`** — White surface, strong hairline border; focus darkens border to ink.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`) instead of pure white
- Set hero headlines in a condensed display face, manually line-broken into a block
- Keep body and UI text in Inter at 400–600 weight
- Use numbered monospaced section markers for structural rhythm
- Reserve the terracotta accent (`{colors.primary}`) for hover and emphasis only
- Let photography and whitespace carry the page

### Don't
- Don't introduce pure white as the page background — the warmth is the identity
- Don't use the condensed display face for body or UI text
- Don't add color decoratively — the palette is near-monochrome by intent
- Don't use heavy borders or boxes — hairlines and whitespace only
- Don't crowd sections — editorial spacing is non-negotiable

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked images |
| Tablet | 600–1024px | 2-column splits begin, reduced section spacing |
| Desktop | 1024–1280px | Full editorial layout |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 88px condensed → scales down proportionally, retains line breaks where they fit
- Image + text splits: side-by-side → stacked
- Client logo grid: multi-column → 2-up
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper Cream `{colors.background}`
- Heading / body text: Studio Ink `{colors.ink}` / `{colors.ink-secondary}`
- Primary CTA: Studio Ink `{colors.ink}` (hover Terracotta `{colors.primary}`)
- Accent: Terracotta `{colors.primary}` — hover/emphasis only
- Section marker: Mono label in `{colors.ink-muted}`

### Example Component Prompts
- "Create a hero on a warm cream (`{colors.background}`) background. Headline in a condensed display face at 88px weight 400, line-height 0.95, color `{colors.ink}`, manually line-broken into four lines. Add a monospaced section marker '00 / 03' above it in `{colors.ink-muted}`."
- "Design a card: white surface on cream canvas, hairline `{colors.border}` border, 8px radius, 32px padding. Title in Inter 28px weight 500, body in Inter 17px weight 400, `{colors.ink-secondary}`."
- "Build a primary button: `{colors.ink}` fill, `{colors.on-ink}` text, pill radius, 14px 28px padding, Inter 15px weight 500 — hover background to `{colors.primary}`."

---

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