Design study · dark product UI

Quiet interfaces.
Loud craft.

Bento rhythm, glass surfaces, and restrained motion — the default language for SaaS and dev tools.

Explore grid Style library

Composition

Bento as a system

Inspired by Linear, Vercel, and Resend — one grid, many cell weights, zero template fatigue.

Layout

Bento grids that breathe

Asymmetric cells, consistent rhythm, room for product screenshots or data.

Motion

Subtle by default

Micro-interactions that guide — never distract.

Type

Tight hierarchy

Display scale with restrained body copy.

Surface

Glass without gimmick

Low-opacity panels, hairline borders, one accent hue.

Density

Data-forward UI

Dashboards and tables that stay legible at midnight.

48ms

Interaction budget

1.0

Visual noise target

∞

Layout permutations

Method

How clean sites stay clean

Restraint is a feature. These three passes keep the page feeling intentional, not empty.

01

Establish tokens

Color, radius, spacing, and type scale before any components ship.

02

Compose surfaces

Cards, nav, and panels share the same border and blur language.

03

Tune motion last

Entrance, hover, and scroll cues only where they add clarity.

Product shell

Mock UI, real constraints

Placeholder chrome only — enough structure to judge spacing, contrast, and hierarchy before copy lands.

  • Sticky glass navigation
  • Hairline borders at 8% white
  • Single accent gradient
  • Reduced-motion safe animations
“Whitespace is not unused space — it’s the frame.”
Design lab · placeholder voice

Ready when the brief is.

Swap this block for a real CTA. The shell, tokens, and motion are the deliverable.

Return home