The constitution
A working language for making the web feel clear, warm, and alive.
Joyful Brutalist Minimalism treats a page as a working surface: structure is visible enough to understand, editorial warmth invites reading, and technical precision keeps behavior clear.
Show how the thing works, give the content room to speak, and attach one restrained moment of joy to something useful.Back to the browser proof
01 / Principles
Eight tests for what belongs.
These principles are judgments, not a style checklist. Use them to ask whether a choice makes the work clearer, more useful, easier to use, or more memorable.
- 01
Make structure honest
A line, edge, or gap belongs when it clarifies hierarchy, exposes an action, or makes behavior easier to understand.
- 02
Make the work inspectable
Show where important information came from, what state it is in, and how an action changed it. The work should be traceable, not merely confident.
- 03
Let joy do useful work
Joy belongs when it makes something clearer, easier to remember, or more comfortable to use.
- 04
Pair warmth with precision
Let the reading voice be warm and the factual voice be exact. They should support each other without pretending to be the same.
- 05
Keep delight unexpected
A delight is a useful surprise. Give it room to land; when everything is unexpected, surprise becomes the house style and stops feeling surprising.
- 06
Animate to aid understanding
Animation should make an explanation easier to grasp or an interaction easier to follow. The words and structure still carry the meaning without it.
- 07
Design for each medium
Carry the same intent into each medium, then adapt the form to what that medium does well. Agreement matters more than imitation.
- 08
Make it available to everyone
Design for different bodies, devices, connections, and ways of interacting from the start. Access is part of the work, not a fallback.
02 / Foundations
Ordinary materials, used with intention.
The language does not depend on a special effect. Its character comes from giving familiar materials clear jobs.
- 01
Color follows a role
Use one color family to carry action, focus, and emphasis. Let paper and ink do most of the structural work so color can remain a signal.
- 02
Type speaks in two voices
An editorial voice welcomes reading. A compact instrument voice handles location, state, measure, and action. Neither should impersonate the other.
- 03
Space shows relationships
Use proximity for belonging and pauses for real changes in thought. Uneven space is useful when the hierarchy explains why it is uneven.
- 04
Rules explain structure
A line should separate, connect, measure, or expose hierarchy. If it only makes the page look engineered, it has no job.
- 05
Motion supports the explanation
Animation may make an idea easier to grasp or an interaction easier to follow. The words, order, and state must still make sense without it.
03 / Put it to work
Begin with a reason.
A hard edge, a generous pause, or a playful interaction is only as good as the job it does for the person using the page.
- 01
Start with the content
Name what a person needs to understand or do before deciding how the page should look.
- 02
Make the relationship visible
Use position, type, space, and rules to show what belongs together and what deserves attention.
- 03
Choose one useful surprise
Let one detail bring ease, memory, or delight. Give it enough quiet around it to remain unexpected.
- 04
Test ordinary access
Use the page with a keyboard, a narrow screen, zoom, reduced motion, and no JavaScript. These are normal ways of being on the web.