Skip to content

Noir AuroraMotion

Section Header

Title block for a section: the eyebrow in mono capitals with the index in a small lit box ("01"), the heading in type-display text-display-lg ink-silver (it arrives out of a blur), lead text and actions, aligned start, center or split (on the 12-column grid: title over 8 columns, text from column 9 at the bottom, from lg; stacked below).

Live, interactive React component · dark themeResponsive

About the Noir Aurora Section Header

Title block for a section: the eyebrow in mono capitals with the index in a small lit box ("01"), the heading in type-display text-display-lg ink-silver (it arrives out of a blur), lead text and actions, aligned start, center or split (on the 12-column grid: title over 8 columns, text from column 9 at the bottom, from lg; stacked below). Eyebrow is the small label on its own.

It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

The same piece, drawn for a different look. Open one to compare it live.

Neo-Brutal Section Header

Title block for a section: the eyebrow led by the volt kicker square ("01 — Product": the index in bold ink, an em dash, the eyebrow), the heading (type-display text-display-lg, h2 by default), lead text and actions. split is the kit's usual head: eyebrow across, title on columns 1–7, text and actions on 8–12, bottom-aligned (stacked under lg).

Soft Bento Section Header

Title block for a section: index and eyebrow, heading (type-display text-display-lg), lead text and actions, aligned start, center or split (title left, text right from lg; stacked below).

Swiss Tech Mono Section Header

Title block for a section: the ruled index row ("01 / Product", a hairline that draws in, a mono coord at its right end and "+" crosses at both ends), the heading (type-display text-display-lg), lead text and actions. split is the kit's usual head: title on 7 columns, text from column 9 (stacked under lg); center breaks the pattern.