◆ 2007 — 2013

Skeuo­morphism

Digital interfaces that mimic real-world objects, materials, and textures. Leather calendars, wood-grain shelves, legal-pad note apps. Made unfamiliar digital interactions feel tactile and known. Pioneered by Apple's iOS 1–6 era under Scott Forstall.

TEXTURES DEPTH REALISM GRADIENTS BEVELS SHADOWS

Notebook

Personal Journal · Est. 2009

◆ 2013 — PRESENT

Flat
Design

A clean break from ornamentation. Two-dimensional shapes, solid fills, no gradients, no drop shadows. Popularized by Microsoft's Metro UI and Apple's iOS 7. Rooted in Swiss International Typographic Style — prioritizing clarity over simulation.

SOLID COLORS GEOMETRY NO SHADOWS ICONS BOLD TYPE

Dashboard

// APP · v2.0
📊
📁
◆ 2014 — PRESENT

Material
Design

Google's design system uses the metaphor of ink on paper. Elevation shadows create layered hierarchy; cards float above surfaces; ripple animations simulate physical touch response. Flat 2.0 — minimal, but grounded in the physics of light and shadow.

ELEVATION RIPPLE CARDS MOTION DEPTH
U

Welcome Back

Sign in to continue
◆ 2019 — 2021

Neu­morphism

"New Skeuomorphism." Elements appear extruded from or pressed into a monochromatic surface using dual box-shadows — one light, one dark. Coined by Michał Malewicz in 2019. Beautiful but controversial for accessibility due to its inherently low contrast ratios.

DUAL SHADOWS EXTRUDED MONOCHROME SOFT UI LOW CONTRAST
👤

Profile

// soft·ui
DARK
LIGHT
AUTO
◆ 2020 — PRESENT

Glass­morphism

Frosted glass panels floating above vivid gradient backgrounds. Achieves depth via backdrop-filter: blur combined with semi-transparency and subtle white borders. Debuted with macOS Big Sur, revived spectacularly by Apple's Liquid Glass in 2025 WWDC.

BLUR TRANSPARENCY LAYERING GRADIENTS DEPTH

Cloud Access

// secure · login
SECURE ENCRYPTED FAST
◆ EARLY WEB / REVIVAL

BRUTALISM

Raw. Unapologetic. Deliberately anti-polish. Inspired by brutalist concrete architecture — exposing structure rather than hiding it. System fonts, primary colors, thick solid borders, no border-radius, no shadows. The web as function, not facade. Drastic and honest.

RAW HTML THICK BORDERS SYSTEM FONTS PRIMARY COLORS ANTI-DESIGN
SYSTEM::LOGIN v1.0 ▬ □ ×

ENTER SYSTEM

// WARNING: UNAUTHORIZED ACCESS PROHIBITED
403
ERRORS
1337
USERS
99%
UPTIME
◆ 2022 — PRESENT

Neu
brutalism

Brutalism grows up, slightly. Thick black borders, hard offset box-shadows with no blur, saturated punchy fills, and heavy display fonts. Retains raw structural honesty but adds modern animation, rounded sensibility, and color confidence. Popularized by Gumroad, Figma, Arc.

OFFSET SHADOW THICK BORDER BOLD COLORS 0 BLUR GEN-Z
★ CREATE ACCOUNT

Join Now

// zero fluff · just build
FREE
PRO
TEAM
◆ 2021 — PRESENT

Clay­morphism

Elements that look like they've been sculpted from soft, colorful clay. Achieves tactile 3D depth through a combination of inset light/dark inner shadows plus a strong outer shadow — working on any background color unlike Neumorphism. Coined as Neumorphism's more versatile successor by Michal Malewicz.

3D DEPTH ROUNDED COLORFUL INNER SHADOW PUFFY

Create Space

// clay · ui
🎨
🚀
💡
◆ TIMELESS

Minimalism

Every element earns its place or is removed. Rooted in the Bauhaus movement and Swiss International Style. Perfection is not achieved when there is nothing left to add, but when there is nothing left to take away. White space as a design element in itself.

WHITE SPACE TYPOGRAPHY FIRST RESTRAINT GRID CONTENT FOCUS

Sign In

// Member Access
2.4KMEMBERS
99.9%UPTIME
STORAGE
◆ ALWAYS THERE

MAXIMALISM

