25 web design styles explained, with live examples, CSS recipes and a measured contrast check for each

How to use this guide

Each style below has a live specimen: the box is real HTML and CSS, not a screenshot, so you can resize the window and see how it behaves. Under it you will find a short description, what to look for, where it fits, where I would avoid it, the accessibility risk, and a short CSS recipe you can copy. The contrast number on each specimen is measured from its own colours with the same method as the light and dark theme contrast check.

I started from the fifteen styles in the list that prompted this guide (minimalism, Swiss style, brutalism, neo-brutalism, glassmorphism, neumorphism, claymorphism, bento grid, editorial, dark luxury, aurora gradient, Y2K retro, skeuomorphism, kinetic typography and maximalism) and added ten more that come up in design briefs: flat design, Material design, Bauhaus, Memphis, vintage print, isometric illustration, duotone, cyberpunk, terminal style and organic, hand-drawn design. The groups are my own way of sorting them, because styles overlap: a page can be bento in layout, glass in surface and dark luxury in mood.

Calm and structured

Styles that organise content: grids, restraint, familiar components. They age well and are easiest to make accessible.

1. Minimalism

Long-standing; a constant since the early web.

Minimalism removes everything that does not help the visitor do one thing. What remains is generous whitespace, one typeface, one accent at most, and a single obvious action per screen. The style is a discipline about decisions, not a colour palette.

• Look for: large margins and line spacing; one or two type sizes doing most of the work; almost no decoration: no gradients, shadows or borders unless they carry meaning; one high-contrast action.
• Best for: Portfolios, documentation, writing, and any product where the content is the interface.
• Avoid when: Stores and dashboards that need to show many options at once; an empty-looking page can read as unfinished.
• Accessibility: Rarely a problem. Watch for light grey "quiet" text, which is the usual way minimalism fails contrast.

