# Brand

The Zenox and Tellyu marks, their colors and how to place them.

The marks ship as React components in [Logo](/components/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.

```tsx
import { TellyuMark, ZenoxMark, ZenoxWordmark } from "@zenoxai/ui/components/logo"

function BrandMarks() {
  return (
    <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.

```tsx
import { ZenoxMark } from "@zenoxai/ui/components/logo"

function BrandOnTopbar() {
  return (
    <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 `title` when 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.