UI/UX library · inspiration

Web design trends 2026

What's current in web and UI design, gathered from three 2026 trend reports. Each trend is tagged for search and marked for whether it suits a readable, adult page or is awareness only.

Layout & structureFits

Bento grid

Content split into asymmetric, card-like modules, each holding one feature, stat, or widget under one hierarchy.

gridcardsdashboardmodular
Converge
Layout & structureAwareness

Experimental navigation

Radial menus, hidden drawers, and interactive maps replacing the standard Home / About / Contact path.

navigationmenunonlinearwayfinding
Figma
TypographyUse with care

Bold, kinetic typography

Oversized, variable-weight headlines that stretch or shift on scroll - type as the main visual, not imagery.

typographyheadlinevariable-fontscroll
Figma · Converge
TypographyFits

Fluid typography (clamp)

CSS clamp() scales type smoothly across viewport sizes, replacing hard breakpoints. Pure readability win.

responsivecssclampviewport
Tubik
Colour & textureUse with care

Vibrant dopamine colour

Bright, saturated palettes, neon gradients, high-contrast pairings replacing muted minimal tones.

colorneongradienty2k
Figma
Colour & textureAwareness

Dark mode (OLED)

True-black backgrounds with glow accents, tuned for OLED. Against the house light-theme rule - awareness only.

dark-modeoledcontrasttoggle
Figma · Converge
Aesthetic & styleFits

Stark minimalism

Intent-first: aggressive white space, thin type, stripped copy, guiding the eye to one value. Matches our own ethos.

minimalismwhitespaceintentconversion
Converge
Aesthetic & styleFits

Restrained gloss

A pushback on decorative blur and glass - keep the effect only where it serves the product, drop it where it hurts legibility.

glassmorphismrestraintlegibilityfunction
Tubik
Aesthetic & styleAwareness

Brutalism

Sharp geometry, single-pixel borders, monospace, film-grain. Reads like a control panel - fights readability on a teaching page.

brutalismrawmonospacegrid
Figma · Tubik · Converge
Aesthetic & styleAwareness

Neumorphism

Soft shadows making elements look raised or inset - tactile but low-contrast, which undermines accessibility.

neumorphismshadowsoft-uitactile
Figma
Aesthetic & styleAwareness

Retrofuturism

Neon accents, chrome, pixel art, arcade gradients mixing vintage and futuristic cues. Tone doesn't suit an adult page.

retroneonchromepixel-art
Figma
Aesthetic & styleUse with care

Maximalism

Dense, layered compositions: rich colour, overlapping visuals, high energy. Fights the "say it once, plainly" rule.

maximalismdenselayeredbold
Figma
3D & animationFits

Purposeful motion

Motion that confirms actions and builds trust - a short delay on submit, hover feedback, magnetic cursors - not decoration.

motionmicro-interactionfeedbackhover
Figma · Tubik · Converge
3D & animationAwareness

3D & spatial visuals

Lightweight WebGL scenes: interactive models, tilt and parallax on cursor or scroll. Engineering overhead rarely worth it for gov pages.

3dwebgldepthparallax
Figma · Converge
3D & animationAwareness

AR product integration

3D models projected into the user's own space via the phone camera, embedded in the browser with no app.

araugmented-realitywebxrcamera
Figma · Converge
Interaction & AIFits

AI as copilot, not autopilot

AI stays optional and dismissible - offers choices in a sidebar instead of taking over the flow. Matches how Zalia sits beside the user.

aicopilotdismissiblesidebar
Tubik
Interaction & AIFits

Agentic AI concierge

Proactive, multi-step, context-aware assistants that generate UI or data views mid-conversation, not just answer questions.

chatbotagenticconversationalconcierge
Figma · Converge
Interaction & AIFits

Voice interfaces

Hands-free navigation, search, and form-filling by spoken command, with audio visualisers giving visual feedback. The Zalia pattern.

voicevuihands-freeaccessibility
Figma · Converge
Interaction & AIWith care

AI hyper-personalisation

Layout and content shift per visitor by behaviour; forms adapt question by question. Useful for guiding a citizen - but needs a privacy check.

personalizationadaptiveformsbehavior
Figma · Converge
Interaction & AIUse with care

Gamified flow

Points, badges, progress bars woven into a task. A plain progress bar fits a long form; badges and leaderboards read as unserious.

gamificationprogress-barbadgesreward
Figma
Interaction & AIAwareness

Crafted, not prompted

Designers signalling hand-made, non-AI work as a mark of authorship. A branding trend, not a page pattern.

authorshiphuman-madecraftanti-ai
Tubik
Content & imageryUse with care

Collage / scrapbook

Sticker graphics, torn textures, cutout photos, hand-drawn fonts for an expressive, personal feel. Clashes with a formal tone.

collagestickercutouttexture
Figma
Content & imageryFits

Data storytelling

Animated, interactive charts reacting to scroll and hover - raw metrics turned into a trustworthy display. Our cockpit language.

data-vizdashboardanimated-chartreal-time
Converge
Performance & inclusiveFits

Sustainable, lean web

Leaner code, optimised images, low-impact hosting, no dark patterns. Aligns with fast, honest, accessible government pages.

sustainabilityperformanceleanaccessibility
Figma
Performance & inclusiveFits

Reduce-motion controls

Explicit "reduce motion" settings and dismissible animation, letting users choose their own visual intensity. A plain accessibility win.

accessibilityreduce-motionuser-controlwcag
Tubik

No trend matches. Try a broader word - motion, ai, type, grid - or pick All.

Fits suits a readable, adult page · Use with care only in the right dose · Awareness know it exists, not for a teaching page. Sources: Figma · Tubik · Converge.