The mark
One continuous stroke: a Z stacked on a Z. The three horizontals are the E; the two diagonals are the Zs. Turn it 180 degrees and the point set is identical, which is how the palindrome lives in the shape without a mirror trick. Round caps keep it friendly at the sizes a social feed uses.
Clear space and minimum size
Clear space on every side equals one bar of the mark, the distance between two of its horizontals (x). Nothing sits inside that space: no text, no other mark, no edge of a photo.
Minimum sizes: mark 16 px on screen, 5 mm in print; wordmark 72 px wide; horizontal lockup 120 px wide; stacked lockup 72 px wide. Below 24 px, use the mark alone.
The mono mark exists for one reason: places where only one ink is possible, such as a toolbar icon, a watermark, or an engraving. In color, the mark is ember or it is night on ember. It is never cyan, never a gradient, never outlined.
Color
The estate's accent is cyan, cold and distant like starlight. ZEZ takes the opposite temperature. Ember sits across the wheel from the estate's cyan (hue 24 against hue 190), so it belongs to the same sky yet is unmistakably the warm point in it. It passes AA for text on the night surface and clears the 3:1 bar for marks and large type on white. The deep variant carries text on white; the soft variant is for small marks and pressed states on dark.
| Color | On night #0B0E16 | On white #FFFFFF | Text use | Mark and large type use |
|---|---|---|---|---|
| Ember #E06E2A | 5.91 : 1 | 3.26 : 1 | Night: yes (AA). White: no. | Night and white: yes. |
| Ember soft #F0B48F | 10.68 : 1 | 1.81 : 1 | Night: yes (AAA). White: no. | Night: yes. White: no. |
| Ember deep #9C4812 | 3.08 : 1 | 6.27 : 1 | Night: no. White: yes (AA). | Night: borderline, avoid. White: yes. |
| Mist #DCE6F0 | 15.27 : 1 | 1.26 : 1 | Primary text on dark. | |
| Haze #7E8A9C | 5.51 : 1 | 3.50 : 1 | Secondary text on dark (AA). | Captions on white at 18 px and up only. |
| Ink #F3F7FC | 17.93 : 1 | Headings on dark. |
Neutrals, borrowed from the estate
Void is the estate's page background, night is the ZEZ surface that sits on it, well is a raised panel. Hairlines are mist at 14 percent (edge). Cyan stays the estate's; inside ZEZ it appears only on shared estate chrome such as the Shadow Key portal link, never as a ZEZ accent.
One accent per screen
Ember appears once on any screen: the mark, or the primary action, or the thing that is live right now. If two things want it, neither gets it until one yields. Everything else is drawn in the neutrals. A page with ember in three places is not a ZEZ page.
Type
Two families, both free on Google Fonts, clearly different in job. Familjen Grotesk for display and titles: a grotesk with a little warmth in its curves and a Z that holds its own next to the mark. Atkinson Hyperlegible for body and captions: built for legibility at small sizes, which is what a feed on a phone needs. This page carries no external requests, so where the families are not installed it shows the fallback stack. That stack is part of the system, not an apology.
Fallback stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Load the two families with font-display: swap and the fallbacks sized so lines do not reflow when they arrive.
Numerals rule: every count, price, duration and timestamp is set in lining tabular figures so columns align and totals do not jump when they change. No oldstyle figures anywhere. Weights are 400 and 600 only; 500 is allowed for a title inside a dense list. Sentence case throughout; no uppercase labels except the wordmark itself.
Motion
Motion in ZEZ answers an action or marks an arrival. It never fills silence.
Three durations, nothing else
120 ms for state changes you barely notice (hover, press, toggle). 200 ms for things that open or close in place (menus, sheets, expanding a post). 320 ms for things that arrive or leave the screen (a new clip, a route change). The mark's own entrance is the only exception at 520 ms.
One easing in, one easing out
Everything that enters or changes uses cubic-bezier(0.2, 0, 0, 1): quick to start, soft to land. Things that leave use cubic-bezier(0.4, 0, 1, 1) and take half the time. No bounce, no overshoot, no spring.
What never animates
Text color, font size and letter spacing. Layout width and the position of anything a thumb is about to press. The star field, which is still. Numbers, which change in one step. And the mark never spins, never pulses on a loop, never breathes while idle.
The signature motion
The top Z draws from its start and the bottom Z draws from its end, both at once, both toward the centre. They meet on the middle bar, which is the E. Two halves of a palindrome arriving at the same point: the whole brand idea in half a second. It plays on first open of the app, on the cold-start splash, and when a render finishes. It does not play on every navigation.
.z-top, .z-bottom { stroke-dasharray: 100; stroke-dashoffset: 100; }
.enter .z-top,
.enter .z-bottom { animation: zez-meet 520ms cubic-bezier(.2,0,0,1) both; }
.enter .mark { animation: zez-settle 160ms cubic-bezier(0,0,.2,1) 520ms both; }
@keyframes zez-meet { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
@keyframes zez-settle { from { opacity: .82 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
.enter .z-top, .enter .z-bottom, .enter .mark { animation: none; }
.z-top, .z-bottom { stroke-dashoffset: 0; }
}
With reduced motion on, the mark is simply there. The two paths are the top half and bottom half of the single mark path, each given pathLength 100 so the timing is identical whatever the rendered size.
Sound
Two sounds, both soft at the front and clean at the back. Peak at -3 dBFS, 44.1 kHz, 16 bit, mono. Nothing in ZEZ makes a sound the person did not ask for, with two exceptions: a finished render, and an incoming tip.
D5 (587 Hz) for 0.42 s, A5 (880 Hz) for 0.42 s, then D5 again held and allowed to ring for 1.16 s. A palindrome in pitch: up a fifth and back home. Soft 25 ms attack, a sine with a quiet second and third partial that fade first so the tone rounds off like a struck bar. Exponential tail, with a 60 ms fade so it ends on silence. Plays when a render finishes and on the cold-start splash together with the mark's entrance.
A single D6 (1175 Hz), 4 ms attack, 70 ms decay, silent by 0.3 s. The octave above the signature's home note, so the two sounds are family. Used for a received tip and for a successful publish. Never for errors, which are silent and explained in words. The system volume is respected; ZEZ has no volume of its own.
Do and do not
Do
- Set the name as ZEZ in the mark and wordmark, and as ZEZ in every sentence.
- Use ember once per screen and let the neutrals do the rest.
- Give the mark one bar of clear space on every side.
- Put the mark on night, on white, or in night on an ember disc.
- Say what happened in plain words, with the real number, the real time, the real size.
Do not
- Do not write Z.E.Z., Z-E-Z, zEz or ZeZ, and do not spell it out in speech.
- Do not put the mark in cyan, in a gradient, with an outline, a glow or a drop shadow.
- Do not draw gods, temples, laurels or keys. The estate's Roman names are ideas, not pictures.
- Do not use uppercase labels, exclamation marks, em dashes or emoji anywhere in product copy.
- Do not loop, spin or pulse the mark, and do not auto-play sound outside the two cases above.
Voice
ZEZ speaks like a good studio engineer: plain, warm, specific, never hype.
- Your clip is up. 14 people have seen it so far.Specific numbers, present tense, no celebration.
- The render stopped at 0:42 because the music track ended there. Add 18 seconds of music or trim the script.Errors say what happened and what to do, in that order.
- You have 3 members. Each of them can see everything in this folder.Plain words for who sees what. No feature names where a sentence will do.
- A tip came in: $12 from a member. It is in your balance now.Warm without gushing. The money is stated to the cent and its location is stated.
- Nothing here yet. Write a few lines and the studio will make the first cut.Empty states invite one action. They do not apologize and they do not sell.