COMPONENTS / NAV

Nav

Site header: wordmark left, mono links center-right, theme control at the end. Sticky, painted on --bg, closed by a hairline. No hamburger — the link set is kept small enough to wrap on a phone.

VERSION1.0.0

TOKENS8 CONSUMED

CONTRASTAA / AAA

DEPENDENCIESNONE

01 / LIVE INSTANCES — ALL STATES

THE PAGE HEADER ABOVE IS THE LIVE INSTANCE — SPECIMENS BELOW ARE STATIC

DEFAULT — CURRENT PAGE MARKED

CASEWORK MODE: LIGHT

HOVER (FORCED ON "SYSTEM")

CASEWORK MODE: LIGHT

FOCUS-VISIBLE (FORCED ON "SYSTEM")

CASEWORK MODE: LIGHT

DISABLED / LOADING / ERROR / EMPTY: N/A — NAVIGATION EITHER EXISTS OR DOES NOT. A LINK YOU CANNOT USE IS A LINK YOU REMOVE.

02 / ANATOMY — EXPLODED VIEW

01 BAR
STICKY · --bg FILL · HAIRLINE BELOW · MIN-HEIGHT 56PX

CASEWORK

02 WORDMARK
--font-mono · --t1 · 500 · LINKS HOME

03 LINK SET
--fg-muted · CURRENT = --accent VIA ARIA-CURRENT

INDEX SYSTEM COMPONENTS

MODE: LIGHT

04 THEME CONTROL
HAIRLINE BUTTON · PERSISTS TO LOCALSTORAGE

FIG. N-01 — GAP --s6 BETWEEN GROUPS. Z-INDEX 50: ABOVE CONTENT, BELOW MODALS.

03 / TOKENS CONSUMED

PROPERTYTOKENVALUE

FONT--font-mono / --t112PX · TRACK .08EM

SURFACE--bgOPAQUE — NO BLUR

RULE--hair1PX BOTTOM

LINK--fg-muted#6C6A64

LINK / HOVER--accent#EF4E0B

LINK / CURRENT--accentARIA-CURRENT

GAPS--s624PX

DURATION--d1 / --ease120MS

04 / CODE — COPY-READY

<header class="site-header">
  <div class="site-header__row">
    <a class="wordmark" href="/">CASEWORK</a>
    <nav class="site-nav">
      <a href="/" aria-current="page">INDEX</a>
      <a href="/system">SYSTEM</a>
      <a href="/components">COMPONENTS</a>
    </nav>
    <button class="theme-btn" data-theme-toggle>
      MODE: LIGHT
    </button>
  </div>
</header>

/* CSS — components.css / NAV */

05 / RESPONSIVE BEHAVIOUR

≥1024ONE ROW: WORDMARK / LINKS / THEME.

640–1023UNCHANGED — THE SET IS SMALL BY RULE (≤4 LINKS).

<640ROW WRAPS; LINKS KEEP --s2 BLOCK PADDING FOR 44PX TARGETS. NO HAMBURGER — FEWER LINKS INSTEAD.

06 / ACCESSIBILITY

ELEMENT<HEADER> + <NAV> LANDMARKS — FREE SCREEN-READER SHORTCUTS.

ARIAARIA-CURRENT="PAGE" ON THE ACTIVE LINK — IT IS THE STYLE HOOK TOO.

FOCUSDOM ORDER: WORDMARK → LINKS → THEME. GLOBAL RING.

CONTRASTLINKS 5.2:1 AA · CURRENT 3.5:1 + ARIA — NEVER COLOR ALONE.