Web Design articles
Semantic Color Tokens: Naming Primary and Surface Colors
Name colour tokens by their job, pair surfaces with readable foregrounds, and map light and dark palettes without leaking raw colour choices into every component.
Noor HaddadSidebar 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.
Theo OkaforAnalogous Color Palette: Build One With Clear Hierarchy
Build harmonious analogous palettes with neighbouring hues while preserving clear accents, useful neutrals, and readable foreground-background combinations.
Noor HaddadGlassmorphism 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.
Maya LindqvistSVG viewBox Explained: Scale Icons Without Cropping
Understand SVG viewBox coordinates, intrinsic dimensions, and aspect-ratio behavior so icons scale predictably without clipped strokes or distorted shapes.
Aiko TanakaLetter Spacing and Kerning in CSS: Practical Tracking
Tune letter spacing without damaging readability. Learn when to adjust tracking, how kerning differs, and how to test headlines, capitals, and small labels.
Noor HaddadFigma Component Variants and Properties: A Library Guide
Reduce Figma variant sprawl with intentional property axes, clear state boundaries, tested component sets, and a practical contract that developers can implement.
Maya LindqvistCard Sorting for Information Architecture: A Guide
Plan open and closed card sorts, choose representative content, interpret grouping patterns, and turn research findings into a navigation hypothesis.
Noor HaddadMonogram Logo Design: Keep Your Initials Readable
Develop a compact monogram with a deliberate letter hierarchy, balanced shared strokes, small-size tests, and practical rules for production and brand recognition.
Arjun Raman