Multimedia + Web Design · Reference Library

Design Styles & Systems

Every style and system from our three sheets in one searchable place. Each card shows its color, typography, and where you've seen it. Use the search box or category filter to jump to anything.

New to design systems? Read the visual lesson →

Popular Styles

The evergreen canon — movements every designer should recognize on sight.

1919 · Germany

Bauhaus

Form follows function — geometry stripped to essentials.

Signature traitsCircle / square / triangle, primary colors, asymmetric balance, zero ornament.

Color#d2232a #1d4e9c #f4c20d #141414

TypographyClean geometric sans-serif (Futura lineage).

Seen inDesign education, modernist posters, foundational branding.

Bauhaus, primary red/blue/yellow, geometric shapes, clean geometric sans, functional grid

1920s–30s

Art Deco

Machine-age luxury and symmetry.

Signature traitsBold symmetry, sunbursts, zigzags, tall elegant forms, metallic glamour.

Color#dcb968 #11131a #1f6e5e #e8dcc0

TypographyHigh-contrast geometric capitals, tall and refined.

Seen inLuxury, hospitality, film titles (think Gatsby).

Art Deco, gold on black, symmetrical geometric pattern, sunburst motifs, tall elegant capitals

1950s · Switzerland

Swiss / International

The objective grid. Clarity above all.

Signature traitsMathematical grid, flush-left ragged-right, asymmetric balance, objective photography.

Color#fff #0a0a0a #e2231a

TypographyNeo-grotesque sans — Helvetica, Univers.

Seen inSignage systems, editorial, corporate identity.

Swiss international typographic style, strict grid, Helvetica, asymmetric balance, single red accent

1945–69

Mid-Century Modern

Optimistic, warm, atomic-age clean.

Signature traitsOrganic + geometric lines, boomerang / atomic motifs, warm muted palette.

Color#d99a2b #1f7a6e #c1502e #e7ddc6

TypographyFriendly geometric sans + casual script.

Seen inFurniture, retro lifestyle brands, album art.

mid-century modern, mustard teal and burnt-orange palette, atomic boomerang shapes, clean lines

1950s–60s

Pop Art

Mass culture, loud and repeated.

Signature traitsBen-Day halftone dots, thick comic outlines, primary colors, repetition.

Color#e63946 #f4d35e #1d6fb8 #121212

TypographyBold condensed caps, comic lettering.

Seen inWarhol, Lichtenstein, playful posters, music.

pop art, Ben-Day halftone dots, bold black outlines, primary colors, comic-book style

Late 1960s

Psychedelic

Vibrating color and melting type.

Signature traitsSwirling distorted forms, optical flow, warped hand-lettering, saturated clash.

Color#ff5ea8 #f4a23b #7be04a #5be0ff

TypographyLiquid, melting, near-illegible display.

Seen inConcert posters, festivals, counterculture.

1960s psychedelic, swirling vibrant colors, warped melting hand-lettering, kaleidoscopic

1980s · Milan

Memphis

Deliberate, joyful bad taste.

Signature traitsSquiggles, confetti, terrazzo, clashing colors, geometric chaos.

Color#1aa6a6 #ff5d8f #ffd23f #1a1a1a

TypographyBold, quirky, slightly off-kilter sans.

Seen in'80s pop culture, Saved-by-the-Bell era, retro brands.

Memphis design 1980s, squiggles and confetti shapes, clashing bright colors, geometric chaos

Peak 2007–13

Skeuomorphism

Pixels pretending to be real objects.

Signature traitsLeather / felt / metal textures, glossy bevels, realistic drop shadows.

Color#6b5436 #2c3626 #b9c0a3 #d8cda6

TypographyEmbossed, letterpressed, glossy.

Seen inEarly iOS, Apple's Game Center, calculator apps.

skeuomorphism, realistic leather and brushed-metal textures, glossy beveled buttons, drop shadows

Flat Design

~2012

The clean reaction against skeuomorphism.

Signature traitsNo gradients or shadows, bold solid color, simple icons, strong type, clarity.

Color#ef5350 #26a69a #ffca28 #5c6bc0

