A tour of UI styles — one page, fifteen looks

October 3, 2026

Update, October 2026: the demos have moved. They used to live under /ui-styles/ on this site, but the experiment outgrew the blog — it's now a standalone repo, kimi-2.8-gallery, where I'm building a hundred self-contained visual studies. You can browse everything at the gallery hub.

UI design has dialects. Two sites can contain exactly the same components — a nav bar, a headline, two buttons, a card — and feel like they belong to different planets. To make that visible, I built a gallery: the same layout rendered in fifteen different styles.

Open the gallery hub →

Each demo page is a self-contained HTML file with its own inline CSS. Same content, different skin:

Modern

• Glassmorphism — frosted panels floating over gradients; depth created with blur, not shadow.
• Neubrutalism — thick black borders, hard offset shadows, raw colors; zero subtlety on purpose.
• Material Design — Google's elevation system; surfaces lift off the page via layered shadows.
• Minimal / Swiss — typography and white space do all the work; one red accent.
• Claymorphism — puffy, plasticine-like surfaces in pastel colors with dual inner/outer shadows.
• Bento Grid — rounded tiles of mixed sizes and colors, the Apple-keynote signature.
• Kawaii — pastel candy colors, chunky rounded shapes, and friendly copy.

Retro & nostalgic

• Retro Vintage — warm paper tones, serif italics, and stamp-like badges from 70s editorial print.
• Y2K — chrome text, icy blues, glossy pills; liquid-metal futurism circa 1999.
• Art Deco — gilded geometry, sunburst motifs, and gold-on-black 1920s glamour.
• Synthwave — neon sunsets, perspective grids, and chrome gradients; the 80s dream of the future.
• Skeuomorphism — real-world textures: linen backgrounds, glossy buttons, stitched leather. The iOS 6 era.

Dark & edgy

• Dark Neon — near-black canvas, glowing cyan/magenta accents; glow replaces shadow.
• Cyberpunk — glitch typography, HUD brackets, scanlines, and a terminal aesthetic.

Anti-design

• Brutalism — raw unstyled HTML. Default fonts, blue links, zero CSS. A protest against polished sameness.

Why this is a useful exercise

Styling is surprisingly separable from structure. Every demo shares roughly the same HTML skeleton — the personality comes almost entirely from CSS. That's the whole argument for keeping this blog framework-free: once your markup is clean, reskinning it is a stylesheet away.

The demos live in the kimi-2.8-gallery repo if you want to study (or steal) the CSS.