The complete system behind the focus timer that measures output, not hours. A calm, modern identity — obsidian on warm bone, carried by a single inherited accent: the Nozentra orange. A product of Nozentra.
Logo
One mark, three roles. The primary is built from the capital Z inside the name. The dot is always the Nozentra orange — the moment a session completes.
The Z mark
Site, app store, favicon, headers.
Avatar mark
Profile, badge, small circular spots.
Product device
The running timer, reused in-product.
Keep padding ≥ the tile’s corner radius on all sides.
Color
Warm neutrals do the structural work; the Nozentra orange is the single accent — used for one primary action or state per view, never as decoration.
Neutrals
Accent — Nozentra orange
500 is the base. 600/700 for hover/pressed. 200/100 for tints, focus rings and quiet backgrounds. working value — confirm exact Nozentra hex
Functional
Typography
Sora for display and headings — geometric, calm, modern. Inter for body and UI. JetBrains Mono for time and data.
Spacing & Radius
A 4px base unit keeps rhythm consistent. Radii step from tight controls to soft cards.
Elevation
Soft, warm-tinted shadows. Used sparingly — most surfaces sit flat on hairlines; elevation signals interactivity or focus.
Iconography
Line icons on a 24px grid, 1.75px stroke, rounded caps and joins — matching the calm, geometric feel of the marks.
Components
The core UI kit. Built on the tokens above — one accent, generous spacing, hairline structure.
Buttons
Inputs
Controls
Interval capsule
The product motif as a live component.
Motion
Quiet and quick. Motion confirms an action; it never performs. Nothing loops or bounces.
Hovers, toggles, button presses.
Panels, menus, transitions.
Page & modal entrances.
Voice & Tone
Calm, direct, quietly confident. We talk about output and attention — never hustle, guilt, or streaks. Plain words over jargon.
“You produced 132 points across 4 sprints.”
“Time for a break. You earned it.”
“Pick one thing. Start the clock.”
“🔥 Don’t break your 14-day streak!!!”
“Crush your goals and 10× your grind.”
“You wasted 3 hours today.”
Applications
The marks in the wild — favicon, app icon, social avatar and share card.
PomoZentra — Focus
PomoZentra Brand & Design System · v1.0 · A product of Nozentra · Orange shown as #E7642B pending exact brand value.