body { font: 18px/1.6 system-ui, sans-serif; color: #111; background: #fafafa; }
main { max-width: 38rem; margin: 0 auto; padding: 4rem 1.5rem; }
h1 { font-weight: 500; letter-spacing: -.03em; }
.btn { background: #111; color: #fff; padding: .6em 1.4em; border-radius: 2px; }

2. Swiss style (International Typographic Style)

Emerged in Switzerland in the 1950s.

Swiss style organises a page on an explicit grid, sets type in a neutral sans-serif, aligns to the left and lets size and weight do the hierarchy. Photographs are objective and colour is used sparingly, often a single red. It is the ancestor of much of the web grid you use today.

• Look for: a visible column grid with strict alignment; neutral grotesque type, flush left, ragged right; big numerals and size contrast instead of decoration; asymmetric layouts balanced by whitespace.
• Best for: Data-heavy editorial pages, annual reports, conference sites, design studios.
• Avoid when: Playful consumer brands; strict grids can feel cold without careful copy.
• Accessibility: Strong by default. Tight negative letter-spacing on large headings is fine, but do not apply it to body text.

.page { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 1rem; }
.page > header { grid-column: 1 / -1; border-bottom: 3px solid #111; }
.page > .lead { grid-column: 2 / -1; }
h1 { font: 700 2.4rem/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; }
.accent { color: #c62828; }

3. Editorial

Borrowed from print magazines and newspapers.

Editorial design brings print typography to the screen: a serif headline, small caps, a drop cap, narrow columns and clear rules between sections. It signals that the words matter and rewards reading.

• Look for: serif display type paired with a readable body face; rules, small caps and column structure; drop caps and pull quotes; measured line length, roughly 45 to 75 characters.
• Best for: Publications, long-form guides, newsletters, brand stories.
• Avoid when: Interfaces where people scan for controls; multi-column text is awkward on a phone.
• Accessibility: Check that decorative drop caps are not read twice by screen readers and that columns collapse to one on small screens.

article { font: 1.05rem/1.6 Georgia, serif; max-width: 42rem; }
h1 { font-weight: 400; font-size: 2.6rem; line-height: 1; }
.cols { columns: 2 18rem; column-gap: 1.5rem; }
p:first-child::first-letter { float: left; font-size: 3.2em; line-height: .85; padding-right: .08em; }

4. Flat design

Popularised around 2013 as phones moved away from textured interfaces.

Flat design drops gradients, bevels and shadows and builds interfaces from solid colour, simple shapes and clear typography. It loads fast and scales well, but removing depth also removes cues that say what is clickable, and bright flat colours are a common source of low contrast.

• Look for: solid colour blocks, no gradients or realistic shadows; simple icons and geometric shapes; bright, saturated palettes; typography carries hierarchy.
• Best for: Apps and marketing pages that need to stay light, and as a base for other styles.
• Avoid when: Anywhere users must tell buttons from labels at a glance; pair flat colour with borders, underlines or weight changes.
• Accessibility: White text on the popular flat green #27ae60 is 2.9:1 and fails; on #1e8449 it is 4.7:1 and passes. The first specimen shows the failing colour, the second the fix.

.btn { background: #e74c3c; color: #fff; border-radius: 3px; border: 0; }
.panel { background: #1e8449; color: #fff; }  /* 4.7:1; #27ae60 gives only 2.9:1 */
h1 { font-weight: 300; }

5. Material design

Introduced by Google in 2014.

Material design treats the screen as layers of paper with consistent elevation, bold colour, defined motion and a floating action button. It is a complete system, with components, spacing and accessibility guidance, which is why it spread so widely.

• Look for: elevation expressed with soft shadows; a primary colour and a contrasting accent; uppercase buttons and floating action buttons; structured spacing and motion rules.
• Best for: Apps and admin interfaces where consistent, familiar components speed up users and builders.
• Avoid when: Brand sites that need to look distinctive; default Material looks like every other app using it.
• Accessibility: Good defaults, including touch targets and contrast guidance. Shadows alone should not be the only signal of an interactive surface.

.appbar { background: #6200ee; color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.card { background: #fff; border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.14); }
.btn { background: #6200ee; color: #fff; text-transform: uppercase; letter-spacing: .08em; }

6. Bauhaus and geometric modernism

From the Bauhaus school, founded in 1919.

Bauhaus design reduces everything to primary colours, circles, squares and triangles, bold uppercase sans-serif type and rigorous asymmetry. On the web it shows up as flat geometric compositions with a limited palette and strong alignment.

• Look for: red, blue and yellow with black and cream; circle, square and triangle as the shape vocabulary; uppercase geometric sans-serif headlines; asymmetric, rectilinear composition.
• Best for: Studios, cultural and educational sites, posters and landing pages with a strong visual idea.
• Avoid when: Content-dense pages; the shapes compete with text if they sit behind it.
• Accessibility: Keep shapes behind or beside text, never under it, so contrast is judged against one flat colour.

.hero { background: #f2e8d5; font-family: Futura, "Century Gothic", sans-serif; }
.dot { width: 90px; height: 90px; border-radius: 50%; background: #e63946; }
.tri { border-left: 44px solid transparent; border-right: 44px solid transparent;
       border-bottom: 76px solid #f4c20d; }
h1 { text-transform: uppercase; font-weight: 800; }

Raw, loud and playful

Styles that put personality ahead of polish. They are memorable, and they depend on keeping text on a calm surface.

7. Brutalism

Named by Pascal Deville, who started brutalistwebsites.com in 2014.

Web brutalism borrows its name from raw concrete architecture. It uses default fonts, plain links, visible structure and little polish, as a reaction against uniform, slick sites. Deville has described it as an attitude rather than a visual style, which is why it ranges from almost unstyled HTML to deliberately confrontational layouts.

• Look for: system or monospace fonts, often uppercase; default-looking links and buttons; visible borders and raw structure; rejection of decoration and conventional navigation.
• Best for: Art, experimental portfolios, indie publications, and brands that want to look unpolished on purpose.
• Avoid when: Anywhere trust and clarity matter more than attitude, such as checkout or health.
• Accessibility: Plain HTML is often very accessible. Problems appear when brutalism turns into hidden navigation, tiny text or unusual scroll behaviour.

body { font: 16px/1.5 "Times New Roman", serif; background: #fff; color: #000; }
h1 { font: 700 1.6rem "Courier New", monospace; text-transform: uppercase; }
a { color: #0000ee; }
button { border: 2px outset #999; background: #ececec; border-radius: 0; }

8. Neo-brutalism

Grew out of brutalism in the early 2020s.

Neo-brutalism keeps the rawness but makes it friendly: thick black borders, hard offset shadows with no blur, flat saturated fills and chunky type. It has been widely adopted for buttons and cards inside otherwise conventional layouts, and several 2026 trend roundups describe it as better used as an accent than as a full-page costume.

• Look for: 2 to 4 px solid dark borders; hard shadows offset with zero blur; flat bright colours; a pressed state that moves the element onto its shadow.
• Best for: Playful products, creator tools, calls to action, tools aimed at younger or design-aware audiences.
• Avoid when: Conservative sectors; too many hard shadows on one page becomes noisy.
• Accessibility: Thick borders actually help, since they give controls a clear 3:1 boundary. Ensure text on bright fills still reaches 4.5:1.

.card { background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; border-radius: 6px; }
.btn { background: #ff7aa8; border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-weight: 800; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }

9. Maximalism

A deliberate counter to minimalism, visible in the 2020s.

Maximalism fills the page: clashing colours, layered patterns, oversized type, collage and rotation. When it works, it feels generous and personal; when it does not, it is noise. Its discipline is that every layer is chosen, and that the text still sits on a calm surface.

• Look for: many colours, patterns and textures at once; tilted and overlapping elements; oversized, expressive typography; a calm panel behind real text.
• Best for: Entertainment, fashion, events, festivals and brands built on personality.
• Avoid when: Long reading, forms, or anything where attention should stay on a task.
• Accessibility: Never put text directly on a busy pattern. The specimen puts text on a solid white panel. Add a reduced-motion path for any animation.

.page { background: repeating-linear-gradient(45deg, #fff176 0 14px, #ffe14d 14px 28px); }
.panel { background: #fff; border: 3px solid #111; transform: rotate(-1.2deg);
         box-shadow: 6px 6px 0 #6a1b9a; padding: 12px 16px; }
h1 { font-weight: 900; color: #d81b60; text-shadow: 2px 2px 0 #ffeb3b; }

10. Memphis

After the Memphis Group, the Milan design collective of the early 1980s.

Memphis style is playful and anti-minimal: squiggles, dots, zig-zags and clashing primaries scattered around bold type on a plain background. Its web revival is lighter than the 1980s original and often limited to a few decorative shapes.

• Look for: squiggles, dots, triangles and zig-zags; bright primary and pastel colours; thick outlines and offset shadows; decoration placed around, not under, text.
• Best for: Creative agencies, kids and education, event pages, social campaigns.
• Avoid when: Serious or regulated content; the playfulness can undermine credibility.
• Accessibility: Keep decorative shapes in empty space and out of reading paths; hide purely decorative elements from assistive technology.

.hero { background: #fff; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 20%, #ff5ca8 0 18px, transparent 19px),
              repeating-linear-gradient(135deg, transparent 0 9px, #ffd23f 9px 12px) 62% 62% / 90px 40px no-repeat; }
h1 { text-decoration: underline wavy #ff5ca8; }

11. Y2K retro

Nostalgia for the late 1990s and early 2000s, resurgent in the 2020s.

Y2K design recreates the optimism of the millennium: glossy bubbles, chrome gradients, pill buttons, italic type and a sky-blue palette. The modern version keeps the shine but is usually cleaner and more responsive than the originals.

• Look for: glossy, glassy buttons with highlights; chrome and baby-blue gradients; bubbles and orbs as decoration; italic, rounded or slightly futuristic type.
• Best for: Music, fashion, nostalgia products, youth brands and playful campaigns.
• Avoid when: Anything that must look current and serious; the style dates the product on purpose.
• Accessibility: Gloss gradients under text lower contrast in places. Measure against the darkest and lightest part of the gradient.

.btn { background: linear-gradient(#fdfdff, #c9d6ff 50%, #b5c6ff 51%, #e4ecff);
        border: 1px solid #7f93e8; border-radius: 99px;
        box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(60,80,200,.3); }
.orb { border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, #7f9cff 70%); }

12. Vintage print and retro

Inspired by mid-century posters, packaging and letterpress.

Vintage print design imitates aged paper and old presses: warm off-white backgrounds, a limited ink palette, heavy slab or serif capitals, rules and subtle grain. It communicates craft and heritage, and works best when the grain is a quiet background rather than a filter over the text.

• Look for: cream paper tones with two or three ink colours; heavy serif or slab headlines in capitals; rules, borders and stamped labels; subtle grain or vignette.
• Best for: Food and drink, craft brands, bookshops, events with a heritage story.
• Avoid when: Fast-moving technology products; heavy texture also adds weight to every page.
• Accessibility: Ink-on-cream usually has plenty of contrast. Keep the grain on a background layer so it does not reduce text sharpness.

.paper { background: #efe4cf; color: #2b2118; font-family: Georgia, serif;
         box-shadow: inset 0 0 60px rgba(120,80,30,.28); }
h1 { text-transform: uppercase; font-weight: 900; }
.stamp { background: #a63a2a; color: #efe4cf; border: 2px solid #2b2118; letter-spacing: .12em; }

Depth, light and glow

Styles that use shadow, translucency and blur to suggest physical space. They are the ones most likely to fail contrast and to cost performance.

13. Skeuomorphism

Dominant in early smartphone interfaces; Apple moved away from it with iOS 7 in 2013.

Skeuomorphic design makes digital objects look like physical ones: leather, stitching, glossy buttons, embossed type. It teaches new users by analogy, and it is making a selective return where tactility is the point, such as audio, finance dashboards and games.

• Look for: textures such as leather, paper and metal; gradients and highlights that suggest lighting; inset and drop shadows that imply depth; buttons that look pressable.
• Best for: Hardware-inspired tools (music, audio), nostalgic or playful products, and any interface that benefits from physical metaphors.
• Avoid when: Content sites; texture and heavy shadows increase page weight and visual noise.
• Accessibility: Textured backgrounds can reduce text contrast. Measure against the brightest part of the texture.

.panel { background: linear-gradient(#7a5230, #6b4423); box-shadow: inset 0 0 40px rgba(0,0,0,.45); }
.btn { background: linear-gradient(#f3e0b4, #e8cf9b 55%, #cdb077); border: 1px solid #3b2410;
       box-shadow: 0 2px 0 #3b2410, 0 5px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }
h1 { text-shadow: 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.15); }

14. Neumorphism

Appeared in late 2019 after a banking-app concept shot on Dribbble; the name is credited to Jason Kelley and Michal Malewicz.

Neumorphism ("new skeuomorphism") makes elements look extruded from or pressed into the background, using two soft shadows, one light and one dark, on a surface that matches the page colour. It looks calm and tactile, but its defining feature is also its weakness: boundaries are shadows with very little contrast.

• Look for: same background colour for page and elements; a light shadow top-left and a dark shadow bottom-right; soft, rounded shapes; inset shadow for pressed or active states.
• Best for: Small, decorative controls, music or smart-home style dashboards, concept work.
• Avoid when: Forms and anything that must be usable by people with low vision; the style struggles to meet non-text contrast.
• Accessibility: The text passes (5.9:1), but the edge of the raised card is a shadow only 1.7:1 against the background, below the 3:1 WCAG 1.4.11 asks for when a boundary identifies a control. Add a visible border or a contrasting fill.

.card { background: #e0e5ec; border-radius: 22px;
         box-shadow: 9px 9px 18px #a3b1c6, -9px -9px 18px #fff; }
.card:active { box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #fff; }
.btn { border: 1px solid #8794aa; }  /* add a real boundary */

15. Glassmorphism

Gained attention around 2020 with translucent Apple and Microsoft interfaces.

Glassmorphism puts a translucent, blurred panel over a colourful background so content seems to float on frosted glass. The blur keeps the layer readable and gives a sense of depth. It looks best over rich imagery or gradients, and it is the style that most often fails contrast without extra work. The first specimen below is built the common way; the second adds a dark tint behind the text.

• Look for: semi-transparent white or tinted surface; backdrop-filter blur; a thin light border; a colourful background behind the glass.
• Best for: Hero sections, overlays, media players, cards over imagery, OS-like interfaces.
• Avoid when: Dense text, or pages where the background is unpredictable such as user photos; blur can also be costly on low-end devices.
• Accessibility: White text on the light translucent panel measured 1.6:1 at its worst point, over the pale blob behind the glass. A dark tint behind the text measured 5.1:1 at the same point. Test against the lightest part of whatever sits behind the glass.

.glass { background: rgba(10, 10, 50, .45);        /* tint keeps text readable */
         border: 1px solid rgba(255, 255, 255, .45);
         border-radius: 16px;
         -webkit-backdrop-filter: blur(14px) saturate(1.3);
         backdrop-filter: blur(14px) saturate(1.3); }
/* without a tint: rgba(255,255,255,.18) over a light gradient fails contrast */

16. Claymorphism

Appeared around 2021 as a softer successor to neumorphism.

Claymorphism makes interface elements look like inflated clay or soft plastic: very large radii, pastel fills, inner highlights, inner shadows and a soft outer shadow. It reads as friendly and tactile, and unlike neumorphism it uses colour contrast between elements and background.

• Look for: large rounded corners; pastel fills with two inner shadows (light and dark); soft, coloured drop shadows; 3D-feeling icons and illustrations.
• Best for: Consumer apps, kids and education, onboarding screens, friendly SaaS marketing.
• Avoid when: Data-heavy dashboards and serious financial or legal contexts.
• Accessibility: Pastel fills tempt designers to use pastel text. Keep body text dark; the specimen measures 10.7:1.

.clay { background: #ffb3d6; border-radius: 30px;
        box-shadow: inset -6px -8px 14px rgba(150,40,100,.28),
                    inset 6px 8px 14px rgba(255,255,255,.7),
                    0 14px 24px rgba(180,50,110,.28); }
.btn { background: #b8326e; color: #fff; border-radius: 99px; }

17. Aurora gradient

Common in SaaS and AI product marketing from the early 2020s.

Aurora design places blurred, slowly shifting blobs of colour behind content on a dark background, often with gradient headlines. The effect is atmospheric and modern, and it keeps pages feeling alive without photography.

• Look for: dark base with large blurred colour blobs; slow drifting animation; gradient text on headings; translucent cards over the glow.
• Best for: Product landing pages, AI and developer tools, event and launch pages.
• Avoid when: Content-heavy pages; blurred animated layers cost GPU time and can drain batteries.
• Accessibility: Provide a reduced-motion version that stops the drift (the specimen does) and check text against the brightest blob, not the dark base. Gradient-clipped text should keep strong contrast at its lightest stop.

.aurora { background: #0a0a1f; position: relative; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .55;
        animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(40px, 22px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

18. Isometric and 3D illustration

From technical drawing, widely used in illustration and games.

Isometric design draws objects on a fixed angle without perspective, so parallel lines stay parallel. On the web it appears as illustrated scenes, diagrams and CSS or SVG blocks. It explains structures and systems well because every layer of a stack can be shown at once.

• Look for: a fixed 30 degree angle with no perspective; three visible faces per block, lighter on top; simple geometric shapes; consistent light direction.
• Best for: Explaining architectures, infrastructure, logistics and onboarding flows.
• Avoid when: Anywhere an illustration would delay content; heavy illustrations can hurt load time.
• Accessibility: Illustrations need a text alternative that explains the idea, not just the picture. Never put essential information only in the drawing.

.cube { width: 90px; height: 90px; transform-style: preserve-3d;
         transform: rotateX(-30deg) rotateY(45deg); }
.cube .front { transform: translateZ(45px); }
.cube .right { transform: rotateY(90deg) translateZ(45px); }
.cube .top   { transform: rotateX(90deg) translateZ(45px); }

Layout and type in motion

Styles defined by how the page is arranged or how the words behave, not by decoration.

19. Bento grid

Popularised by Apple product pages around 2022 and 2023; some trace the idea back to earlier tile interfaces.

A bento layout arranges content in rounded tiles of different sizes inside one tidy grid, like the compartments of a bento box. Each tile carries one idea, so a page can show many features without a long scroll. Trend reviews in 2026 describe it as the most established pattern of the moment.

• Look for: rounded tiles of varied span; even gutters; one idea per tile; mixed content: number, image, short copy.
• Best for: Feature overviews, product pages, dashboards, portfolios.
• Avoid when: Linear stories and long reading; a grid of tiles has no natural reading order.
• Accessibility: Check the DOM order matches the visual order, make whole tiles clickable only when there is a single clear action, and keep tile text readable at small sizes.

.bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: minmax(110px, auto); gap: 10px; }
.tile { background: #fff; border-radius: 18px; padding: 14px; }
.tile.big { grid-row: span 2; }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile.big { grid-row: auto; } }

20. Kinetic typography

Rooted in motion graphics; common on campaign and portfolio sites.

Kinetic typography treats text as the moving element: headlines slide, scale, outline and loop. Done sparingly it creates energy and hierarchy without images. Done everywhere it becomes unreadable, which is why a pause control and a reduced-motion version matter.

• Look for: oversized, heavy type; scrolling marquees and looping rows; outlined versus filled words; motion tied to scroll or time.
• Best for: Campaign pages, agency and portfolio hero sections, event announcements.
• Avoid when: Articles, documentation, and any page where people need to read for more than a few seconds.
• Accessibility: WCAG 2.2.2 requires a way to pause, stop or hide moving content that starts automatically and lasts more than five seconds. Respect prefers-reduced-motion and keep the key message in static text too.

.row { white-space: nowrap; overflow: hidden; font: 900 50px/1 system-ui; text-transform: uppercase; }
.row span { display: inline-block; padding-right: .5em; animation: slide 12s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .row span { animation: none; } }

21. Duotone and colour blocking

From print and photography, popular on music and tech brands.

Duotone uses two colours for everything, often overlaying a photo with one tint, and colour blocking splits the screen into big flat fields. With only two colours the design is cheap to produce, consistent and memorable, and it makes contrast easy to control.

• Look for: two dominant colours plus white or black; large flat colour fields; heavy uppercase type; photos tinted with a single colour pair.
• Best for: Music, events, product launches, any brand that needs recognition from a small palette.
• Avoid when: Pages that need colour as a status signal, since the two colours are already doing the branding.
• Accessibility: Check text against each field it crosses. Do not place text over the boundary where the two colours meet.

.hero { background: linear-gradient(135deg, #2b1055 0 55%, #ff5d8f 55% 100%); color: #fff; }
.hero img { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; background: #ff5d8f; }
h1 { text-transform: uppercase; font-weight: 900; }

Dark and technical

Styles built on dark grounds, mono type or hand-made imperfection. Strong mood, narrow audiences.

22. Dark luxury

A premium-brand convention that carried from print and retail to the web.

Dark luxury uses a near-black background, gold or champagne accents, light serif type and a lot of space to signal exclusivity. Thin lines and tracked-out capitals replace colour and decoration.

• Look for: near-black background with a warm metallic accent; light serif headlines, wide letter-spacing on small caps; thin borders and sparse layout; large, high-quality photography.
• Best for: Jewellery, watches, hospitality, fine dining, premium services.
• Avoid when: Budget and mass-market products; low-contrast gold-on-black text for body copy.
• Accessibility: Thin, light type on a dark ground is easy to under-contrast. The specimen text is 14.8:1; keep gold accents for large type and borders.

.lux { background: radial-gradient(120% 90% at 80% 0, #1a1608, #0b0b0c 60%); color: #e9dfc7; font-family: Georgia, serif; }
h1 { font-weight: 400; letter-spacing: .02em; }
.btn { border: 1px solid #c9a24a; color: #c9a24a; letter-spacing: .18em; text-transform: uppercase; }

23. Cyberpunk and neon

From science-fiction aesthetics and games, recurring in tech and gaming sites.

Cyberpunk design combines a near-black background with neon cyan and magenta, glowing text, scan-lines, glitch offsets and angular cut corners. It carries a strong mood and suits games, hardware and music, but glow and thin neon text can be tiring and hard to read.

• Look for: very dark purple or black background; neon cyan and magenta accents with glow; scan-lines, glitch text-shadows and clipped corners; monospace or angular display type.
• Best for: Gaming, esports, hardware, music and event pages.
• Avoid when: Long reading and any audience that may be sensitive to glare and flicker.
• Accessibility: Keep body text white or pale, reserve neon for headings and borders, and never animate flicker. Text-shadow glow can blur letter shapes; keep it subtle.

.cyber { background: linear-gradient(#14002a, #0a0014); color: #e6faff; font-family: "Courier New", monospace;
         border: 1px solid #00f0ff; box-shadow: 0 0 18px rgba(0,240,255,.35); }
h1 { color: #00f0ff; text-shadow: 0 0 8px #00f0ff, 2px 0 #ff2bd6; text-transform: uppercase; }
.btn { background: #00f0ff; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

24. Terminal and monospace

Inherited from command-line interfaces and early computing.

Terminal style uses monospace type, a black background, single-colour text, prompt symbols and a blinking cursor. It signals engineering credibility and speaks directly to developers, and it is cheap to build and fast to load.

• Look for: monospace type throughout; high-contrast green, amber or white on black; prompt characters and a cursor; bracketed text buttons.
• Best for: Developer tools, documentation, technical blogs, security and infrastructure brands.
• Avoid when: Mainstream consumer audiences who may not recognise the metaphor.
• Accessibility: Contrast is usually excellent (14.6:1 in the specimen). Make sure the blinking cursor can stop and does not carry meaning.

.term { background: #0c0c0c; color: #33ff66; font-family: "Courier New", ui-monospace, monospace; }
h1::before { content: "$ "; opacity: .7; }
h1::after { content: ""; display: inline-block; width: .6em; height: 1em; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

25. Organic and hand-drawn

A reaction to uniform grids and, more recently, to generated imagery.

Organic design embraces imperfection: wobbly borders, hand-lettered type, paper-cut shapes, natural colours and slight rotations. It feels human and warm, and recent trend writing links it to a backlash against polished, machine-made visuals.

• Look for: irregular border radii and slightly rotated blocks; handwritten or rounded type; earthy, muted colour palettes; hand-drawn icons and illustrations.
• Best for: Food, wellness, education, small businesses, community and craft brands.
• Avoid when: Data tables and enterprise dashboards; handwriting fonts get tiring at length.
• Accessibility: Handwriting fonts are harder to read for many people. Use them for short headings and keep body text in a plain face; a font stack of system handwriting fonts can differ by device.

.note { background: #fff8e7; border: 2.5px solid #3b2f2a;
         border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; transform: rotate(-.6deg); }
.btn { border-radius: 30px 8px 26px 10px; transform: rotate(1deg); }
body { font-family: "Segoe Print", "Bradley Hand", cursive; }

Contrast measured on every specimen

The table repeats the chart with the button numbers added. Two patterns stand out. First, the styles that rely on translucency or bright flat colour (glass, flat, aurora) are the ones that need checking; the plain, heavy-ink styles (brutalism, minimalism, editorial, terminal) almost cannot fail. Second, a passing text ratio does not mean the design is accessible: neumorphism passes for text and still fails for its shapes.

How to choose a style

Start from the visitor and the task, not the trend. Ask what the page must do (explain, sell, entertain, reassure), who is looking (a developer on a laptop, a parent on a phone, a buyer comparing prices) and how long they will read. Then choose the style whose constraints help: calm styles for reading and comparison, loud styles for attention and memory, depth styles for tactility, layout styles for scanning, dark styles for mood.

If two styles fit, pick the one that is easier to keep consistent as the site grows. A bento grid or an editorial column is a system; a one-off collage is not. And look at the type before the decoration: a plain page with excellent type beats a decorated page with weak type, which is why the cost of web fonts vs system fonts and the readability limits of justified text matter in every style above.

Mixing styles without a mess

Real sites rarely use a pure style. The mixes that work follow one rule: one style sets the structure and a second appears only in small, deliberate places. A minimal layout with neo-brutalist buttons works because the buttons are the only loud thing. An editorial article with a bento summary block works because the block is a different job. The mixes that fail put two depth styles together (glass over neumorphism) or put a loud style behind long text.

• Pick the structure first: grid, column or tiles.
• Pick one surface language: flat, layered, glass or textured, not three.
• Limit the accent: one hard shadow, one gradient, one animated element per screen.
• Keep text on a calm surface: a solid panel behind long text is allowed in every style.

An accessibility check that works for any style

Style does not change the rules. Run these checks on whichever style you choose, and treat the 10-minute accessibility test as the quick version:

• Text contrast: 4.5:1 for normal text and 3:1 for large text (WCAG 1.4.3). Measure against the worst point behind the text for gradients, blur and images.
• Non-text contrast: controls and their boundaries need 3:1 against neighbours (WCAG 1.4.11), which is where neumorphism and thin neon outlines struggle.
• Focus: every interactive element needs a visible focus state, including in styles that remove borders.
• Motion: anything that moves automatically for more than five seconds needs a pause, stop or hide control (WCAG 2.2.2), and animations should respect prefers-reduced-motion.
• Text over images and patterns: put long text on a solid or tinted layer.
• Automated tools are not enough: they miss most of this; see why automated accessibility testing misses WCAG failures.

For a broader review of a finished design, the UI/UX design checklist covers hierarchy, consistency, feedback and empty states.

What each style costs in performance

Most of these styles are only CSS, so the page weight is small. The cost is rendering. backdrop-filter blur, large filter: blur() blobs, many layered box-shadows and long-running animations make the browser repaint more, and that is noticeable on low-end phones. I have not benchmarked each specimen, so treat this as a guide to what to test rather than a measurement:

• Blur and glow: glassmorphism, aurora and cyberpunk. Keep blurred areas small and avoid animating them on large screens.
• Textures and illustrations: skeuomorphism, vintage print and isometric scenes. Prefer CSS gradients and SVG over large raster images.
• Animation: kinetic type and aurora. Animate transform and opacity only, and stop the animation when it is off screen.
• Everything else: flat, minimal, Swiss, editorial, brutalism, Bauhaus, terminal and neo-brutalism are cheap to render.

If the hero is large and decorative, check that it is not your slowest element: how to find and fix a slow LCP element.

What this does not cover

Further reading

• LogRocket on web brutalism and Creative Bloq on brutalist sites, on Pascal Deville and brutalistwebsites.com.
• Wikipedia on neumorphism and Built In on its accessibility problems.
• Line25's web design trends 2026, one of the trend roundups behind the comments on bento and neo-brutalism (opinion).
• W3C: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast and 2.2.2 Pause, Stop, Hide.