Brand
The Zenox and Tellyu marks, their colors and how to place them.
The marks ship as React components in Logo. They are the official artwork,
inlined as SVG that paints in currentColor, so one asset serves a light header, the dark
topbar and a hover state.
<div className="flex items-center gap-10">
<ZenoxWordmark className="h-8" />
<ZenoxMark className="size-10" />
<TellyuMark className="size-11" />
</div>The marks
| Component | What | Use |
|---|---|---|
ZenoxWordmark |
The full ZENOX lockup, with the signal fan as the O. About 4.9:1. | Headers, sign-in, documents. Size it by height (h-5). |
ZenoxMark |
The signal fan alone. | Collapsed sidebars, loaders, favicon-sized slots. |
TellyuMark |
The mark of Tellyu, the AI layer of the platform. | Wherever Tellyu speaks: assistant messages, AI-generated content. Never in place of the Zenox mark. |
Colors
The marks default to text-brand-mark, so they need no color class in most places.
| Context | Class | Light | Dark |
|---|---|---|---|
| Default, on any surface | text-brand-mark |
#1f5b85, the brand blue | #ffffff |
| On the topbar and other dark bands in light mode | text-topbar-fg |
#fcfcfc | #fcfcfc |
| Monochrome, low emphasis | text-text-secondary |
#4a5462 | #a8acb3 |
In dark mode the marks are white, never the lighter action blue (text-primary is #4a9dd4
there). The same applies to anything that stands for the brand rather than for an action: a
product icon next to the mark, a brand illustration. Interactive elements keep text-primary.
The light brand blue, --brand-accent (#acdffe), is an accent for illustrations and highlights.
Do not set text in it on a light surface: it does not reach readable contrast.
<div className="flex h-12 items-center gap-3 rounded-md bg-topbar px-4 text-topbar-fg">
<ZenoxMark className="size-6" />
<div className="flex flex-col leading-tight">
<span className="text-xs font-semibold tracking-wider">ZenoX</span>
<span className="text-xs text-topbar-muted">Vydar CTI</span>
</div>
</div>Rules
- Do not redraw, stretch, rotate or recolor parts of a mark. Size it with one class.
- Leave clear space around a mark at least as wide as the fan’s height.
- Give the mark an accessible name with
titlewhen it is the only thing that names the product (a home link with no text). Omit it when visible text beside the mark already does. - Product names are text, not artwork: write “Vydar” beside the Zenox mark in the interface font.