#Brand Lockup

Brand Lockup combines the official mark, product name, and an optional description into a stable identity for application headers, authentication entry points, and product navigation.

Live preview

RTLCodeCopyStates

A3S OSIntelligent work system

A3S CloudControl plane

#Usage

Import the complete style bundle or load Brand Lockup on demand.

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

Use a link when the lockup returns to the product home page; use a neutral container when it only identifies the current product. The deployment host provides the approved asset path. This documentation site uses /logo.png.

<a class="brand-lockup" href="/" aria-label="Return to the A3S OS home page">
  <span data-brand-mark aria-hidden="true">
    <img src="/logo.png" alt="" />
  </span>
  <span data-brand-identity>
    <strong data-brand-name>A3S OS</strong>
    <small data-brand-description>Intelligent work system</small>
  </span>
</a>

#Parameters

#States and variants

Use the default size on authentication pages, navigation titles, and spacious start surfaces. Use the compact size in constrained workspace headers. The name may sit directly beside the mark or join a one-line description in an identity column. Enable data-tone="mono" only where the color asset cannot be used.

Brand Lockup does not communicate online, danger, success, or permission state. Do not recolor the logo with operational status colors, crop or stretch it, add a shadow, replace its letterform, or invent new marks for related products. A3S products share the official A3S OS mark and distinguish themselves with the visible name.

#Accessibility

Keep the product name as visible text; never show the logo alone. The mark and image supplement that name, so place them in an aria-hidden="true" region and use an empty alt to prevent duplicate announcements. When the complete lockup is a link, its accessible name should state the destination, such as “Return to the A3S OS home page.” Do not add link or button semantics when it only identifies the current product. A compact layout may truncate a nonessential description but must never hide the product name. The host supplies a correct, approved, cacheable official asset; the component owns sizing, arrangement, and focus presentation.