/ system
Studio System
A quiet record of the rules behind the interface: what the studio is made of, why those choices exist, and how they combine in public.
Foundations
Color tokens
Moss for trust and calm, clay for evidence markers and action, cream for paper surfaces, charcoal for ink.
Typography scale
Plus Jakarta Sans carries structural weight, Cormorant Garamond Italic adds editorial tension, Outfit handles body copy, IBM Plex Mono marks metadata.
Spacing system
Generous vertical rhythm with dense micro-labels. Sections breathe, annotations stay compact.
Principles
Evidence, not decoration
The studio borrows from case files, boards, and annotations so every visual move feels like an investigation. The goal is to make readers inspect the work, not merely admire it.
Process before polish
Work, lab, and notes are separated so the audience can see thinking at different levels of maturity: interpreted signals, active experiments, then settled case studies.
Formal structure, human tone
Mono labels and rigid summary blocks create trust, while serif moments and softer surfaces keep the studio from reading like a sterile dashboard.
Components
Buttons, badges, and links
Primary actions use clay so they read like markers in a case file. Metadata stays mono and compact.
Evidence surface
Evidence card
Interface as annotated reasoning
Cards keep the surface calm while labels and borders hint at an ongoing investigation.
Patterns
Work / Lab story frame
01
Problem discovered
02
Why this solution
03
Result / progress
Reading path
Case-study opening
Lead with three questions: what surfaced, why this route, what changed. Only after that should the long-form body go deeper.
Tech stack as evidence strip
Stack items are shown as compact evidence rows: logo, name, and an external arrow. They support the story instead of overpowering it.