Identity system · v2.0 · 2026
The visual and verbal system behind ZAYN.ALE. Use this as a reference when placing the mark, picking type, or writing in the brand voice — whether internally, with partners, or in client deliverables.
01 · The mark
The wordmark is the primary identity: ZAYN.ALE in Mona Sans at its widest cut, extra-bold, all caps, with a single ember period between the two halves. The dot is the load-bearing element of the brand — never alter, replace, or move it.
02 · The palette
Ink and paper carry the page, and they alternate section to section so every new idea starts on a new surface. One accent, ember, marks what matters. Four lane colours each stand for one kind of work and nothing else.
Accent · the only one
Ember
Ember is the brand. It signals the moments of momentum, attention, and action — the spark you want a visitor’s eye to land on. Used sparingly, it always means “this matters.” Used everywhere, it means nothing.
Hot, kinetic, confident. The orange of fire-edge metal, of late-evening sun on brick, of a single line of unread mail.
#FF6B35 on ink6.8:1 AA#B53A0A on paper5.0:1 AAEmber is for
Each service lane has one colour, used for its dot, its chip and its selected state, and for nothing else. The light value sits on ink; the deep value carries text on paper.
Sections alternate down the page. Each one declares its surface, and the navigation inverts to match whatever sits under it.
03 · The typefaces
Four families, four jobs. Mona Sans at its widest cut does the shouting, Bodoni Moda italic adds one or two words of warmth inside a headline, Albert Sans carries everything you read, and Victor Mono labels the data.
Display · Headlines · wordmark · figures
A variable grotesque used at width 125, so headlines read wide and confident without getting louder. Tight tracking, short line height.
Ship fast.
Build to last.
Accent · One or two words per headline
High-contrast italic for a single phrase inside a display headline, set 12% larger so it sits optically level. Never a full line, never body text.
Ship fast, build to last.
Body · Body · navigation · buttons · forms
A clean geometric sans with open shapes that stays readable from 13px captions to 23px leads.
“The best code is the code I didn’t write — every line is a future bug, a future invoice, a future onboarding pain.”
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
Labels · Eyebrows · labels · data
The voice of the engineer in the room. Uppercase, slightly tracked, for anything that should feel measured or precise.
| Role | Where | Size | Line height | Tracking |
|---|---|---|---|---|
| Page title | PageHero h1 | 48–148px | 0.90 | −0.048em |
| Display 1 | .d1 | 40–104px | 0.94 | −0.048em |
| Display 2 | .d2 | 34–76px | 0.96 | −0.045em |
| Display 3 | .d3 | 24–34px | 1.02 | −0.038em |
| Lead | hero lead | 18–23px | 1.50 | 0 |
| Body | body | 17px (16px phones) | 1.55 | 0 |
| Label | .label | 12px | 1.40 | +0.085em |
04 · The tone
Direct, considered, slightly dry. We write like the senior engineer at a small firm: confident enough to skip the hype, honest enough to name what we don’t do, and friendly enough that you’d want to share a coffee with us.
Short sentences. Concrete nouns. No hype words, no "synergy," no "leveraging" anything. If a word would make a software developer wince, cut it. If a phrase only exists because we're afraid of silence, cut it twice.
Numbers, names, and time-bound claims always beat adjectives. "Saved twenty hours a week" lands. "Significantly improved efficiency" doesn't. Where possible, point at the receipts — clients, screenshots, repos.
Confident but never cocky. We name the things we won't do as clearly as the things we will. A small joke against ourselves is always allowed; a joke at the client's expense never is.
05 · Motion
Everything that moves runs on one physical spring. The same stiffness and damping drive the scroll animations, the CSS transitions and the pointer effects, so a button, a toast and a full-screen set piece all settle the same way.
Controls, toasts, the nav: quick, one small overshoot
Large marks and figures: slower, heavier settle
With reduced motion turned on, the dots jump straight to their new place.
Scroll-driven animations always declare where they start, so scrolling back up restores the exact first frame.
An element is moved by one thing only. When an intro and a scroll effect share an element, the intro animates an inner span and the scroll moves its wrapper.
With reduced motion every section renders in its final state, with nothing hidden waiting for an animation that will not run.
Magnetic buttons and tilting cards run only with a mouse or trackpad, never on touch.
06 · The kit
The building blocks, shown live from the site’s own styles. Controls are full pills, containers have large radii, and shadows belong only to paper objects such as the brief.
01 — What I do
Brief · draft
A sheet of paper
Documents the visitor builds or receives, like the brief, sit on the page as paper and cast a soft shadow.
07 · The geometry
A wide, calm page: one content width, a fluid gutter, and generous section padding. There is no fixed column grid; layouts use auto-fitting grids with a sensible minimum, so they reflow without breakpoints.
| Token | Where | Value |
|---|---|---|
| Content width | .wrap | max 1440px |
| Gutter | --gutter | clamp(16px, 4.2vw, 64px) |
| Nav height | --nav-h | 64px |
| Section padding | .section | clamp(96px, 12vw, 176px) |
| Inner-page sections | LabelledSection | clamp(80px, 10vw, 144px) |
| Reading measure | .prose / articles | 62–66 characters |
| Hit area | controls | 40px min, 44px on touch |