MORE. IS. MORE. Pattern clashes, chromatic collisions, multiple typefaces, dense information, layered textures. Inspired by Y2K excess, pop art, the loud early web. An intentional rejection of restraint. Every element screams.

PATTERN CLASH COLOR FLOOD LAYERED LOUD TYPE CHAOS
🔥 HOT
MEGA·APP·2024.exe

JOIN THE CHAOS

★ LIMITED TIME ★ ACT NOW ★ FREE ★
FREE
PRO $$$
ULTRA!!
◆ TIMELESS

Monochrome

The entire spectrum of a single hue — or simply black, white, and gray. Hierarchy established through contrast, weight, and scale alone. No color crutches. Forces relentless typographic discipline. Often the most sophisticated-feeling approach when executed with care.

SINGLE HUE CONTRAST TYPOGRAPHY TONAL RANGE DISCIPLINE

Analytics

// system · monitor
CPU
78%
RAM
62%
DISK
45%
NET
91%
◆ 2022 — PRESENT

Aurora UI

Gradient meshes mimicking the Northern Lights — slow-drifting colored blobs beneath glassmorphic panels. Vivid purples, cyans, and pinks bloom softly behind frosted surfaces. The face of modern SaaS. Stripe, Linear, and Vercel defined this era.

GRADIENT MESH ANIMATED BLOBS GLOW GLASSMORPHISM+ SMOOTH

Aurora Dashboard

// analytics · live
98.2%
Uptime
4.2K
Users
12ms
Latency
$2.4K
Revenue
◆ FOREVER

CYBER­PUNK

Neon on near-black. CRT scan lines, hexadecimal aesthetic, glitch distortion, and hacker terminal motifs. Inspired by Blade Runner, Ghost in the Shell, and the raw culture of the underground. Every surface is a terminal. Every border glows.

NEON GLOW GLITCH DARK BG SCAN LINES MONOSPACE HEX
SYS::AUTH v4.2.0

NEURAL LINK

// IDENTIFY YOURSELF, OPERATIVE
7749
NODES
CYCLES
0xFF
SECTOR
◆ 1998–2005 / REVIVAL 2022+

Y2K
Aesthetic

Chrome gradients, bubble UI, lens flares, and millennium optimism. The visual language of the early internet — when the future felt shiny, digital, and boundlessly exciting. Revived enthusiastically by Gen Z as digital nostalgia. Plastic, chrome, bubblegum, and silver.

CHROME LENS FLARE BUBBLY METALLIC NOSTALGIA IRIDESCENT
InternetExplorer 6.0

MILLENNIUM PORTAL

welcome to the future! :)
◆ MODERN WEB

Kineticism

Design defined by its motion. A reaction against static layouts, Kineticism relies on scroll-triggers, micro-interactions, and physics-based animations to breathe life into the interface. Uses libraries like GSAP to orchestrate complex choreographies of elements.

GSAP SCROLL ANIMATION CHOREOGRAPHY
Motion Layout
Sequence Item 1
Sequence Item 2
Sequence Item 3
◆ WEBGL ERA

Spatialism

Monochrome brutalist 3D. Breaking the 2D plane with WebGL. Spatialism uses primitive geometric shapes, stark lighting, and harsh black-and-white palettes to create architectural, physical spaces in the browser. Powered by Three.js.

THREE.JS MONOCHROME BRUTALIST 3D primitives

VOID TERMINAL

◆ POST-MODERN

Synthesism

The intentional collision of opposing ISMs. What happens when you combine the harsh, unforgiving borders of Brutalism with the delicate frosted blur of Glassmorphism? Synthesism is the remix culture of web design, creating striking new dialects from established tropes.

GLASS-BRUTALISM HYBRID REMIX CONTRADICTION

HYBRID_STATE

◆ Y2K RAVE

Acid Graphics

A high-contrast, hyper-saturated aesthetic born from 90s rave flyers and early internet digital decay. Features melting typography, chrome, tribal vectors, and optical illusions. Unapologetically garish and surreal.

ACID COLORS TRIPPY DISTORTION RAVE

LIQUID REALITY

◆ 2004 — 2013

Frutiger Aero

The glossy, optimistic aesthetic of Web 2.0 and early smartphones. Characterized by skeuomorphic glass, water textures, aurora borealis motifs, lens flares, and highly polished gradients. It envisions a bright, corporate utopian future.

