Štochl Discovery · Design System
A bold, physical design language for product discovery work: evidence pinned to a board, sharp edges, hard shadows, 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. Hard offset shadows. The design asserts instead of soothing.
Real-world textures (cork, tape, pins, watercolor) give a hand-made, tactile feel.
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, stat numbers. Small, technical, factual.
Only for hand-written accents (polaroid caption). Use sparingly, one or two words.
Every element and how to use it.
A white stat card with a piece of tape on top and a hard offset shadow. Shows one headline number and a muted label.
strong is the red mono number, span the muted label.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 mono text and sharp corners. Classifies a card by theme or method.
A 16px red pin with a radial highlight and a soft drop shadow.
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.
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.
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 and mono stay sentence case.