Logo

One component, four services. Each passes its own artwork; the behaviour lives in Azalea.

The lockup and the mark

Azalea's own assets, rendered through the component it exports — the docs site is a consumer of the design system, not an exception to it. If Logo breaks, this page breaks first.

light

dark

The wordmark is a near-black ink that would vanish on the dark ground, so the lockup ships twice. The mark's gradient reads on either, which is why the mark alone is the right choice anywhere small.

Why it is shared

Before this, Ivy, Root and Sage each carried a 63-line copy with the same dark-mode swap logic. When the source artwork was re-cut, that was three separate commits in three repos — the exact cost this removes.

import { Logo } from "azalea";

const IVY = {
  full:     "/ivy-logo-full.png",
  fullDark: "/ivy-logo-full-dark.png",
  mark:     "/ivy-mark.png",
  fullSize: { w: 562, h: 224 },
  markSize: { w: 270, h: 224 },
};

<Logo assets={IVY} name="Ivy" height={26} />
<Logo assets={IVY} name="Ivy" wordmark={false} height={20} />

Why the lockup ships twice

The wordmark is a near-black ink that disappears on the dark theme; the mark's gradient reads on either. Both variants render and CSS picks one, using the same signal the tokens use — so the logo and the palette can never disagree.

Use it when

The full lockup in a sign-in screen or a marketing surface.
The mark alone in a nav bar, a favicon, or anywhere under ~24px.
Passing intrinsic dimensions, so the browser reserves space and the page does not jump.

Reach for something else when

Recolouring the mark. The gradient is the brand; a flat version is a different logo.
Rebuilding it per service — that is the duplication this replaced.
Putting the light lockup on a dark ground and hoping. Use the component.

Assets

Artwork lives in each service's own public/, not in Azalea. A service owns its identity; Azalea owns how identity is rendered. That split is what lets a new service adopt the component without a change here.