#Brand Lockup

Brand Lockup keeps a product mark, name, and optional description aligned across application headers, authentication surfaces, and product navigation.

npm install @a3s-lab/ui@0.3.0

<a class="brand-lockup" href="/" aria-label="A3S OS home">
  <span data-brand-mark aria-hidden="true">A3</span>
  <span data-brand-identity>
    <strong data-brand-name>A3S OS</strong>
    <small data-brand-description>Agent Factory</small>
  </span>
</a>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Import the complete A3S bundle or the split Brand Lockup entrypoint.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/brand-lockup.css";
@import "@a3s-lab/ui/styles/a3s.css";

Use an anchor when the lockup navigates home and a neutral container when it only identifies the current product.

<a class="brand-lockup" href="/" aria-label="A3S OS home">
  <span data-brand-mark aria-hidden="true">A3</span>
  <span data-brand-identity>
    <strong data-brand-name>A3S OS</strong>
    <small data-brand-description>Agent Factory</small>
  </span>
</a>

#Parameters

#States and variants

The name may sit directly beside the mark when no description is needed. Use data-size="sm" in dense workspace headers. Override --brand-lockup-accent only with an approved brand token; keep operational state colors out of product identity.

#Accessibility

Keep the visible product name in text. Mark decorative monograms and logos with aria-hidden="true"; if the whole lockup is a link, give the link a destination-specific accessible name. Do not repeat the product name in both the mark and the accessibility tree.