Header

The navy bar at the top of every aCo page. It carries the brand, the product name, and primary navigation — and nothing else. The header at the top of this page is a live instance.

Anatomy

Brand lockup — the aCo circle mark plus the product name; a small caps line names the system or section.
Primary navigation — right-aligned pill links (see Navigation). The current page is filled raspberry and marked aria-current="page".
Menu button — appears under 44rem, toggles the nav list, and reports its state with aria-expanded.

<header class="pds-header">
  <div class="pds-header__inner">
    <a class="pds-header__brand" href="/">
      <img src="/assets/aco-logo-circle.png" alt="" width="40" height="40">
      <span>Pedantic<small>Design System · aCo</small></span>
    </a>
    <button class="pds-nav__toggle" type="button" aria-expanded="false"
      aria-controls="primary-nav-list">Menu</button>
    <nav class="pds-nav" aria-label="Primary">
      <ul class="pds-nav__list" id="primary-nav-list">
        <li><a class="pds-nav__link" href="/" aria-current="page">Overview</a></li>
        <li><a class="pds-nav__link" href="/foundations.html">Foundations</a></li>
        <li><a class="pds-nav__link" href="/components/buttons.html">Components</a></li>
      </ul>
    </nav>
  </div>
</header>

Rules

Keep the header to brand + primary navigation. Put page-level actions in the page, not the header.

Always precede the header with the skip link.

Don’t

Don’t add a second navigation row, a promotional banner, or a search box to the header unless the product spec calls for it — search has its own component and placement rules.

Accessibility notes

One <header> landmark per page; the brand link’s text names the destination (“home” is implied by position and the product name is the link text).
The logo image is decorative (alt="") because the product name beside it carries the meaning.
On navy, the focus ring switches to amber (--pds-focus-on-dark).