Bento Midnight
Charcoal tiles on a blueprint grid, lit from inside by a single violet glow.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A dark charcoal page laid over a faint engineering grid, with product tiles that glow softly from within. Each tile is a window onto one capability, separated by deep shadows and hairline edges. Late-night, focused and built for people who live in their editors.
Bento Midnight is a bento grid at 2am: charcoal tiles on a near-black canvas with a faint blueprint grid underneath, lit from within by a single violet glow. It borrows from code editors in dark themes, engineering drawing sheets and modern developer-tool marketing. Each tile shows one capability as a real UI or code fragment; depth comes from inset shadows and hairline edges rather than colour. It should feel precise, quiet and nocturnal.
Principles
- Depth through light, not colour: inset shadows and lit edges.
- Violet is the only glow; one lit element per viewport.
- Every tile holds real UI or real code, never decoration.
- Mono labels everywhere; they read as metadata.
- Keep the grid visible at 4% so the page feels engineered.
Motion
A soft violet spotlight follows the cursor across the bento, lighting the border of whichever tile it is over. Tiles fade up 12px in a 70ms stagger as they enter.
Do & don't
Do
- ✓ Use Geist Mono labels as metadata above tile titles.
- ✓ Show diffs, code and tiny charts inside tiles.
- ✓ Keep the grid background visible but faint (4%).
Don't
- ✕ Don't use light-mode screenshots.
- ✕ Don't add gradients to tile backgrounds.
- ✕ Don't use more than one violet button per viewport.
+ 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 — 364 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.
Hairline Noir
No. 041Near-black, one ice-blue accent and hairlines drawn with a 0.5mm technical pen.
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.