← All UI styles
Mono Noir
Near-black surfaces, one restrained accent, and hairlines that barely catch light.
BorderedminimalMedia productsCreative toolsPremium dark interfaces
Construction · Bordered
No depth at all, but every surface is contained by a drawn line — the border does the work a shadow would do elsewhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Mono Noir style. Dark by default rather than as an afterthought: near-black surfaces separated by faint hairlines, with a single restrained accent used sparingly. Build every surface the
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- dark by default
- faint hairlines
- single restrained accent
- near-black surfaces
What this style refuses
- light backgrounds
- saturated color
- glow effects
- heavy shadows
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#141416#0a0a0bSurface
#1b1b1e#111113Border
#2c2c30#232326Text
#f0f0f2#f2f2f4Muted text
#9b9ba3#98989fAccent
#c8b98a#c8b98aOn accent
#141416#0a0a0bShape and type
Radius4 / 8 / 12 px
Border1px solid
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale11 · 12 · 14 · 16 · 21 · 30 px
Weights400 / 600 / 600
Line height1.5
Tracking0em
Spacing4px grid · roomy
Surfaceflat
Accentunderline
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 16.17:1 light, 17.7:1 dark; secondary text 6.67:1 and 6.9:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Mono Noir
*
* Near-black surfaces, one restrained accent, and hairlines that barely catch light.
*
* One complete product screen, rendered from the token object below —