Design system · Updated 23 July 2026
Raster Design System
Raster is a design system drawn in the lineage of Josef Müller-Brockmann, Wim Crouwel, Total Design, Experimental Jetset, Massimo and Lella Vignelli, and Jacqueline S. Casey.
01The grid
Whole modules, nothing fluid
A 204px module — 184px column, 20px gutter — underpins every Raster surface. Content boxes snap to whole modules during a live resize, so edges step from grid line to grid line. Below 480px a dedicated mobile grid takes over: two fluid columns with three 25px gutters.
02Type on the grid
Everything hangs in the gutter
Raster sets type on the grid, not near it: the text edge sits exactly on the column line, and anything that would break that alignment — bullets, numerals, quotation marks, box borders — hangs in the gutter instead. The guides below are drawn in; they mark the column edge.
- The marker hangs left of the line.
- The text edge never moves.
- Wrapped lines stay flush too.
List markers live in the gutter; every line of text starts on the column edge.
- Numerals hang right-aligned in the gutter.
- Two digits still clear the line.
- The column edge stays clean.
Ordered lists hang their counters the same way — right-aligned against the text edge.
The box bleeds into both gutters; its padding puts the text back on the column.
Contained elements — tables, cards, callouts — extend 20px past the column so their borders rest on gutter lines while the content inside stays aligned.
“Punctuation hangs too — the quote sits in the gutter so the first letter takes the line.”
Opening quotes hang outside the measure; the first letterform, not the quote mark, defines the edge.
Running text never runs wider than three columns — 592 pixels, about 66 characters — no matter how wide the viewport gets. Display lines may take a fourth column; body copy never follows them there.
3 columns · 592px · ~66 charactersThe reading column is a fixed measure on the grid; width is added to the page, never to the paragraph.
04Forms
Quiet fields
Hairline border, ink focus, inline feedback as you type.
One field, one action — the action earns its place once the address is real.
05Selection
Radio, check, switch
One choice. The dot is ink, never a hue.
Many choices; 16px boxes, 3px radius.
On is ink; off is hairline. State moves, layout doesn't.
06Sliders & progress
Thin tracks
2px track, 14px thumb, ink fill.
4px bar; percentage in the label, never inside the bar.
09Dialogs
Ask once, plainly
This clears it from the library. The underlying file stays in the repo.
One question, two actions, no third option.
10Badges & chips
Small states
Outline for recommendations, solid for done, muted for pending.
Technical identifiers set in the mono stack.
11Tables
Rows, not boxes
Hairline rows on the open grid — no cell borders, no zebra fills. The last column right-aligns for numbers.
| Phase | Scope | Weeks |
|---|---|---|
| Strategy | Research, workshop, positioning | 2 |
| Identity | Mark, type, color, guidelines | 3 |
| System | Site, templates, tokens | 4 |
12Workflow cards
The editable pipeline
Process steps rendered as editable cards — dashed frames, a drag handle, and a trailing ghost card signal that the pipeline is customizable, not fixed.
Proposal
Scope, price, and terms from reusable blocks. Text-heavy where it needs to be, scannable everywhere else.
Sign-off
Approval turns the proposal into a live project without re-keying anything.
Feedback
Threaded review pinned to the work itself. Comments resolve into tracked decisions, not lost messages.
Delivery
Approved work packaged for handoff: assets, docs, and status in one place, with an audit trail.
Billing
Invoices and payment schedules drawn straight from the approved proposal, so what was signed is what gets billed.
13Assistant
The quiet colleague, drawn
Every Raster surface can carry an assistant that knows the whole engagement. Suggestions arrive as cards and apply in place; nothing ships without sign-off.
Mostly — one flag. Site design & build is 18% below your usual rate for comparable scopes, based on 14 signed engagements.
Raise site design & build to €26,400?
Also worth a look: two revision rounds are implied but never stated. I can add a revisions clause to CMS & handoff.
14Icons
One weight, one grid
Raster · Design system · Noord & Renato Valdés-Olmos