Štochl Discovery · Design System
A bold, physical design language for product discovery work: evidence pinned to a board, sharp edges, flat solid color, and one loud voice. This page documents the tokens, components, and rules so the system can be reused consistently.
Four ideas the whole system hangs on.
The visual metaphor is a lab wall: findings pinned up, red thread between them, nothing decorative that isn't earned.
Zero border-radius. Flat, solid surfaces. The design asserts instead of soothing.
Physical metaphors — pins, tape, and paper — keep it hand-made and tactile.
Monument Extended headlines. One accent color. Everything else stays quiet.
A restrained core + a muted watercolor wash + a pastel sticky palette. Red is reserved for emphasis, pins, and calls-to-action.
Four voices, each with one job.
Headlines, section titles, role names, buttons, waitlist title. Always uppercase. Letter-spacing 0.02em. Use for anything that needs to be loud.
Paragraphs and descriptions. Weights 400/500/700.
Meta info: dates, companies, labels, tags, footer. Small, uppercase, tracked, factual.
Only for hand-written accents (polaroid caption). Use sparingly, one or two words.
Every element and how to use it.
A white sticky note with a red pin — the same note as the workbench, in a single neutral color.
Charting the gaps between user pain and product value.
A pastel card with a slight rotation and a glossy red pin at top-center.
--r) so the board feels hand-made.A white card pinned at the top-left and top-right corners, used for CV/experience entries.
A dark pill with cream text and sharp corners. Classifies a card by theme or method.
A 16px solid red pin.
A white photo frame with a handwritten caption and a red pin. On the live site it hangs and swings with pendulum physics, and leans toward the cursor.
A dark button with cream Monument text. Sharp corners, no border-radius.
Red and underlined, matching the surrounding text weight.
A red (accent) banner with a white input and dark button. Captures emails in one row.
A dark (ink) card with cream text and a gold link underlined in red.
A boarding-pass-style card for the home base and timezone, with a dashed tear-off stub.
Red is for emphasis, pins, links, and CTA only. Never introduce a second accent color.
No border-radius, ever. Corners stay square to keep the brutalist feel.
Evidence tags are a summary, not a label cloud. Three is the ceiling.
Headlines are always Monument Extended 800 uppercase. Body stays sentence case; meta is uppercase and tracked.