A design system for A Rough Idea
A Rough Idea is about the relationship between our lives, how we live them, and the containers we build to hold them. Sometimes the only way to explore that relationship, what a new container changes and what it makes possible, is to build the prototype. The practice stands on three pillars: practice, experiments and pedagogy. On Vercel its prototypes are 70 projects, 32 of them public, made over two years in five stacks and four different looks. This is version 2 of its design system, drawn from what they do today, so that they read as one practice.
"The relationship between our lives and how we live them and the containers we build … sometimes you have to build the prototype to explore the relationship and its impact and enablement."
TJ, October 24, 2026
How this guide is organized
Six areas, the same in the top bar of every page. Each area has a few pages, listed down the left; each page lists its own sections under "On this page", on the right. Previous and next, at the foot of every page, walk the whole guide in order.
Who the system serves: the three pillars, the apps under each, the contexts they are used in, and how to use v2.
The visual style guide: the look, color, type, space and layout, corners, icons and the mark.
Every part an app is built from, in light and dark: controls, reading parts and the frame.
How the parts work together: navigation, the five contexts, slideshows, and print.
The writing style guide: voice, US spelling, and the words on buttons, links, labels and status.
What has been decided and what is open, the decision tables, the audit, and the rollout.
The same three levels (areas, pages, sections) are how every A Rough Idea app is organized: Patterns › Navigation.
Review it as slides
Any page becomes slides, one section at a time, in the slideshow's three type sizes. Start with the button beside the light and dark button in the top bar, with Ctrl+Alt+P, or by adding ?mode=presentation to the address.
The arrow keys, Space, a swipe or the arrows in the bar move through the slides; the last slide of a page leads on to the next page, so the whole guide plays as one deck. Escape or Exit ends it, on the page you reached.
Elsewhere
The design canvas: Margin and its variations ↗Version 1, as it was