TypographyClean geometric sans, generous weight contrast.

Seen inWindows Metro, iOS 7, early app/web UI.

flat design, solid bold colors, no shadows or gradients, simple geometric icons, clean sans

2014 · Google

Material Design

Flat design, but with believable physics.

Signature traitsPaper metaphor, meaningful elevation shadows, bold color, motion, responsive grid.

Color#34409a #ff4081 #00bcd4 #fafafa

TypographyClean humanist sans (Roboto lineage).

Seen inAndroid, Google products, systematic design systems.

Material Design, paper cards with elevation shadows, bold indigo, floating action button, grid

2010s · Internet

Vaporwave

Nostalgic, ironic, glitched-out retro.

Signature traitsPink + cyan, retro grids, Greek busts, glitch, Japanese text, '80s/'90s relics.

Color#ff71ce #5be0ff #b967ff #160a2e

TypographyWide-spaced caps, retro serif or mono.

Seen inInternet music culture, retro-futurist art, album covers.

vaporwave, pink and cyan, retro grid horizon, glitch, 1980s nostalgia, wide-spaced caps

~2014 · Web

Web Brutalism

Raw, unstyled, defiantly un-designed.

Signature traitsDefault fonts, visible structure, stark contrast, unstyled blue links, anti-polish.

Color#fff #000 #0000ee

TypographyTimes New Roman, Courier, system defaults.

Seen inArtist portfolios, indie sites, statement pieces.

web brutalism, raw unstyled HTML look, Times and monospace, blue underlined links, stark white

2026 Web Trends

What's current right now — mostly remixes of the classics above, plus aesthetic movements and approaches.

Current Trends

The looks defining the web right now.

Neo-Brutalism

Raw, loud, confidently "undesigned" — but with hierarchy.

Signature traitsThick black borders, hard offset shadows, blocky layout, oversized type, intentional friction.

Color#fff #111 #caff4d #ff4dd2

TypographyChunky grotesque or mono, heavy weights.

Seen inEdgy portfolios, startups, campaigns that want to provoke.

neo-brutalist, thick black borders, hard offset shadows, electric lime accent, chunky mono type

Bento Grid

Modular tiles, like a Japanese lunch box.

Signature traitsAsymmetric rounded cards of varying sizes, generous spacing, one idea per tile.

Color#9bb8ff #c9b3ff #b8e6c9 #ffd6a5

TypographyFriendly geometric sans, large numbers.

Seen inDashboards, portfolios, feature overviews.

bento-grid layout, modular rounded tiles of different sizes, pastel palette, friendly geometric sans

Glassmorphism 2.0

Frosted glass and depth — Apple's "Liquid Glass" era.

Signature traitsTranslucent blurred panels, diffused shadows, layered depth, glow accents.

Color#0b1f3a #5ac8ff #9b7bff #bfe3ff

TypographyThin modern sans. Watch contrast — real accessibility risk.

Seen inPremium tech, app UIs, dark-mode dashboards.

glassmorphism, frosted translucent cards, blur, dark navy gradient, cyan glow accent

Y2K Revival

Chrome, liquid metal, holographic 2000s nostalgia.

Signature traitsMetallic gradients, iridescent surfaces, dense layered, filter-heavy maximalism.

Color#9aa7bd/#fff/#7f8ca3 #3b6cff #c0c6ff #b9f5ff

TypographyBubbly techno / chrome lettering.

Seen inMusic, fashion, youth-focused brands.

Y2K retro-futurist, chrome and liquid-metal gradients, holographic accents, techno typeface

Swiss Minimalism

Strict grids, whitespace, nothing wasted.

Signature traitsRigid alignment, generous negative space, monochrome + one accent, data-led.

Color#fff #0a0a0a #fa3c2d

TypographyClean grotesque sans, tight hierarchy.

Seen inEditorial, corporate clarity, infographics.

Swiss / international minimalism, strict grid, lots of whitespace, monochrome with single red accent

Resonant Stark

Minimalism that still feels human.

Signature traitsUltra-thin fonts, soft gradients, abundant whitespace, gentle micro-interactions.

