UI Design

Organic UI Design: Custom Border Radius and Shapes

Create organic CSS shapes with eight-value border radii, controlled motion, and responsive checks that preserve readable content and usable controls.

Empty State Design for First Use, No Results and Errors

Design empty states that explain what happened and offer the right next step, with distinct patterns for first use, filtered results, and failed requests.

Settings Page Design: Grouping, Layout and Saving

Design settings pages that make ownership, dependencies and saving behavior clear, with practical layouts for account preferences, workspace controls and risky actions.

Maya LindqvistRead the article

Data Table Design: Column Widths, Density and Actions

Make dense data tables easier to scan with practical rules for column sizing, numeric alignment, row spacing, status treatments, and responsive overflow.

Inside this article

Prioritize columns before styling rows
Choose density without sacrificing scan paths
Build a resilient table surface
Keep actions separate from comparison

Soft Shadows in CSS: Box Shadow Techniques for UI

Create layered shadows that communicate elevation, stay visible across themes, and avoid costly animation with practical CSS tokens and visual checks.

SaaS Landing Page Hero Section Design That Converts

Structure a SaaS hero around a clear promise, credible proof, and one primary action, then implement responsive visuals and measure qualified signups.

Sidebar UI Design: Width, Grouping and Collapsed Rails

Design application sidebars that stay legible as products grow, with practical guidance for section grouping, selected items, collapsed rails, and narrow screens.

Maya LindqvistRead the article

Glassmorphism CSS: Build UI Cards Without Hurting Speed

Build readable glassmorphism cards with practical blur limits, accessible fallbacks, and a repeatable profiling workflow for smoother production interfaces.

Inside this article

Define what the glass needs to communicate
Build an opaque baseline first
Protect contrast across the whole backdrop
Budget rendering work where it matters

Responsive Navigation Menu Design Without Clutter

Plan responsive website headers with clear navigation priority, reliable spacing, compact-screen behavior, and room for long labels and account controls.

Button Design: Primary, Secondary, Sizes and States

Build a clear button hierarchy with practical guidance on sizing, labels, icon placement, destructive actions, and state designs that do not shift layouts.

Toast vs Banner vs Inline Alert: Notification UI Design

Choose the right notification surface for each event, write actionable messages, and design timing, placement and recovery states that keep people in control.