GLOSSY NATURE/TECH AURORA SKEUOMORPHISM

Media Player

◆ 2017 — PRESENT

Corporate Memphis

Also known as "Alegria", this illustration and UI style is ubiquitous in modern tech startups. Features flat geometric shapes, pastel and primary colors, disproportionate flat characters, and squiggly accents. Friendly, scalable, and non-threatening.

FLAT VECTOR GEOMETRIC PASTELS STARTUP

Welcome!

◆ 1919 — TIMELESS

Bauhaus

Form follows function. Originating from the German art school, this style uses strict mathematical grids, unadorned typography, and a strict palette of primary colors (red, blue, yellow) alongside black and white. Web design stripped to its purest geometric essence.

GRID PRIMARY COLORS FUNCTIONAL GEOMETRY
A
◆ 1920s / REVIVAL

Constructivism

Aggressive, dynamic, and revolutionary. Rooted in Russian Constructivist propaganda, it uses stark diagonal lines, heavy block sans-serif typography, and a rigid palette of red, black, and white. It rejects art for art's sake in favor of striking visual communication.

DIAGONALS RED & BLACK BOLD TYPOGRAPHY PROPAGANDA
ALERT

SYSTEM COMPROMISED. ACTION REQUIRED IMMEDIATELY.

◆ 1980s / NOSTALGIA

Pixelism

A nostalgic return to early computing and 8-bit gaming. Features strict grid-based aliased edges, chunky monospace bitmap fonts, high-contrast neon colors on deep backgrounds, and deliberate dithering. A rejection of modern anti-aliasing.

8-BIT ALIASED RETRO GAMING BITMAP
PLAYER 1
◆ AVANT-GARDE

Parametricism

Inspired by avant-garde architecture, this style utilizes generative, fluid, and complex organic shapes. Instead of rigid grids, it relies on sweeping curves, mathematical topology, and interconnected networks that feel grown rather than built.

GENERATIVE FLUID CURVES TOPOLOGY ORGANIC

NODE_01

◆ 1991 — 1999

Web 1.0

The dawn of the personal homepage. Defined by basic HTML tags, repeating low-res background images, animated "under construction" GIFs, unstyled Times New Roman, and chaotic color schemes. Pure, unfiltered digital expression.

HTML 3.2 MARQUEE TABLES GIFS

Guestbook


Welcome to my homepage!
◆ 2010 — 2015

Frutiger Metro

The aggressive flattening of UI. Championed by Microsoft's Windows Phone and Windows 8, it applies strict Swiss graphic design principles to software. Features solid monochromatic tiles, crisp typography, horizontal scrolling, and absolutely zero gradients or shadows.

FLAT TILES SWISS STYLE TYPOGRAPHY MONOCHROME
Start
Mail
Photos
◆ 2010s / MICROGENRE

Vaporwave

An internet-born aesthetic exploring retro-nostalgia, consumer capitalism, and surrealism. Visually defined by Windows 95 UI elements, Greek busts, palm trees, glitch art, and pastel pink/teal gradients. It feels like a beautiful, broken memory.

WIN95 PASTELS SURREAL GLITCH
ERROR.EXE X

A fatal exception has occurred.

◆ 1980s / RETROFUTURE

Outrun

Also known as Synthwave. The dark, neon-soaked vision of 1980s retrofuturism. Features endless wireframe cyber-grids, glowing laser lines, chrome typography, and a strict palette of dark violet, hot pink, and cyan. High-tech, low-fi.

NEON CYBER GRID 80S SYNTHWAVE

SYSTEM READY

◆ 1950s — 1960s

Pop Art

Drawing from comic books and consumer packaging. Utilizes bright, saturated primary colors, heavy black outlines, Ben-Day (halftone) dots, and dramatic angles. It elevates low-brow mass media aesthetics into high-impact visual design.

HALFTONE COMIC PRIMARY COLORS HEAVY OUTLINES

POW!

◆ 1920s — 1930s

Art Deco

The epitome of roaring twenties glamour and industrial modernism. Defined by symmetrical geometry, sleek vertical lines, stylized sunbursts, and luxurious materials translated digitally via gold-on-black color palettes and elegant, tall serif typography.

SYMMETRY GOLD/BLACK GEOMETRIC GLAMOUR

The Gatsby