Home Glassmorphism Skeuomorphism Neumorphism Claymorphism Minimalism Maximalism Brutalism Liquid Glass Spatial UI Terms of Use Privacy Policy
Design Style Catalogue

Nine interface styles, shown as full working pages.

Pick a style from the nav above to open a complete page built entirely in that language — real navigation, hero, content sections and footer, not an isolated component.

09Styles catalogued
01Page per style, in full
100%Responsive down to mobile

Browse the catalogue

Each card opens the corresponding style. Use the nav bar to jump between them at any time.

01

Glassmorphism

Frosted, translucent panels over a saturated gradient field.

View page →
02

Skeuomorphism

Interfaces modeled on real material — leather, brass, stitched texture.

View page →
03

Neumorphism

Soft, extruded monochrome surfaces with no borders.

View page →
04

Claymorphism

Rounded, puffy shapes with thick, tactile drop shadows.

View page →
05

Minimalism

Restraint as the system — whitespace, quiet type, one accent.

View page →
06

Maximalism

Dense layouts, clashing color and pattern used deliberately.

View page →
07

Brutalism

Raw structure, thick rules, zero border-radius, monospace type.

View page →
08

Liquid Glass

Saturated, refractive glass with slow, ambient color motion.

View page →
09

Spatial UI

Layered, depth-first panels with perspective and parallax.

View page →
Every demo page uses fictional product names and content — they exist only to show each style in a realistic layout, not to represent real products.
Aura

Weather that feels as light as the sky.

Aura layers frosted glass panels over a live gradient sky, so every reading feels part of the atmosphere it's describing.

21°
Ludhiana, Punjab — Partly cloudy
18°Wind
64%Humidity
2UV Index

Every panel is glass, because forecasts should feel like part of the sky, not a report about it.

Live gradient sky

The background shifts with real conditions outside your window, not a static illustration.

Layered depth

Panels stack with soft blur so the most urgent reading always sits closest to you.

Quiet alerts

Severe weather notices surface as a single frosted banner, never a wall of red text.

Ledger

Your desk, digitized down to the grain.

Ledger recreates the calculator, notebook and switches you already know how to use — stitched leather, brass hinges and all.

128.50
7
8
9
÷
4
5
6
×
1
2
3
0
.
=
+

Every control looks like the object it replaced.

Preferences

Ink shadows
Page-turn sound
Brass accents

Contacts card

A rolodex-style card flips in place, complete with a cardstock texture and a soft drop shadow beneath each tab.

Bookmark ribbon

A woven ribbon marks your place in the ledger and casts a faint shadow onto the page beneath it.

Soft

Music that doesn't shout to be heard.

Soft trades borders and color for light and shadow — every control looks pressed into, or raised out of, the same calm surface.

Late StaticHalcyon — Field Recordings

One surface, two states: raised or pressed.

Low-contrast focus

Nothing fights for attention, so the music stays the point.

Physical controls

Buttons look genuinely pushed in when tapped, not just recolored.

Shadow-only hierarchy

Importance is shown with depth, never with a louder color.

Puffin

Learning that's squishy, bouncy, and a little silly.

Puffin turns every lesson into a soft, rounded world kids want to poke at — thick shadows make everything feel touchable.

Three things kids notice before parents do.

Playful

Every shape is rounded, nothing has a sharp edge to bump into.

Friendly

A pastel palette keeps the mood light without feeling babyish.

Bouncy

Buttons sink down when pressed, like real clay would.

Ori
Portfolio — 2026

Less noise. More signal.

Ori is a design studio's homepage that trusts its own work — no hero illustration, no gradient, just the projects and enough space to read them.

Selected work
Nordwell
Brand identity2026
Field Journal
Editorial site2025
Halcyon
Product design2025
Loam Coffee
Packaging2024

"We remove until the work is the only thing left standing. That restraint is the whole craft."

LOUD CO.
New drop live now

TURN IT
UP TO 11

Clashing color on purpose. No quiet corners, no apologies — this is a streetwear drop, not a museum wall.

NEON HOODIE

$68

CLASH CAP

$34

RIOT TEE

$42

VOLT SOCKS

$18
RAW.CO
// STUDIO — EST. 2026

NO ROUNDED CORNERS. NO APOLOGIES.

RAW.CO builds interfaces that show their structure instead of hiding it — thick rules, hard grids, and type that does the work decoration usually does.

01

GRID FIRST

Every layout starts as a visible grid — the seams stay on show.

02

TYPE AS UI

Monospace, uppercase, no ornament — labels do the styling.

03

TWO COLORS

Black, off-white, one accent. Gradients are not on the table.

WORK WITH US

Fluid

Motion made of light.

Fluid's interface refracts the color moving behind it, so no two moments on screen look quite the same — glass that behaves like liquid.

Ambient refraction

Color fields drift continuously behind every panel, so the glass always looks alive rather than static.

Depth through blur

Foreground panels stay sharp while background color dissolves into soft, saturated light.

Specular edges

A thin bright rim on each panel sells the sense of real, curved glass catching light.

Depth

An interface with somewhere to stand.

Depth arranges content on real layers in space instead of a flat page — hover the stack below to feel the parallax shift.

Background plane

Ambient context sits furthest from the viewer.

Midground plane

Secondary actions live one layer closer.

Foreground focus

The task at hand always sits nearest to you, with its own shadow and highlight to sell the distance.

Layered hierarchy

Depth replaces size as the main signal for what matters most.

Ambient environment

A perspective grid grounds every layer in a shared sense of space.

Responsive parallax

Panels shift subtly on interaction, reinforcing that they occupy real depth.

Catalogue