Color#eceae6 #cfd6d8 #b7c2bd #8a9590

TypographyLight-weight, airy sans.

Seen inWellness, calm premium brands, mindful products.

ultra-thin typography, soft muted gradients, generous whitespace, calm and emotional minimalism

Dopamine Maximalism

More-is-more — bold, saturated, joyfully too much.

Signature traitsSaturated candy color, neon gradients, clashing-but-friendly pairings, layered patterns and oversized expressive type.

Color#ff5e8a #ff9e3d #5ad1ff #9b5cff

TypographyBig, bold, characterful display.

Seen inLifestyle, beauty, events, youth and bold brand sites.

dopamine maximalism, vibrant saturated neon palette, more-is-more layered layout, oversized playful display type, joyful clashing color

Editorial Revival

Print-magazine craft, on screen.

Signature traitsColumn layouts, grainy texture, rule lines, vintage photography, serif headlines.

Color#efe9dd #211c14 #6b1f1f #e6c878

TypographyElegant serif headlines + clean sans body.

Seen inLiterary, luxury, storytelling brands.

editorial magazine layout, grainy paper texture, serif headlines, columns, ink + gold on off-white

Organic / Anti-Grid

Soft, flowing, "nature distilled."

Signature traitsIrregular layouts, flowing lines, blob shapes, soft gradients, earthy warmth.

Color#cdbfa6 #9aa276 #c98a5e #e7ddc9

TypographyHumanist sans or soft serif.

Seen inSustainable, wellness, human-centered brands.

organic anti-grid layout, flowing curved shapes, soft gradients, muted earthy palette of skin/wood/soil tones

Tactile Rebellion

Scrapbook, collage, proof of human hands.

Signature traitsScanned textures, handwriting, stickers, cut-and-paste collage, mismatched on purpose.

Color#efe7d6 #c2491f #3f6b4c #2c241a

TypographyHandwriting mixed with cut-out type.

Seen inIndie, craft, authentic Gen-Z brands. The anti-AI look.

scrapbook collage, scanned paper textures, handwritten labels, mismatched stickers, taped cut-outs

Big / Kinetic Type

Typography is the interface.

Signature traitsEdge-to-edge viewport-scaled words, variable fonts, scroll-driven motion, almost no imagery.

Color#0c0c0c #f6f6f4 #ff4d2e

TypographyExpressive variable display, the hero element.

Seen inAgencies, statement landing pages, manifestos.

oversized typography as hero, single headline edge-to-edge, minimal color, type-driven layout

Retro Vintage

'70s–'80s warmth and grain.

Signature traitsGrain textures, geometric shapes, line art, rounded chunky display, sticker badges.

Color#e8b04b #c2491f #7a4a22 #e8d9b5

TypographyBold rounded display + condensed serif.

Seen inFood, lifestyle, cozy nostalgic brands.

1970s retro, mustard / burnt-orange / cream palette, grain texture, chunky rounded display type

Aesthetic Movements

Vibe-driven styles that aren't tied to a single year.

Cute-alism

Kawaii overload — candy pastels and bouncy blobs.

Signature traitsSuper-rounded shapes, candy pastels, sticker badges, friendly faces, soft shadows, playful bounce.

Color#ff9ec7 #ffb3c7 #ffe0ee #3a2b33

TypographyRounded friendly sans, chunky and soft.

Seen inYouth brands, apps, mascots, playful products.

cute maximalism kawaii, candy pastel palette, super-rounded shapes, sticker badges, friendly bouncy blobs

Hyperreality

More real than real — glossy 3D, glass, iridescence.

Signature traitsGlossy 3D objects, frosted glass, iridescent holographic surfaces, deep layered light, high realism.

Color#7b61ff #00d1ff #ff5fa2 #c9bcff

TypographyClean modern sans — let the surfaces speak.

Seen inModern tech, product launches, 3D-forward brands.

hyperreality, glossy 3D render objects, frosted glass, iridescent holographic surfaces, deep layered lighting

Retrofuturism

Yesterday's vision of tomorrow — synthwave & chrome.

