---
version: alpha
name: "Writer"
website: "https://writer.com"
description: >-
  An enterprise AI agent platform whose marketing site reads like a B2B prospectus rather than a SaaS landing page — pure-black ink on pure-white canvas above the fold, with the brand violet (#a95ef8) reserved exactly for a single word colorization inside the hero headline ("seller", "operator") and the indigo (#5551ff) reserved for the email-subscribe input below the fold. Poppins runs every typographic tier at modest 400-600 weights; the 64px hero h1 with -2px letter-spacing is the loudest moment. Uppercase tracked labels (2px, 13-16px Poppins 500-600) carry every category sub-header — "ENTERPRISE AI PLATFORM", "WRITER AGENTS", "KEY FEATURES" — a corporate-prospectus typographic convention used by Anthropic and a handful of mid-2020s enterprise-AI brands but rare in the broader SaaS category.
seo:
  title: "Writer Design System for React — violet #a95ef8, Poppins, 14 components"
  metaDescription: "Writer's marketing system as a DESIGN.md file. Pure ink on pure canvas, brand violet held in reserve for one word per hero, Poppins across every tier. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Voltage as one word — brand violet appears only as the colorized rotating word inside the hero h1 ('seller', 'operator', 'researcher')"
    - "Uppercase tracked labels — every section opens with a Poppins 11-16px / 500 label at 1-2px tracking, a corporate-prospectus convention"
    - "Ink on canvas above the fold — pure #000000 on pure #ffffff for the hero band, no off-black warmth"
    - "Three-band layout — white editorial body / dark gray IT-and-tech band / black footer; each band carries the same brand violet"
    - "Indigo for forms — #5551ff carries the email-subscribe button below the fold, distinct from the violet hero accent"
  tags:
    - "AI & LLM Platforms"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Writer's marketing site does something almost no other enterprise-AI brand does: it treats the brand voltage as a single colorized word inside the headline rather than as a button fill or a section background. The hero h1 sits at 64px in Poppins weight 500 with -2px letter-spacing — "Your best seller can't be everywhere. Their AI agents can." — and the word "seller" rotates through "operator", "researcher", and other role nouns, each one rendered in the brand violet (#a95ef8). The CTAs beneath the headline are pure ink on pure white with hairline borders; the violet never touches a button on the hero. Where Anthropic ships a single sentence in claret on cream, Writer ships a single word in violet on white — the same restraint move applied to a different chromatic register.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from a strict structural palette — pure ink, pure canvas, a small gray ladder for borders and dividers, an indigo (#5551ff) reserved for the email-subscribe button below the fold, and a violet (#a95ef8) reserved for the hero-word colorization and a handful of inline accent strokes; 11 typography tokens running Poppins from a 64px / 500 display down to 11px / 500 uppercase-tracked labels with monospace as the explicit absence; 5 radius tokens with a binary small-step / pill split; 9 spacing values on an 8px base; and 14 component definitions including the ink-on-canvas primary, the dark IT-band card, the uppercase tracked label, and the email-subscribe input pair.

    Feed this file to an AI coding tool and it reproduces Writer's specific moves: violet reserved for the rotating hero word and never for a button fill, uppercase tracked Poppins labels above every section, ink-on-canvas hero with hairline-border CTAs, a three-band layout (white editorial / dark IT-and-tech / black footer) that returns to violet on each band as a single inline accent. The borrowable move is the typographic prospectus convention — uppercase tracked labels above every section feel deliberately enterprise-coded and carry the B2B positioning without requiring a heavier brand voice anywhere else.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://writer.com"
      title: "Writer — official site"
      description: "Writer's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Writer's primary brand color?"
      answer: "Writer carries two brand colors in distinct semantic roles. The hero-word violet (#a95ef8) is the editorial voltage — it appears as the colorized rotating word inside the 64px h1 ('seller', 'operator', 'researcher') and as inline emphasis text further down the page. The form-action indigo (#5551ff) is the interactive voltage — it carries the email-subscribe button at the bottom of the page and reserved interactive states elsewhere. The two never share a surface: the violet stays inside running text and the indigo stays inside form actions. The split is deliberate and uncommon — most enterprise brands collapse these into one accent."
    - id: "typography"
      title: "What typeface does Writer use, and what should I use as a substitute?"
      answer: "Writer runs Poppins for every typographic tier on the marketing site. Display sits at 64px in weight 500 with -2px letter-spacing, h2 at 40px / 500, h5 at 25px / 500, body at 16px / 400 with 1.4x line-height, and the section labels at 11-16px / 500-600 in uppercase with 1-2px letter-spacing. The brand also references CanelaDeck (a serif display) but it appears only inside a single tagline lockup and is not used elsewhere. Poppins is open-source and freely available on Google Fonts — no substitute needed. If you must substitute, Inter at 95% line-height holds the proportions; for the uppercase tracked labels keep Poppins because the letterform geometry carries the prospectus convention."
    - id: "uppercase-labels"
      title: "Why does Writer use uppercase tracked labels above every section?"
      answer: "The uppercase tracked label at 11-16px Poppins 500-600 with 1-2px letter-spacing — 'ENTERPRISE AI PLATFORM', 'WRITER AGENTS', 'WRITER ACADEMY', 'KEY FEATURES', 'WHY WRITER' — is the page's structural device for marking section breaks. It functions like a section-header in a corporate prospectus or a print magazine: visible enough to anchor the reader, restrained enough not to compete with the 40-64px display headlines that sit beneath it. This convention is rare in SaaS marketing (most brands use display-only hierarchy) but common in enterprise B2B contexts (consulting decks, annual reports) and signals the audience positioning before a single word of content is read."
    - id: "two-band-structure"
      title: "Why does Writer's page invert to dark below the fold?"
      answer: "The page is structured as three vertical bands: a pure-white editorial top (hero + customer logos + 'WRITER AGENTS' product feature) running ink-on-canvas; a dark gray middle band (#27272b background) for 'Your IT and technology teams, on board from day one' carrying lighter gray text and embedded product screenshots; and a pure-black footer band carrying the email-subscribe form and the legal column. The dark middle band is the structural marker for IT / technology positioning — the same content rendered on white would read as another product feature, where on dark it reads as the engineer-and-security audience. The black footer continues the dark treatment without a visible band break."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own enterprise-AI marketing site?"
      answer: "Yes — the file is structured to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Writer's specific moves: ink-on-canvas hero with hairline-border CTAs, the brand violet reserved for the rotating hero word, uppercase tracked Poppins labels above every section, indigo reserved for the email-subscribe input, and the three-band white / dark-gray / black layout. The tokens resolve without invention — every hex, font family, radius, and spacing value is a quoted scalar ready to drop into Tailwind or CSS variables. The borrowable move is the typographic prospectus convention with tracked uppercase labels; the harder discipline is keeping the violet locked to inline text and never letting it leak onto a button fill."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#5551ff"
  accent-violet: "#a95ef8"
  link-blue: "#0000ee"
  ink: "#000000"
  ink-soft: "#242424"
  ink-band: "#333333"
  ink-deepest: "#131315"
  ink-warm: "#1a1a1c"
  canvas: "#ffffff"
  surface-1: "#e4e7ed"
  muted: "#666666"
  hairline: "#d2d4d7"
  hairline-soft: "#bdbdbd"
  shadow-blue: "#3c64fa"

typography:
  display-xl:
    fontFamily: "Poppins, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: "-2px"
  display-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: "-0.8px"
  heading-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: "-0.5px"
  heading-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 31px
    letterSpacing: 0
  body-lg:
    fontFamily: "Poppins, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0
  body-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 21px
    letterSpacing: 0
  button-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "2px"
  label-uppercase-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 21px
    letterSpacing: "1px"
  label-uppercase-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: "1px"
  nav-link:
    fontFamily: "Poppins, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  full: "9999px"

spacing:
  xs: "6px"
  sm: "8px"
  base: "10px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "28px"
  3xl: "40px"
  4xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
    height: "48px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
    height: "48px"
    borderColor: "{colors.hairline}"
  button-subscribe:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "10px 17px"
    height: "40px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "16px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "9px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  hero-word-accent:
    backgroundColor: "transparent"
    textColor: "{colors.accent-violet}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
  label-section:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase-md}"
  card-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "31px"
    borderColor: "{colors.hairline}"
  card-dark:
    backgroundColor: "{colors.ink-band}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "31px"
  text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "0px 25px"
    height: "40px"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    padding: "40px 24px"
