Neo-Brutal Container
Centred page width with the side gutters (px-(--gutter), 20 → 64 px).
Layout & Theme
20 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Neo-Brutal Section
A page band: vertical rhythm, tone and width.
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).
Neo-Brutal Theme Toggle
The light/dark switch: the navbar's ghost icon key, the moon and sun swapping with a small pop.
Neo-Brutal Motion Toggle
A button that pauses and resumes every ambient loop on the page (WCAG 2.2.2) and remembers the choice: the navbar's ghost icon key (Pause and Play icons), or with showLabel a secondary sm key with text for the footer.
Noir Aurora Container
Centred page width with the side gutters (px-(--gutter)).
Noir Aurora Section
A page band: vertical rhythm, tone and width.
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).
Noir Aurora Theme Toggle
The Night/Day switch for a navbar or footer (a ghost icon button: the sun and moon crossfade with a quarter turn).
Noir Aurora Motion Toggle
A ghost button that pauses and resumes every ambient loop on the page (the curtains, the featured plan's sky, LiveSync, marquees; WCAG 2.2.2) and remembers the choice.
Soft Bento Container
Centred page width with the side gutters (px-(--gutter)).
Soft Bento Section
A page band: vertical rhythm, tone and width.
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).
Soft Bento Theme Toggle
The light/dark switch for a navbar.
Soft Bento Motion Toggle
A button that pauses and resumes every ambient loop on the page (WCAG 2.2.2) and remembers the choice.
Swiss Tech Mono Container
Centred page width with the side gutters (px-(--gutter), 16 → 60 px).
Swiss Tech Mono Section
A page band: vertical rhythm, tone and width.
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.
Swiss Tech Mono Theme Toggle
The light/dark switch for a navbar.
Swiss Tech Mono Motion Toggle
A button that pauses and resumes every ambient loop on the page (WCAG 2.2.2) and remembers the choice.
Preview everything. Take three a day, free.
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.