Signature traitsNeon sunsets, glossy chrome, glowing CRT screens, infinite grids, 80s and Y2K futurism.

Color#ff2d95 #00e5ff #ffe14d #2d0b4e

TypographyWide neon display, techno / chrome lettering.

Seen inMusic, gaming, nostalgic-futurist brands.

retrofuturism synthwave, neon sunset, chrome, glowing CRT grid, 1980s vision of the future

Museumcore

A web page as a quiet, curated gallery.

Signature traitsElegant serif type, vast whitespace, framed works, tiny curatorial labels — hushed and timeless.

Color#fdfcf9 #b59b6e #6e685c #1c1a16

TypographyHigh-contrast serif headlines, restrained sans captions.

Seen inGalleries, luxury, editorial and archival brands.

museumcore gallery aesthetic, elegant serif type, vast whitespace, framed images, tiny curatorial labels, hushed neutral palette

Retrofuture Femme

The soft, dreamy side of Y2K futurism.

Signature traitsPastel chrome, holographic shimmer, bubbly rounded forms, a little sparkle — gentle, not neon.

Color#ff9ed8 #b9a7ff #9ad1ff #5a2a52

TypographyBubbly techno or rounded display, glossy and soft.

Seen inBeauty, music, youth and femme-forward brands.

retrofuture femme, pastel chrome and holographic shimmer, bubbly rounded forms, soft Y2K sparkle, dreamy gradient

Neumorphism

Soft UI — shapes molded from light and shadow.

Signature traitsBackground-colored surfaces shaped only by paired soft shadows (light top-left, dark bottom-right); low contrast and tactile — watch accessibility.

Color#e0e5ec #a3b1c6 #f97316 #4a5568

TypographySoft, rounded sans — quiet and minimal.

Seen inDashboards, music players, niche UI concepts.

neumorphism soft UI, monochrome background-colored buttons, paired light and dark soft shadows, low contrast, rounded tactile controls

Design Approaches

Strategy more than a single visual style.

Social Impact

Turn a visitor's empathy into action.

Signature traitsClear mission, human stories, strong donate/sign CTAs, trust signals, accessible and direct.

Color#10b981 #0ea5e9 #065f46 #f0fdf4

TypographySturdy readable sans; large confident headlines.

Seen inNonprofits, charities, advocacy and cause campaigns.

social impact nonprofit site, clear mission statement, human story photography, strong donate CTA, trustworthy green palette

Gamified Design

Points, levels, streaks — game mechanics for the web.

Signature traitsProgress bars, badges, points, streaks, levels, reward animations and playful feedback loops.

Color#fbbf24 #f43f5e #f1f5f9 #1d1d1f

TypographyBold rounded display; confident, playful UI labels.

Seen inLearning apps, fitness and habit trackers, loyalty programs.

gamified web design, progress bars and XP points, badges and streaks, level-up reward animations, playful confident UI

Design Systems

The documented rule-sets companies use to keep big product suites consistent.

2025 · iOS 26 / macOS Tahoe

Apple — Liquid Glass

Translucent glass as a functional material.

Signature traitsReal-time "lensing" that bends light over content, floating control layers, one language across iPhone, Mac, Watch and Vision Pro.

Color#0d1622 #5ab0ff #bfe6ff #e6ecf5

TypographySan Francisco (SF Pro) — Apple's system typeface.

Seen inEvery Apple OS; successor to the flat iOS 7 era.

frosted translucent glass panels, real-time blur and light refraction, floating controls, dark mode glow

2025 · Material You evolution

Google — Material 3

Paper metaphor, now springy and emotional.

Signature traitsDynamic color drawn from the user's wallpaper, bouncy motion physics, bold shapes, larger expressive type, design tokens.

Color#6750a4 #7d5260 #7e5700 #fef7ff

TypographyRoboto / Roboto Flex (Product Sans for branding).

Seen inAndroid 16, Pixel, Gmail, Chrome, Wear OS.

Material Design, paper cards with elevation shadows, bold dynamic color, springy rounded shapes, FAB

Current · Windows / 365 / Teams

