How to build an accessible Logo in React
The bare mark carries role="img" and a <title> so it is announced as "cascivo"; in a lockup the wordmark is real text, so the mark goes aria-hidden rather than announcing the name twice
When to use a Logo
- Placing the cascivo logo in a header, footer, auth screen or splash
- Needing the mark to repaint with the surrounding data-theme instead of shipping a per-theme image
- Any spot that would otherwise hand-roll the logo SVG or point an <img> at logo.svg
When not to use it
- Rendering an adopter's own brand — this is the cascivo mark, not a generic logo slot; pass your own node to AuthLayout's `logo` or ShellHeader's `brand` instead
- Below 16px — the notch closes optically; use the wordmark alone
- Favicons and app icons, which are static files with their own optical centring (see https://cascivo.com/docs/brand)
Accessibility
Role img, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <img src="/logo.svg" alt="cascivo" />
Prefer: <Logo variant="horizontal" />
currentColor and --cascivo-color-accent only resolve when the SVG is inline, so an <img> cannot follow the theme
Avoid: <Logo variant="mark" style={{ transform: "scaleX(1.4)" }} />
Prefer: <Logo variant="mark" size={48} />
The mark is always 1:1 and never scales on one axis
Avoid: Wrapping the logo in chrome that sets text-transform: uppercase
Prefer: Leave the wordmark lowercase — the component pins text-transform: none
The wordmark is lowercase cascivo; uppercasing it is a misuse of the mark
Example
<Logo />