Logo

The Zenox and Tellyu brand marks as React components that paint in currentColor.

@zenoxai/ui/components/logo Markdown

function LogoDemo() {
  return <ZenoxWordmark className="h-6" />
}

Usage

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

<ZenoxWordmark className="h-5" />

The artwork is official. Read Brand for colors, clear space and when to use which mark.

Examples

Sizes

Size the wordmark by height and the marks with size-*. One class, never width and height together.

<div className="flex flex-wrap items-end gap-6">
  <ZenoxMark className="size-4" />
  <ZenoxMark className="size-6" />
  <ZenoxMark className="size-10" />
  <ZenoxWordmark className="h-4" />
  <ZenoxWordmark className="h-6" />
  <TellyuMark className="size-7" />
</div>

Accessible name

When the mark is the only thing naming the product, pass title: the SVG becomes an image with that name. Without title it is decorative and hidden from assistive technology.

<a
  href="/"
  className="inline-flex rounded-md p-1 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
>
  <ZenoxWordmark title="Zenox home" className="h-6" />
</a>

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.

ZenoxWordmark

ZenoxWordmark is the full Zenox lockup, with the mark standing in for the O. Its aspect ratio is about 4.9:1, so size it by height and let the width follow. The `h-5` default is an optical match for 16px controls beside it: the letters fill most of the box, where type of the same size reaches only cap height.

Prop	Type	Default
`title`	`string` Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product.	-

ZenoxMark

ZenoxMark is the Zenox signal fan, the brand glyph on its own. Use it where the full wordmark does not fit: a collapsed sidebar, an app loader, a favicon-sized slot. It paints in `currentColor` and defaults to `text-brand-mark`: the brand blue in light mode, white in dark mode. On the topbar or another dark band in light mode, pass `text-topbar-fg`.

Prop	Type	Default
`title`	`string` Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product.	-

TellyuMark

TellyuMark is the mark of Tellyu, the AI layer of the platform. Use it wherever Tellyu is the one speaking (assistant messages, AI-generated content), never in place of the Zenox mark. The box is about 1:1.1, so it reads smaller than a square icon of the same class; size it one step up.

Prop	Type	Default
`title`	`string` Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product.	-