The kit of parts behind everything we make.
A design system is the shared set of colors, type, and components a brand reuses everywhere — so every page, deck, and product looks like it came from the same place. This is ours, in plain language.
What is a design system, really?
Think of it as a recipe book for a brand. Instead of redesigning a button or picking a red from scratch every time, you reach for the one that’s already been decided. The decisions are made once, written down, and reused.
That does three things: it keeps everything consistent (the same red, the same spacing, everywhere), it makes building faster (grab a part, don’t reinvent it), and it makes a small studio look bigger and more trustworthy than its size.
Tokens
The raw ingredients — exact colors, font sizes, spacing values.
Components
Ready-made parts built from tokens — buttons, cards, inputs.
Principles
The taste rules that decide how it all gets used.
Color
Marari runs on a clean white canvas with a single confident red drawn from the logo. Red is an accent — used with restraint, it signals action and energy without shouting.
Limiting the palette is a feature, not a limitation. One accent used sparingly reads as more premium than many colors competing for attention.
Typography
Two typefaces do all the work. Geist — a clean, modern sans — carries everything you read. Geist Mono adds a technical, precise voice for labels and metadata.
A type scale is a fixed set of sizes. Picking from the scale (instead of any size) is what makes pages feel calm and ordered rather than noisy.
Geist
Primary typeface — headlines & body
Aa
Regular · Medium · Semibold · Bold
Geist Mono
Labels, metadata, eyebrows
Aa
Regular · Medium
clamp · -0.04em
Strategy to ship.
34px · -0.03em
What makes us different
22px · -0.02em
Product Development
17px · 1.6 line
We embed with teams to launch products and services, improve how they operate, and build the capabilities to keep going long after we leave.
12px · .16em · caps
Consulting · Design · Education
Components
The reusable parts — each one built from the colors and type above. Pick a part, drop it in; it always looks right because the decisions are baked in.
A component is built once and reused everywhere. Fix it in one place and every page that uses it updates — that’s the real payoff of a system.
Selected work
A compact card for case studies and previews.
Spacing & shape
Consistent gaps and corner radii are the quiet glue of a design. Everything is spaced on a shared rhythm so elements feel related, never random.
When spacing comes from a fixed scale, even a quickly-built page feels deliberate. The eye reads the rhythm before it reads the words.
Principles
Tokens and components are the what. These are the how — the taste rules that keep the system feeling like Marari.
Restraint over decoration
White space is the default. Add an element only when it earns its place — one accent, used sparingly, beats five competing for attention.
Clarity first
Generous type, high contrast, plain language. If a choice makes something harder to read or understand, it’s the wrong choice.
One confident accent
The red is a scalpel, not a paintbrush. It marks the few things that matter — actions, emphasis — and nothing else.
Motion with intent
Animation guides the eye and adds life, never distracts. Calm, slow, and respectful of reduced-motion preferences.
A system that grows with us.
This is a living document — expect it to expand as the brand does. Spotted something, or want to use these parts? Let’s talk.