Design System
A shared system for how HAAM looks, behaves, and sounds.
A digital product is not just pages and components. It is a system of decisions. This page acts as a shared foundation for haam.co and related projects.
Principles
The rules behind the surface
The goal is consistency without rigidity, and clarity without losing character.
Clarity over clutter
Interfaces should make the next move obvious. Decoration is welcome only when it sharpens the experience instead of slowing it down.
Expressive but restrained
HAAM can be playful, weird, or alive, but it should still feel intentional. Character without chaos.
Premium without stiffness
High standards do not require corporate coldness. The system should feel polished, direct, and human.
Systems over one-off decisions
If a pattern is useful twice, it should probably become a reusable rule instead of a one-time exception.
Tokens
The reusable core
These are the decisions that keep interfaces coherent across pages, experiments, and future products.
Color
Indigo 600 as the anchorCyan and yellow for liftSlate 950 for dark mode depthHigh contrast by default
Typography
Sora, sans-serifBold tracking-tight headlinesLight, readable body copyUtility labels in uppercase system style
Spacing + shape
max-w-5xl and max-w-6xl page containersrounded-2xl and rounded-3xl cardsrounded-[2.25rem] hero shellsborder-double as a recurring signature
Motion
--dur-hover: 100ms--dur-reveal: 250ms--dur-screen-enter: 300msEase curves tuned for quick feedback
Patterns
Not just how things look
The system should explain how the interface behaves, how the copy sounds, and how recurring elements stay recognizably HAAM.
UI patterns
- Buttons feel tactile, direct, and obvious about hierarchy.
- Cards use borders and subtle tinting instead of heavy chrome.
- Navigation favors memorable labels and discoverability over generic menus.
- Forms should feel lightweight, readable, and respectful of attention.
Voice and tone
- Direct
- Human
- Sharp
- Not corporate
- Confident without fluff
The voice should feel like a thoughtful founder talking plainly, not a committee trying to sound expensive.
Usage
One source of truth, multiple outputs
This system exists to support haam.co now and related digital projects later. The ambition is to build a coherent ecosystem, not a stack of disconnected pages.