Hairline Noir
Near-black, one ice-blue accent and hairlines drawn with a 0.5mm technical pen.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
Almost black, almost silent. Hierarchy comes from 1px hairlines, careful greys and a single cold blue that only appears where something can be clicked. Type is small, tight and exact. It feels like a well-machined instrument: nothing extra, everything aligned.
Hairline Noir is precision as an aesthetic. The canvas is near-black, surfaces are only a step lighter, and every division is a 1px hairline in a barely-visible grey. A single cold ice blue marks the things you can act on, and nothing else. It borrows from technical drawing, Swiss rationalism and the dark interfaces of professional instruments. Restraint is the point: the page earns trust by refusing to decorate.
Principles
- One accent colour, used only for interactive elements.
- Divide with 1px hairlines, never with background colour or shadow.
- Small, tight type; hierarchy through weight and grey value, not size jumps.
- Align everything to a 4px baseline and a 12-column grid.
- If it doesn't help someone ship, remove it.
Motion
Hairlines draw themselves from left to right in 400ms as each section enters, then the content resolves from a 6px blur. Nothing moves more than 8px; the motion is about precision, not drama.
Do & don't
Do
- ✓ Use 1px hairlines at #1E2024 for every division.
- ✓ Keep the ice blue under 3% of the page area.
- ✓ Set labels as mono paths ('Releases / v2.8').
Don't
- ✕ Don't add shadows or glows of any kind.
- ✕ Don't use a second accent colour.
- ✕ Don't set h1 above 80px.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 360 lines of DESIGN.md in total.
More like this
All SaaS & Bento →
FreeBento Daylight
No. 039A sunlit bento box of product tiles: soft grey canvas, white cells, one confident blue.
Bento Midnight
No. 040Charcoal tiles on a blueprint grid, lit from inside by a single violet glow.
Indigo Clarity
No. 042White space, deep indigo and crisp product screenshots that explain themselves.
Signal Grid
No. 043A dense analytics cockpit: tight grids, tabular numbers and charts that do the talking.
Soft Intelligence
No. 044Calm AI product pages: pearly gradients, a literary serif and a chat window as the hero.
Lime Voltage
No. 067Black, electric lime and huge condensed caps. A startup that wants you to notice.