Noir Aurora Landing page
A complete example page built from the kit's blocks, with every section and its content.
Noir Aurora
A night canvas lit by one northern-lights curtain, with hairline cards and moonlight headlines.
The look
A night canvas lit by one real northern-lights curtain that hangs over the hero and rises from the bottom of the closing panel; every glow, beam and spotlight takes the colour of that sky (ice at the left, aurora green in the middle, iris at the right). Surfaces are near-black hairline cards lit from above, headlines are wide Mona Sans in moonlight silver, and every label, index, figure and date is JetBrains Mono in small capitals. Night (dark) is the default; Day is the same system printed on paper.
Noir Aurora Launch page
A complete example page built from the kit's blocks, with every section and its content.
Noir Aurora Hero
The page opener and its only h1, under the aurora (backdrop={<Aurora />}). stacked (the Noir hero) centres the copy with the product frame rising below it; centered is copy only; split puts the copy beside the media (stacked under lg).
Noir Aurora Navbar
The site header: logo, links and actions, as a full-width bar or a floating pill.
Noir Aurora Announcement Bar
A short announcement: a strip above the navbar (bar) or the hero's glass pill (pill: a glowing live dot, the badge as an aurora "New:" tag, an arrow that nudges, and one BorderBeam lap 1.5 s after load).
Noir Aurora Footer
The site footer on the 12-column grid: brand, text, a mono status pill with a live dot and actions beside the link columns (mono h2 titles in a labelled nav), then copyright, legal links and labelled social icons over a hairline.
Noir Aurora Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Noir Aurora Comparison Table
Plans side by side in a hairline panel: header prices in mono and calls to action, mono group rows, aurora ticks and grey dashes with screen-reader text; the featured column is lifted with an aurora line on its top edge.
Noir Aurora Price List
A services or menu list on hairlines: name and a mono price on a quiet dotted leader, a note and a description under each, in one or two columns.
Noir Aurora Bento Grid
Feature tiles on a 12-column grid.
Noir Aurora Feature Grid
Icon, title (h3) and text items in 2 to 4 columns: on lit cards with a lit icon chip (the first icon in aurora), plain, or between hairline rules under a horizon line.
Noir Aurora Frame
Device chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel, all in a lit glass bezel with an aurora line along the top edge where the sky meets it.
Noir Aurora Product Mock
A data-driven app dashboard for heroes, CTAs and feature blocks: sidebar, title, period tabs, metrics that count up, a chart, share bars, people and a status line, inside a Frame.
Noir Aurora Breadcrumb
Trail of links to the current page; the last item is the current page and the separators are hidden from screen readers.
Noir Aurora Pagination
Page links in mono with previous and next, ellipses for skipped pages and an optional summary.
Noir Aurora Button
Buttons in seven variants and three sizes. primary is the main action, one per block: silver on Night, ink on Day, with an aurora underglow on hover. secondary is a lit control that sits beside it, outline a quiet bordered control, ghost text only (navbar, toolbars), accent aurora green (rare: an action inside product UI), destructive for deleting, link text underlined in aurora.
Noir Aurora Icon Button
Square, icon-only button. label is the accessible name and the native tooltip.
Noir Aurora Button Group
Related buttons in a row or column (role="group"). attached joins them: shared hairlines, outer corners rounded only.
Noir Aurora Metric
A KPI: label, value (type-display tabular-nums, never wraps), a mono delta pill (▲ / ▼) whose colour says good or bad news, and a hint, always stacked so a row of metrics shares baselines.
Noir Aurora Chart
A line, area or bar chart in SVG with HTML mono labels, so text never stretches with the fluid width.
Everything in Noir Aurora
All 91 pieces, category by category.
Keep the pieces you like
Save a favorite or a whole style, and find them in your workspace on any device.