Reduce noise
Keep the essential action present. Remove features and decoration that compete with it.
Portfolio design system / v3.0
Quiet
Machines
A visual and interaction language for calm, legible tools that return control to people.
01 / PRINCIPLES
One point of view, three expressions
The work is not connected by a technology or medium. It is connected by a way of handling complexity.
Reveal the mechanism
Show the parts, flow, constraints, and iterations so the system feels understandable.
Protect judgment
Provide evidence and useful friction, but preserve the user's final decision.
- 04
Reuse before replacement. Treat constraints and existing material as design inputs.
- 05
Show the work. Process, tests, failure, and revision carry as much meaning as the final artifact.
02 / COLOR
Material neutrals, functional accents
Warm paper and graphite keep the portfolio tactile. Blue marks utility, green marks growth and reuse, and clay marks intervention or attention.
03 / TYPE
Editorial clarity with technical annotation
Space Grotesk gives ideas a direct, engineered voice. Inter carries longer explanations. Monospace labels behave like part numbers and system notes.
DISPLAY / SPACE GROTESK / 700
Make the system legible.
BODY / INTER / 400
The interface should explain what is happening, why it matters, and what the person can do next.
Annotation / mono / 700
Use for steps, states, measurements, version labels, and short functional metadata—not paragraphs.
04 / COMPONENTS
Surfaces behave like labeled assemblies
Components use solid surfaces, fine rules, restrained corners, and one clear accent. Structure does the visual work.
ACTION
Primary and secondary
STATUS
Compact metadata
DECISION
Decision / reason / tradeoff
Every major choice should reveal its intent and constraint.
05 / BEHAVIOR
Motion explains change
Use movement to show sequence, progress, spatial relationship, or state. Keep it quiet, brief, and removable.
- 01
Default transitions use 150–250ms. Long editorial reveals may reach 800ms.
- 02
Never animate a surface continuously unless it communicates live activity.
- 03
Respect reduced-motion preferences and keep every task usable without animation.
- 04
Write labels as actions or evidence: “View prototype,” “Why it was flagged,” “Version 04.”