Vibe Design Reference v1

Home / Aesthetics

Chapter 01 · 16 entries

Design Aesthetics.

Design aesthetics are the visual language of a website — the overall "vibe" and personality. When you look at a website and think "that looks futuristic" or "that feels premium", you're reacting to its aesthetic. Understanding these styles lets you describe exactly what you want to an AI.

Frosted-glass panels over vivid gradients. Backdrop-filter blur, semi-transparent fills.

Soft, monochromatic UI where elements push out of the surface via dual shadows.

Raw, ugly-on-purpose. Thick black borders, primary colors, system fonts, tilted boxes.

Whitespace as design. One typeface, monochromatic palette, strict hierarchy.

Varied-size compartments like a Japanese lunchbox. CSS Grid with span tricks.

Near-black backgrounds, one electric accent, sparing glow. The Vercel/Raycast feel.

Hot pink, cyan, lime. Sparkles, chrome text, the energy of the early internet.

Inflated, puffy 3D UI made of multi-layer shadows and candy colors.

Aurora / Mesh Gradient

Soft animated color blobs blending into atmospheric backgrounds. The 2025 SaaS look.

Cyberpunk / Synthwave

Neon vanishing-point grid, retro sun, HUD overlays. 80s-future revival.

Editorial / Magazine

Drop caps, column rules, folio numbers, paper-warm background.

Pastel marble, Greek bust, chromatic shadow type, Japanese subtitles.

80s Italian movement: terrazzo dots, zigzags, hard offset shadows, clashing color.

Swiss / International Style

12-column grid, Helvetica, one red accent. Toggle the grid overlay.

Liquid / Goo Effect

SVG filter that melts neighboring blobs and buttons into one liquid shape.

Sketch / Hand-drawn

Wobbly borders, handwriting, SVG underline scribbles. The Excalidraw feel.