---

## Overview

Writer's marketing site treats the brand voltage as an editorial accent rather than as a button fill. **Voltage as a single word.** The hero h1 sits at 64px in Poppins weight 500 with -2px letter-spacing — "Your best seller can't be everywhere. Their AI agents can." — and the word "seller" rotates through "operator", "researcher", and other role nouns, each rendered in the brand violet `{colors.accent-violet}` (#a95ef8). The CTAs beneath are pure ink on pure white with hairline borders; the violet never touches a button on the hero band. Where Anthropic ships a single sentence of claret on cream and Cloudflare gives the entire hero canvas to orange, Writer ships a single colorized word inside a black-on-white headline — the most restrained move of any enterprise-AI brand on the directory.

The chromatic discipline runs deeper than the hero. The page carries two distinct accents in separate semantic roles: the hero-word violet `{colors.accent-violet}` for editorial emphasis, and the form-action indigo `{colors.primary}` (#5551ff) for the email-subscribe button at the bottom of the page. The two never share a surface — the violet stays inside running text and the indigo stays inside form actions. This split is uncommon: most enterprise brands collapse these into one accent. Writer keeps them apart, which lets each color carry a clearer signal (editorial vs. interactive) without competing for the same attention slot.

The supporting typographic move is uppercase tracked labels. Every section opens with a Poppins 11-16px / 500-600 label at 1-2px tracking — "ENTERPRISE AI PLATFORM", "WRITER AGENTS", "KEY FEATURES", "WHY WRITER", "WRITER ACADEMY", "PERSPECTIVES". This convention is rare in SaaS marketing (most brands use display-only hierarchy) but common in enterprise B2B (consulting decks, annual reports), and signals the audience positioning before a single word of content is read. Cloudflare uses Apercu Mono Pro for the same job; Writer uses tracked Poppins, which reads as more corporate and less developer-coded.

**Key Characteristics:**
- Single editorial voltage (`{colors.accent-violet}` — #a95ef8) reserved for the rotating colorized word inside the hero h1 — never appears on a button fill.
- Separate interactive voltage (`{colors.primary}` — #5551ff) carries the email-subscribe button below the fold; the two brand colors never share a surface.
- Pure ink (`{colors.ink}` — #000000) on pure canvas (`{colors.canvas}` — #ffffff) for the hero band — no off-black warmth, no cream undertone.
- Uppercase tracked Poppins labels (11-16px / 500-600 at 1-2px tracking) anchor every section break — the structural device that marks the corporate-prospectus convention.
- Three vertical bands: white editorial top / dark gray IT-and-tech middle / black footer; the brand violet returns inside running text on each band.
- Poppins across every tier from 64px display to 11px uppercase label; CanelaDeck serif appears only on a single tagline lockup.
- Pill CTAs at 48px height on the hero, ink-on-canvas rather than violet-on-canvas; subscribe button switches to indigo only inside the footer band.
- Hairline-only cards: `{colors.hairline}` (#d2d4d7) carries every card outline on the white band; no shadow tier on the captured surface.

## Colors

### Brand

- **Indigo Primary** (`{colors.primary}` — #5551ff): frequency 4 — used as background only. Carries the email-subscribe button at the bottom of the footer band. The interactive voltage, kept locked to form actions.
- **Accent Violet** (`{colors.accent-violet}` — #a95ef8): frequency 4 — used as text only. The rotating colorized word inside the hero h1 ("seller", "operator", "researcher") and as inline emphasis text on the "WRITER AGENTS" section. The editorial voltage, kept locked to running text.
- **Link Blue** (`{colors.link-blue}` — #0000ee): frequency 20 — used on inline editorial links inside body paragraphs. The browser-default link color is intentional — Writer keeps the link rendering visibly traditional rather than restyling to the brand violet.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 70 — the dominant body floor on the white editorial top band. Carries the hero, the customer-logo wall, the agent-features grid, and the inside of every hairline-bordered card.
- **Surface-1** (`{colors.surface-1}` — #e4e7ed): frequency 12 — soft gray inset used for the email-subscribe input fill in the footer and as the hover background on small UI surfaces.

### Text

- **Ink** (`{colors.ink}` — #000000): frequency 705 — the dominant text color across the white band, plus the fill for the hero CTA, the footer background, and every primary heading. Pure black, no warmth.
- **Ink Soft** (`{colors.ink-soft}` — #242424): frequency 3 — secondary text inside dark-band cards. The mid-tone between ink and the dark IT-band fill.
- **Ink Band** (`{colors.ink-band}` — #333333): frequency 10 — the dark gray band background for "Your IT and technology teams, on board from day one." A near-black charcoal that reads as distinct from the pure-black footer.
- **Ink Deepest** (`{colors.ink-deepest}` — #131315): frequency 2 — used inside dark-band callout cards. Slightly warmer than pure black.
- **Ink Warm** (`{colors.ink-warm}` — #1a1a1c): frequency 1 — used inside a single dark-band sub-surface; the deepest charcoal in the gray-band rendering.
- **Muted** (`{colors.muted}` — #666666): frequency 2 — placeholder text color inside the email-subscribe input.

### Hairline

- **Hairline** (`{colors.hairline}` — #d2d4d7): frequency 40 — used as text (20) and border (20). Carries the card outlines on the white band, the muted text on the dark IT band, and the footer-link tone.
- **Hairline Soft** (`{colors.hairline-soft}` — #bdbdbd): frequency 54 — used on dividers and small text surfaces on both bands. Slightly cooler than the structural hairline.

### Decorative

- **Shadow Blue** (`{colors.shadow-blue}` — #3c64fa): frequency 1 — appears only as a faint shadow tint on the rotating-word transition in the hero. Reserved as a motion accent and not used elsewhere.

## Typography

### Font Family

The system runs **Poppins** — a geometric humanist sans freely available on Google Fonts — for every spoken surface. Fallbacks walk `sans-serif`. **CanelaDeck** (a contemporary serif) appears in exactly one place: a single tagline lockup inside a brand mark. There is no other serif tier and no monospace stack — code samples on the page render in Poppins or in an embedded screenshot.

The system also references the WordPress preset palette (`--wp--preset--color--*`) because Writer's marketing site is built on WordPress. Those preset colors (`{colors.shadow-blue}` and the unrendered WP defaults) are not part of the brand voice and never appear on the captured surface.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 500 | 64px | -2px | Hero h1 ("Your best seller can't be everywhere…") |
| `{typography.display-md}` | 40px | 500 | 48px | -0.8px | Section h2 ("Not a tool you prompt. An agent you delegate to.") |
| `{typography.heading-md}` | 25px | 500 | 30px | -0.5px | h5 / sub-section titles |
| `{typography.heading-sm}` | 20px | 600 | 31px | 0 | h3 / card titles |
| `{typography.body-lg}` | 20px | 400 | 32px | 0 | Hero sub-paragraph, lead-paragraph blocks |
| `{typography.body-md}` | 16px | 400 | 26px | 0 | Default running text |
| `{typography.body-sm}` | 14px | 600 | 21px | 0 | Caption rows, footnote text |
| `{typography.button-md}` | 14px | 600 | 20px | 2px | Button label (uppercase) |
| `{typography.label-uppercase-md}` | 13px | 500 | 21px | 1px | Section label ("ENTERPRISE AI PLATFORM", "WHY WRITER") |
| `{typography.label-uppercase-sm}` | 11px | 500 | 18px | 1px | Smaller category label |
| `{typography.nav-link}` | 16px | 400 | 19px | 0 | Top-nav link labels |

### Principles

Display weight stays at 500 across every size — 64px hero down to 25px sub-heading — and bumps to 600 only on smaller card titles and section labels. There is no 700 weight on the captured page. The 64px hero with -2px letter-spacing is the loudest typographic moment; the negative tracking does the work that a heavier weight would normally do.

The button label and the section labels both use uppercase with 1-2px letter-spacing — the typographic device that signals the corporate-prospectus convention. The CTA uppercase at 2px tracking reads as enterprise-coded the moment the cursor lands on it; the section labels at 1px tracking quietly anchor every band of the page. Together they make the typographic identity unambiguously B2B without requiring a heavier display weight.

### Note on Font Substitutes

Poppins is open-source on Google Fonts — no substitute needed. If you must substitute, **Inter** at 95% line-height holds the proportions, but the geometric humanist letterforms in Poppins carry more of the prospectus convention. **DM Sans** is the closest open-source alternative for the display tier specifically. For the unused CanelaDeck serif lockup, **Tiempos Headline** or **Source Serif** are the closest open-source alternatives.

## Layout

### Spacing System

- **Base unit:** 8px and 10px both appear as common rhythms; the system runs slightly off the conventional 4px / 8px module.
- **Tokens:** `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 28px · `{spacing.3xl}` 40px · `{spacing.4xl}` 64px.
- **Section padding (vertical):** ~96px on the hero band, dropping to ~64px between sections below the fold.
- **Card internal padding:** 31px is the dominant card padding (appears 6 times in the captured spacing samples) — slightly off the 32px convention.
- **Top-nav padding:** 9x0px vertical pad on individual nav links, with the bar itself at 16px / 24px overall.

### Grid & Container

- **Max content width:** ~1080px on the editorial body, ~1280px on the agent-features grid and the customer logos.
- **Hero band:** centered ~720px column carrying the section label, h1, two-button CTA stack, and the headshot-product lockup beneath.
- **Agent-features grid:** 2x2 layout pairing "Playbooks", "Connectors", "Voice & style guide", and "Skills" — each card rendered at the same `{component.card-light}` treatment.
- **Customer outcomes strip:** 5-column responsive grid pairing each customer photo with a single outcome stat (70%, 2.4k, 57%).
- **Three-band structure:** white editorial top / dark gray IT band / black footer; each band runs full-bleed with content centered.

### Rhythm

The page alternates between **generous editorial bands** (hero, agent features, outcomes) and **dense lockup bands** (the dark IT band, the perspectives column, the footer). Every section opens with the same uppercase tracked label, which gives the page its consistent typographic rhythm regardless of whether the band is generous or dense. The IT band below the fold is the structural pivot — the visual register switches from editorial-magazine to enterprise-product-marketing the moment the canvas goes dark.

## Elevation

The system has essentially **no shadow tier** on the captured surfaces. Cards on the white band use 1px `{colors.hairline}` outlines and zero shadow; cards on the dark IT band lift off the `{colors.ink-band}` (#333333) floor by ~5 points of lightness — a barely-perceptible tonal step. The hero CTA pill sits flat on the white band with no halo or shadow.

- **Flat (no shadow):** hero, agent-features grid, customer-outcomes strip, IT-band cards, footer — 99% of surfaces.
- **Tonal lift:** the dark IT-band sub-cards (`{colors.ink-deepest}` and `{colors.ink-warm}`) lift by a few points of lightness off the band floor. No shadow.
- **Hairline outlines:** `{colors.hairline}` carries the elevation work on the white band. The dark IT band uses surface-color contrast alone.

## Shapes

The radius scale is **small-step plus full pill**:

- `{rounded.none}` 0px — used only on the rotating-word colorization in the hero (the word itself has no surrounding shape).
- `{rounded.sm}` 6px — small UI surfaces (small chips, internal dropdown items).
- `{rounded.md}` 8px — input field corners and secondary surface chips.
- `{rounded.lg}` 12px — card rounding for the agent-features grid and the customer-outcome cards.
- `{rounded.full}` 9999px — the primary CTA pill (`{component.button-primary}`), the secondary CTA pill (`{component.button-secondary}`), and the email-subscribe button (`{component.button-subscribe}`).

There is no 16-24px middle radius tier. The system is binary — small-step rounding on cards and surfaces, full pill on every CTA. The pill treatment is the warmest surface on the page; the small-step rounding keeps everything else feeling structural rather than playful.

## Components

**`button-primary`** — The signature hero CTA. Pure ink `{colors.ink}` (#000000) fill, white text, fully-rounded `{rounded.full}` pill, 14x24px padding, 48px height. Uppercase label at 14px / 600 with 2px letter-spacing. "REQUEST A DEMO" is the canonical instance.

**`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px `{colors.hairline}` border, fully-rounded `{rounded.full}` pill, 14x24px padding, 48px height. Used for "CONTACT" beside the primary CTA on the hero.

**`button-subscribe`** — Indigo `{colors.primary}` (#5551ff) fill, white text, fully-rounded `{rounded.full}` pill, 10x17px padding, 40px height. The single instance of the brand indigo on the page — carries the "SUBSCRIBE" action inside the footer email form.

**`top-nav`** — White `{colors.canvas}` surface, ink text, 16x24px padding, 64px height. Houses the WRITER wordmark flush left, the product-nav links (Product / Industries / Research / Customers / Resources / Company) center, and the Sign In / Try for free cluster flush right. No bottom border on the captured render — the nav sits flush against the hero canvas.

**`nav-link`** — Transparent background, ink text at `{typography.nav-link}` (16px / 400), 9px vertical padding. No hover surface visible in the static capture.

**`hero-heading`** — Pure ink `{colors.ink}` text on the white canvas, Poppins 64px / 500 with -2px letter-spacing. The h1 carries the full "Your best seller can't be everywhere. Their AI agents can." with the rotating role-noun inside.

**`hero-word-accent`** — Violet `{colors.accent-violet}` (#a95ef8) text at the same `{typography.display-xl}` token. Renders only the rotating role-noun ("seller", "operator", "researcher") — the rest of the headline stays ink. The single editorial application of the brand violet on the page.

**`section-heading`** — Ink text at `{typography.display-md}` (40px / 500). Used for the h2 below the fold ("Not a tool you prompt. An agent you delegate to.", "Your company's DNA, encoded in AI agents.", "Same team. Exponential impact.").

**`body-paragraph`** — Default ink running-text at `{typography.body-md}` (16px / 400) — the workhorse paragraph style on the white band.

**`body-paragraph-muted`** — `{colors.hairline}` (#d2d4d7) text at `{typography.body-sm}` — the secondary copy color on the dark IT band where pure ink would read invisible.

**`label-section`** — Ink text at `{typography.label-uppercase-md}` (13px / 500, 1px tracking, uppercase). Carries every section opener — "ENTERPRISE AI PLATFORM", "WRITER ABOUT", "KEY FEATURES", "WHY WRITER", "PERSPECTIVES", "WRITER ACADEMY".

**`card-light`** — White `{colors.canvas}` surface, 1px `{colors.hairline}` border, `{rounded.lg}` 12px radius, 31px internal padding. The agent-features 2x2 grid uses this card pattern — Playbooks / Connectors / Voice & style guide / Skills.

**`card-dark`** — Dark `{colors.ink-band}` (#333333) fill, white text, `{rounded.lg}` 12px radius, 31px padding. The IT-band feature cards ("Frontier AI, purpose-built for regulated enterprises.", "Works with IT's systems, not against them.", "Streamlined IT approvals, faster rollouts.") use this treatment.

**`text-input`** — Soft gray `{colors.surface-1}` (#e4e7ed) fill, muted text placeholder, fully-rounded `{rounded.full}` pill, 0x25px padding, 40px height. The email-subscribe input inside the footer carries this treatment, paired with the indigo subscribe button to the right.

**`footer`** — Pure black `{colors.ink}` floor, muted-gray `{colors.hairline}` text at `{typography.body-sm}`, 40x24px padding. Houses the product / resources / company / support / legal columns, the email-subscribe form, and the social-link strip. The single pure-black surface on the page.

## Do's and Don'ts

**Do** keep the brand violet `{colors.accent-violet}` (#a95ef8) locked to inline editorial text — the rotating hero word and at most one inline emphasis span elsewhere. Putting the violet on a button fill would collapse the editorial-vs-interactive split that makes the system's chromatic discipline visible.

**Do** keep the brand indigo `{colors.primary}` (#5551ff) locked to form actions — the email-subscribe button and reserved interactive states. The indigo never carries a primary CTA on the hero; that role belongs to the ink-on-canvas pill.

**Do** open every section with an uppercase tracked Poppins label at 11-13px / 500 with 1px letter-spacing. The labels are the page's structural anchor — without them the band rhythm collapses into a generic SaaS landing.

**Do** use pure `{colors.ink}` (#000000) and pure `{colors.canvas}` (#ffffff) on the hero band. Softening to a charcoal or a cream would lose the corporate-prospectus contrast that the section labels depend on.

**Don't** flatten the two brand accents into one. The hero-word violet and the form-action indigo are deliberately separate — collapsing them into one accent (a single violet or a single indigo) would lose the editorial-vs-interactive semantic split that no peer in the enterprise-AI category currently runs.

**Don't** render display headlines at weight 700. The system sits at 500 with -2px letter-spacing on the 64px hero; bumping to 700 turns the editorial dek into a generic SaaS hero and undercuts the prospectus convention.

**Don't** use the WordPress preset colors (`{colors.shadow-blue}` and the unrendered WP palette) as brand accents. They are framework defaults from the WordPress build and not part of Writer's intentional palette.

**Don't** introduce a 16-24px middle radius tier. The system is binary — small-step (6-12px) on cards and surfaces, full pill on every CTA. Adding a middle radius softens the contrast between body chrome and the warm pill surfaces.

## Known Gaps

- **Dark mode:** the captured marketing surface is light-first with one dark middle band. A toggleable theme is not exposed; the product editor itself (the Writer agent surface) ships a separate token set not represented here.
- **Hover and focus states:** the captured static surface carries resting states only. Hover surfaces, focus rings, disabled tints, and error tokens are not visible.
- **Form input validation:** `{component.text-input}` carries the resting state inside the email-subscribe form only. Error and success states live in the live form handlers.
- **Motion:** the rotating-word colorization inside the hero h1 animates continuously, but the spec captures end-state values only. Easing curves, rotation rate, and stagger timing live in the runtime.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Writer agent editor itself (the chat-style agent UI and the document workspace) carries a much richer token set — agent message bubbles, document-edit highlighting, brand-compliance underlines, suggestion chips — that is not represented here.
- **CanelaDeck serif lockup:** the secondary serif family appears only inside a single brand-tagline lockup; its size, weight, and tracking are not exposed as a separate typographic tier on the captured surface.
- **WordPress preset overlap:** the WP-preset palette (`--wp--preset--color--*`) ships with the build but is not part of Writer's intentional palette; those colors should not be referenced as brand accents.