Brand · Logo

Akku wordmark

The Akku wordmark lockup — the mark (triangular glyph) reads as a stylized "A" and pairs with the custom wordmark. It's the single brand signature across product, marketing, and documents.

On brand surfaces

The wordmark works on all three brand ramps. Recolor via currentColor / fill — never filters.

iris-500 · white mark

coral-500 · coral-950 mark

teal-500 · teal-950 mark

ink · white mark

white · iris-700 mark

iris-50 · iris-800 mark

Clear space

Always reserve X (the height of the mark) of clear space on every side. Nothing — type, other marks, edges — enters this zone.

Minimum sizes

Below these, wordmark legibility breaks down. Use a mark-only variant (forthcoming) for favicons and avatars.

240 px · marketing

140 px · product nav

84 px · min lockup

Don'ts

Keep the mark crisp. Anything that alters color, proportion, or framing breaks the system.

No gradient backgrounds below the mark

No stretching or skewing

No low-contrast tints

No outlines or boxing

Asset

Inline the SVG as a <symbol> and reference it with <use>; recolor via the color property (paths use fill:currentColor).

/* 1. Inline the symbol once per document */
<svg style="display:none">
  <symbol id="akku" viewBox="0 0 210 50">…</symbol>
</svg>

/* 2. Reference anywhere, recolor via currentColor */
<svg class="logo" viewBox="0 0 210 50" style="color: var(--iris-700)">
  <use href="#akku"/>
</svg>

.logo path { fill: currentColor; }