Neo-Brutal Badge
A short mono-caps pill with an ink outline.
Badges & Small Elements
31 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Neo-Brutal Status Dot
An ink-outlined dot (volt for success, cobalt for accent and info, tomato for danger) with optional text; pulse widens a volt ring for live states (a data-loop, off under reduced motion and when paused).
Neo-Brutal Avatar
Photo or initials in an ink-outlined circle; the initials (display face, bold) sit on a volt, lilac, tomato or cobalt-100 tint picked from the name, behind the photo, so a broken image still reads.
Neo-Brutal Kbd
Key caps: mono, caption-sized, ink-outlined on a 2 px key edge. keys renders a combination, each key in its own cap (nested <kbd>).
Neo-Brutal Icons
Icon is the base: a 24 × 24 line SVG in currentColor with round caps and joins; the stroke reads --icon-stroke, which this kit sets to 2.2 (3.2 inside a tick).
Neo-Brutal Logo
Brand mark and name, linking home.
Neo-Brutal Code Block
CodeBlock is a code panel that stays on the ink set in both themes: a paper-2 bar with a mono cell label (filename bold, language at the end) and a copy key, optional line numbers and marked lines (a volt wash with a volt bar at the start); long lines scroll inside the panel, which is a focusable region named by the filename.
Noir Aurora Badge
Short label or status in a pill. size="sm" without a dot is a mono capital label ("Most popular", "40+ sources", "Queued"); md badges and sm badges with a dot are sans.
Noir Aurora Status Dot
A small dot with optional text: accent and success glow aurora green, info is ice, warning sun, danger ember, neutral a grey offline dot. pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).
Noir Aurora Avatar
Photo or initials in a circle; the initials sit on a night tint picked from the name, lit from the top left with a ring in that tint's sky colour, and behind the photo so a broken image still reads.
Noir Aurora Kbd
Keyboard keys as small lit caps in mono. keys renders a combination, each key in its own cap (nested <kbd>).
Noir Aurora Icons
Icon is the base: a 24 × 24 line SVG in currentColor, round caps and joins, stroke width from --icon-stroke (1.6 in Noir); the Star is filled.
Noir Aurora Logo
Brand mark and name, linking home.
Noir Aurora Code Block
CodeBlock is a sunken code panel (bg-well) with a mono filename label, a language badge, optional line numbers, marked lines (an aurora edge and a soft green wash) and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.
Soft Bento Badge
Short label or status as a pill.
Soft Bento Status Dot
A coloured dot with optional text; pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).
Soft Bento Avatar
Photo or initials in a clay circle; the initials' candy tint is picked from the name, and they sit behind the photo so a broken image still reads.
Soft Bento Kbd
Keyboard keys as small clay caps in DM Mono. keys renders a combination, each key in its own cap (nested <kbd>).
Soft Bento Key Cap
One big clay key seated in a pressed socket, with small key chips below: the picture for a security or privacy tile.
Soft Bento Icon Chip
The candy clay icon chip: a small moulded square holding one icon, in a candy tint, sky, rose, brand or the butter pop.
Soft Bento Icon Tray
A pressed tray of icon chips seated in wells, six across on phones (the first 24 show) and eight from sm: the picture for an integrations or live-sync tile.
Soft Bento Icons
Icon is the base: a 24 × 24 line SVG in currentColor, stroke width from --icon-stroke (1.8 in Soft Bento), round caps and joins.
Soft Bento Logo
Brand mark and name, linking home.
Soft Bento Code Block
CodeBlock is a code panel with a filename or language label, optional line numbers, marked lines and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.
Swiss Tech Mono Badge
Short mono caps label or status on a 2 px-cornered tag. accent is the lime tag ("New", "Most popular", "Save 15%"); neutral solid is ink ("Live").
Swiss Tech Mono Status Dot
A dot with mono caps text; pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).
Swiss Tech Mono Avatar
Photo or initials on a square tile; the initials' look (ink, haze or outline, never lime: lime means selected) is picked from the name, or set with the kit look prop, and they sit behind the photo so a broken image still reads.
Swiss Tech Mono Kbd
Keyboard keys in mono caps. keys renders a combination, each key in its own cap (nested <kbd>).
Swiss Tech Mono Icons
Icon is the base: a 24 × 24 line SVG in currentColor, a 1.5 px hairline with square caps and mitred joins (--icon-stroke retunes it).
Swiss Tech Mono Logo
Brand mark and name, linking home.
Swiss Tech Mono Code Block
CodeBlock is a code panel with a filename or language label, optional line numbers, marked lines and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.
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.