Neutral surfaces
Black and pure grey. Navy or blue-tinted backgrounds look cheap.
- Do#010101 canvas, white-alpha glass
- Don’t#060a18, #000b2b, warm greys
Design system
The tokens, components and rules behind zerotransit.in.
Logo
The Zero mark: a planet with an orbit and two trails.
Lockup
Mark and name in Neue Montreal Medium. The mark is 1.14× the type size, with a 0.57em gap, as in the nav.
Zero Transit
Where the mark goes
Use it where “we” appear: our reply, our work, a badge on the founder photo. Never stretch, outline or recolour it outside white, blue or ink.
Colour
Neutral black surfaces, white ink, one electric blue. Blue marks what is ours.
Brand
Signature gradient
Cyan into blue into deep navy-blue, lit from the top left. One angle site-wide.
Surfaces and ink
Light band
The one light surface: the homepage intro band under the hero.
Status
Retired
Navy-tinted tokens from the first build. Still in tokens.css; do not use them in new work.
Type
One family for everything. Medium for headings, Regular for text, tight tracking.
Aa
PP Neue Montreal
Aa
Geist Mono
Fluid scale
Every step is a clamp(). The px column shows this window’s size; resize to see it move.
Text styles
.section-title · step-5 → step-7 · 500 · -0.035em
We build products that ship.
.section-lede · step-1 · ink-2 · 52ch
Websites, apps and Shopify stores, from first prototype to launch.
body · step-0 · 400 · 1.55 · -0.01em
You talk to the people who do the work. We share progress every week, and you own the code from day one.
.mono · step--2 · uppercase · 0.08em
Case study · 2026
Spacing
A 4px base. Sections share one fluid gap so every seam matches.
Layout
Shape and depth
Pills for anything you press. Soft corners for panels.
Radius
Shadows
Shown on grey so they read. On the black canvas, depth comes from light, not shadow.
Motion
Quick start, gentle settle. Reduced motion turns every duration to zero.
Easing
Durations
Buttons
The lit pair is the house CTA. Light both buttons or neither.
Lit pair
Shading, not glow. A lighter top, a deeper base and a bright inner edge. Hover sends a band of light across.
<a class="btn btn--lit" href="/start/">Start a project</a> <a class="btn btn--lit-dark" href="/work/">See our work</a>
Flat pair
The same pair without light, kept as a variant. Switch it on with html[data-exp-buttons="flat"].
On the light band
Older styles
Still on some inner pages. Replace them with the lit pair when you touch those pages.
Links and badges
Links turn blue on hover. Badges are glass pills.
<a class="link" href="…">privacy policy</a> <a class="arrow-link" href="/work/">View all work</a> <span class="badge">Taking new projects</span>
Choice pills
Chips, toggles and segments. Selected is a white fill with dark text.
Cards
Glass panels on black. One blue focal element per card.
<a class="card" href="…"> … </a> <!-- a.card lifts on hover; use .card--hover on a div -->
Forms
Quiet fields that turn blue on focus.
Default, focus, select and error states. Required marks use --blue-text.
Rules
Decisions we have already made. Check here before you design.
Blue marks what is ours
Our reply, our work, what we hand over. One blue focal element per card.
- DoLit blue for the focal element, mark where we appear
- Don’tAll-grey visuals, or blue on everything
Every control is a pill
Buttons, chips, toggles and segments use --radius-pill.
- DoSelected = white fill, dark text
- Don’tRounded rectangles, amber or gold accents
Light, not glow
Raised buttons get shading. Pair buttons sit on the same plane.
- Do
.btn--litbeside.btn--lit-dark - Don’tNeon glow, chunky 3D bevels, one lit and one flat
No eyebrows
Lead with the heading. If a section needs a label, use a real heading.
- Do“Why choose us”
- Don’tWHY US above “Why choose us”
Restraint over metaphor
Add craft inside a clean layout before you reach for a concept.
- DoType scale, light, motion, small drawn panels
- Don’tMetro maps, tickets, departure boards, tilt gimmicks
Metal is a mirror
3D surfaces are near-mirror with hard reflections, never soft and puffy.
- DoChrome: metalness 1, roughness ~0.08
- Don’tSoft gradient “balloon” shading
Contrast
Brand blue is about 3.6:1 on black. Use it for fills, not small text.
- Do
--blue-textfor small blue text - Don’t
--bluefor body-size text on canvas
Voice
We speak as an agency. Plain verbs, active voice, short sentences.
Speak as “we”
Strengths belong to the agency: direct access, client involvement, ownership.
- DoYou talk to the people who do the work.
- Don’tA designer and a developer in one.
- Don’tWe’re a small team.
One short line
Under a card or section title: about ten words, adding what the title doesn’t say.
- DoNo account managers, no middlemen.
- Don’tA 30-word paragraph that restates the title.
Exception: pinned process stages take 2–3 lines.
Simple English
About 70% ASD-STE100. One idea per sentence. Say what happens.
- DoWe send you a demo every week.
- Don’tWe leverage agile workflows to drive visibility.
Who we write for
Non-technical founders in the US and EU. No jargon they would need to look up.
- DoYour store loads fast on any phone.
- Don’tSub-second LCP via edge-cached SSR.