Workflowy Design System

Workflowy's marketing page is an argument made in negative space. The hero shows a near-empty white card — one bullet labeled "Email Sarah about Q3" and nothing else — floating on a light-gray floor with no sidebar, no toolbar ribbon, no color. The headline above reads "Stop organizing your notes. Start organizing your thoughts." The visual and the verbal reinforce each other: this tool does not add complexity. Where Notion's marketing page shows populated databases and cover photos, and where Obsidian leads with the knowledge graph, Workflowy shows a single indented list on a white rectangle, betting that the right user immediately understands what's being offered.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens built on a cool charcoal-gray base — the dominant tone is #2a3135 used 257 times across text and borders, with the single sky-blue voltage (#49baf2) appearing 9 times as CTA backgrounds and interactive toggles; 10 typography tokens running Open Sans across every tier from 48px hero to 12.6px caption; 5 corner-radius tokens centered on a pill default at 9999px; and 14 component definitions covering the pill CTA, hairline-bordered cards, the pricing comparison panel, and the feature category tabs.

Feed this file to an AI coding tool and it reproduces Workflowy's specific moves: charcoal-gray neutrals instead of black or warm-white, a single sky-blue voltage held for the two most interactive moments on the page (signup and the bullet toggle), pill geometry everywhere buttons appear, and Open Sans weight 700 used once and only once. The one principle worth borrowing with care is the empty-product-screenshot move. Workflowy gets away with a single bullet in the mockup because the product's point is the absence of friction — most SaaS products need to show more to build the case.