A-One Design System

COMPONENT: A-Z Index (consumer-only)
VARIANTS: default | active (letter selected) | disabled (no results for letter)

Vertical alphabet pagination for the Careers Explore page. 26 letters stacked in a flex column, neutral-600 by default, each a 24px minimum hit target. Active letter (filled primary-ink chip, white bold glyph). Disabled letters (neutral-400 ink, cursor not-allowed). Hover changes ink to primary-ink.

1. Default — all 26 letters, none active

Default state: All letters neutral-600 (4.77:1 on white). Hover changes ink to primary-ink. Used on initial page load before any letter is selected.

Structure:

<nav class="az-index">

          <span class="az-index-letter">A</span>

          …

        </nav>

2. With 'D' active — Design selected

Active state: active on the letter element — primary-ink color, bold weight.

Active letter:

<span class="az-index-letter active">D</span>

3. With disabled letters — no careers for those letters

Disabled state: disabled — neutral-400 ink (muted but readable), cursor not-allowed, hover does not change ink or background. Applied when the careers dataset has no entries starting with that letter (Q, X, Z commonly).

Disabled letter:

<span class="az-index-letter disabled" aria-disabled="true" tabindex="-1">X</span>