Nora Kim2m ago
mentioned you in Q3 Brand Refresh - “the new type ramp is in, take a look before standup?”
Style explorer
10 hand-built demos · 27-style catalog · zero dependencies
Skeuomorphism
Visual style
Digital objects imitate physical ones: brushed metal, soft depth, controls that look pressable because they look holdable. Affordance is carried by material rendering rather than by flat convention.
Choose when the interface gains from tactile familiarity - media, tools, games - and users should read function straight from form.
Now playing · Polar Static LP
Aurora Fields - Neon Treeline
1:24 / 3:58
Neumorphism
Visual style
One monochrome surface, extruded and inset by twin soft shadows. Components appear pressed into the same material as the page itself; hierarchy comes from light direction, not from color.
Choose when you need a calm, physical control surface - settings, remotes, kiosks - and color must stay out of the way.
Ambient mode
Focus rings are 2px darker outlines
Glassmorphism
Visual style
Frosted layers float above vivid content - blurred, saturated, edge-lit. Depth is literal: you can see the world behind the glass, softly. The blur is progressively enhanced; without it, the card falls back to a solid frosted fill.
Choose when a floating layer must stay connected to the content behind it - notifications, overlays, media HUDs.
Claymorphism
Visual style
Chunky, toy-like volumes in pastel fills, with a double shadow - a soft drop plus an inner light along the bottom edge. Everything looks squeezable, and interaction answers with a spring.
Choose when warmth beats efficiency - habit trackers, kids’ products, friendly onboarding.
Today
3 tasksNeo-brutalism
Visual style
Raw black borders, hard offset shadows, flat saturated blocks, and type that shouts. Honesty over polish - the structure itself is the decoration, and every press is mechanical.
Choose when personality and zero ambiguity matter - event pages, independent publications, tools that reject corporate gloss.
Kabelwerk Hall · Berlin
Raster Night 07
DateFri 14 Mar
Doors23:00
Age18+
Ticket€18
Minimalism
Visual style
Every element earns its place: hairline rules, a single accent, a precise type scale, and whitespace doing the grouping. Feedback stays quiet - 200ms fades, nothing more.
Choose when content must outrank chrome - reading, writing, and reference tools where trust is built through restraint.
The Ledger · Issue 214
Field notes on interface craft
One short letter, every Thursday. What we changed in our UI this week - and the one thing we got wrong.
Maximalism
Visual style
More, but composed: layered type, patterned fields, stickers, and saturated hues arranged around one undeniable focal point. A readability island keeps the copy legible inside the noise.
Choose when the job is to be unforgettable - drops, campaigns, merch, and anything fighting for attention in a crowded feed.
Rotterdam · Van Neli Fabriek
Loop Fair ’25
Forty makers, one warehouse, a few thousand watts. Synths, pedals, modular corners, and a repair bar that fixes what you broke in 2019.
Liquid Glass (web approximation)
Platform material
Translucent controls sit on a living backdrop: blur, saturation boost, and a specular top edge make the interface feel like one continuous optical layer. This is a web approximation - the native material’s true lensing and refraction are not reproduced.
Choose when your product lives on Apple platforms - or borrows their material language - and the backdrop is part of the content.
Web approximation of Apple’s Liquid Glass material - see the catalog. The native material’s lensing is not reproduced here.
Bento Grid
Layout pattern
A 12-column grid of rounded tiles with varied spans. Size encodes priority - the biggest tile carries the most important fact - and DOM order mirrors visual order. The grid reflows from 12 columns to 6 to 2 as the viewport narrows.
Choose when many small facts must scan as one glanceable composition - dashboards, profile pages, status screens.
Now playing
Neon Treeline
Aurora Fields · Polar Static
1:24 / 3:58
Monthly listeners
48,204
+12.4% vs June
Top track
Static Bloom
2:58 · 1.2M plays
Up next
- Halogen Kiss
- Slow Antenna
- Polar Static
Output
Studio monitors
Connected · 48 kHz
Storage
68%
Streak
14 days in a row
Tip
Set a nightly loudness target so late-night listening stops flattening your mixes. Ochrelle will normalize new imports against it automatically.
Spatial UI (2D spatial-inspired)
Interaction paradigm
Elements occupy depth: planes at different translateZ respond to pointer position with restrained parallax - never more than 8px - and hover lifts a card out of the scene. Motion expresses hierarchy, not decoration.
Choose when hierarchy can be physical space - showcases, concept pieces, visionOS-inspired screens.
Now playing
Aurora Fields
Neon Treeline · 1:24
Lyrics
“We drove until the lights ran out, then let the treeline hum.”
Up next
Static Bloom
in 12 tracks · Auto-queue
Move the pointer across the stage - parallax stays under 8px