Writer Design System

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.