Microsoft — Fluent 2

Light, depth, motion, material, scale.

Signature traitsAcrylic & Mica translucency, soft depth and shadow, reveal-highlight glow, shared Figma tokens.

Color#0f6cbd #115ea3 #f4f7fb #1b1a19

TypographySegoe UI Variable.

Seen inWindows, Office / Microsoft 365, Teams, Outlook.

Fluent design, acrylic frosted translucency, soft depth and shadow, blue accent, clean neutral UI

Open-source

IBM — Carbon

Precision, scale, and serious data.

Signature traitsStrict 2× grid, IBM Plex type, electric IBM blue, sharp corners, exceptional data-viz guidance.

Color#0f62fe #0043ce #161616 #ffffff

TypographyIBM Plex (Sans / Mono / Serif).

Seen inIBM enterprise and cloud products.

IBM Carbon style, strict grid, IBM Plex type, electric blue accent, sharp corners, data-dense dashboard

E-commerce

Shopify — Polaris

A design system that leads with words.

Signature traitsMerchant-admin components, React library, WCAG built in — plus unusually deep voice / tone / grammar guidelines.

Color#008060 #004c3f #f6f6f7 #202223

TypographyInter / system sans stack.

Seen inThe Shopify admin and merchant app ecosystem.

Shopify Polaris style, clean friendly admin UI, green accent, generous spacing, content-first layout

2015 · Enterprise CRM

Salesforce — Lightning

Clarity at enterprise scale.

Signature traitsConsistent component set, clear typography, responsive layouts, well-documented tokens.

Color#0176d3 #014486 #f3f3f3 #181818

TypographySalesforce Sans.

Seen inSalesforce clouds — sales, service, marketing.

Salesforce Lightning style, enterprise dashboard, blue accent, clear typography, dense but organized

Jira / Confluence / Trello

Atlassian Design System

Cohesion across a sprawling suite.

Signature traitsDefined principles (clarity, consistency, "trust"), full color / type / icon / content guidance.

Color#0052cc #0747a6 #172b4d #ffffff

TypographyCharlie Sans (brand) / system sans.

Seen inJira, Confluence, Trello, Bitbucket.

Atlassian style, clean collaboration-tool UI, blue accent, clear hierarchy, friendly and functional

Cross-product

Adobe — Spectrum

Precise, neutral, deeply themeable.

Signature traitsRestrained neutral grays, accessible by default, light / dark themes, token-driven, made for creative tools.

Color#d7373f #2c2c2c #6e6e6e #fafafa

TypographyAdobe Clean.

Seen inPhotoshop, Illustrator, Creative Cloud on the web.

Adobe Spectrum style, precise neutral grays, accessible contrast, subtle red accent, pro creative-tool UI

Enterprise · Alibaba

Ant Design

The default for data-heavy web apps.

Signature traitsHuge React component library, dense enterprise patterns, values of "certainty, meaningfulness, growth, naturalness."

Color#1677ff #0958d9 #1f1f1f #ffffff

TypographySystem sans stack (PingFang / Segoe / Roboto).

Seen inCountless enterprise and startup dashboards.

Ant Design style, enterprise admin dashboard, blue accent, dense tables and forms, clean and systematic

Developer-first

GitHub — Primer

Built for people who read code all day.

Signature traitsCalm light / dark themes, blue links, monospace accents, Octicon iconography, accessibility focus.

Color#0d1117 #79c0ff #3fb950 #e6edf3

TypographyMona Sans + system; monospace for code.

Seen inGitHub.com and developer tooling.

GitHub Primer style, dark developer UI, blue links, monospace accents, calm dense layout

Technique · Line-art

Outline Play

Line-art UI — stroked, not filled.

Signature traitsOutlined text, hollow buttons, line-drawn cards and icons; light, technical and low-ink.

Color#4338ca #a5b4fc #c7d2fe #1c1c22

TypographyClean sans or mono — structure over fill.

Seen inWireframes, technical UI, prototypes.

line-art UI aesthetic, everything stroked not filled, outlined text and hollow buttons, thin line-drawn cards and icons, low-ink technical look