Logo

Logo renders the brand mark, with the wordmark as an option. It is chrome, not content. The menubar and the sidebar are its only consumers, and both pass size={32}.

import { Logo } from "@haloid/azucar/logo";

It is a named export, not a default export, unlike the other components in this section.

<Logo size={32} />

size is the pixel box of the mark and the only scale control. The wordmark has no size of its own. It follows size at 0.75, so the pair stays in proportion at any value.

The wordmark

The wordmark is the one place where MD Primer appears. All other text in azucar is Instrument Sans. The wordmark is semibold, uppercase, and widely tracked. None of that is configurable.

The wordmark also moves the accessible name. The mark carries alt="Haloid" when it stands alone, and an empty alt when the wordmark is present. The name is announced once either way.

API

interface Props {
  size?: number;          // default 16; px box for the mark, and the wordmark's scale
  withWordmark?: boolean; // default false
}

There is no className and no color control. The mark is a fixed SVG (/brand/logo1.svg) and the wordmark paints in foreground. public/brand/ also holds a dark-mode mark that this component does not use. azucar is light mode only.