Foundations

ProductMarks¶

Product marks are outline tiles (1 px line-strong, radius-control) with a stroke glyph in the product hue; the hue appears nowhere else except docs headers and the 2 px marker under the active nav tab.

Open in the gallery Source

Do¶

• Write product names as their owners do: hangar, flightdeck, ai-dlc in lower case; Airframe and Spaceport capitalized.
• Use the 30 px mark beside the name in the app header and the hero eyebrow.

Don't¶

• Don't fill the tile with the hue, and don't tint backgrounds, buttons, charts or text with product hues.
• Don't redraw or rotate the glyphs, or set them in a circle.
• Don't use a product hue for status. Orange and red belong to approval and failure.

The nav marker¶

Put the product's hue class on the header (<header class="af-nav af-hue--hangar">). The active tab (aria-current="page") draws a 2 px bar in --pc on the header rule. That bar and the mark are the only places the hue shows in the app.

You provide¶

• The product: airframe, hangar, flightdeck, tower, aidlc or spaceport, as an af-hue--<product> class (af-hue--workspace still works for Tower). It sets --pc, which the mark and the nav marker read.
• The glyph SVG (24 px viewBox) below. The tile sets stroke 1.6, square caps, miter joins, currentColor.

<span class="af-mark af-hue--hangar" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 20 V13 A9 9 0 0 1 21 13 V20"/><path d="M2 20 H22"/><path d="M9 20 V15 H15 V20"/></svg></span>

<!-- lockup: mark + name in the display face + an optional sub -->
<span class="af-lockup"><span class="af-mark af-hue--hangar">…</span>
  <span class="af-lockup__text"><span class="af-lockup__name">hangar</span><span class="af-lockup__sub">Sandbox control plane</span></span></span>