Eyebrow and index label

Small uppercase tracked metadata — section numbers, years, categories — placed off to one side to give the page a filing-system logic.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

Oversized type needs a counterweight. Tiny tracked labels carrying real information (a section index, a year, a discipline) supply it, and their consistency across the page is what makes an asymmetric layout feel systematic rather than arbitrary.

Implementation

The counter increments per `<section>`, so adding or reordering sections needs no edits.

Dependencies: none

html-css-js

<body class="doc">
  <section class="section">
    <p class="eyebrow"><span class="eyebrow__num" aria-hidden="true"></span> Approach</p>
    <h2 class="t-h1">Fewer things, made properly.</h2>
  </section>
</body>

<style>
.doc { counter-reset: section; }

.section { counter-increment: section; }

.eyebrow {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  opacity: 0.55;
  display: flex;
  gap: var(--space-xs);
}

.eyebrow__num::before {
  content: counter(section, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
}
</style>

Use it when

Section openers, case-study metadata, project index rows, footers.
Anywhere a section number would help a reader hold their place on a long page.

Avoid it when

As decoration with no information — a label reading 'SECTION' is noise.
At sizes below 12px, where the positive tracking makes it harder to read rather than easier.

Accessibility

CSS `content` from a counter is not reliably announced. If the number carries meaning, put it in the DOM.
Uppercase via `text-transform` keeps the underlying text cased correctly for screen readers; do not type it in caps.
Check contrast at the reduced opacity, not at full strength.

Performance

Pure CSS.

Knobs

counter format: Padding for section numbers. Default: decimal-leading-zero
opacity: How far the label recedes. Default: 0.55

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Add uppercase tracked eyebrow labels to each section using a CSS counter for automatic leading-zero numbering. Use --fs-label size, --tracking-caption letter spacing, text-transform uppercase (do not type the source text in caps), tabular-nums for the number, and 0.55 opacity. Mark the generated number aria-hidden and verify contrast at the reduced opacity.