In-depth articles

The Stockio blog

Practical deep dives for designers, developers and creators. Every article comes with an interactive tool so you can try the technique as you read.

Design Systems

How to Audit a Component Library Before a Design System

Audit a component library with a repeatable inventory, evidence-based consolidation rules, ownership checks, and a migration backlog your product teams can use.

Inside this article

Define the audit boundary
Build an evidence-based inventory
Compare patterns by contract
Prioritize consolidation and migration

Jonah WeissRead the article

Accessibility

Accessible Icons: aria-hidden, Labels and Icon Buttons

Give every interface icon the right accessible treatment. Learn when to hide SVGs, how to name icon-only buttons, and which checks catch confusing controls before release.

Theo Okafor

Icons & Illustration

Lucide vs Heroicons vs Phosphor vs Material Symbols

Compare four popular icon families by geometry, weights, coverage and delivery, then use a repeatable audit to choose a library that fits your product.

Aiko Tanaka

Icons & Illustration

Icon Grid Design: Build a Consistent 24px Icon Grid

Build a coherent 24-pixel icon family using keylines, optical corrections, stroke rules, and practical checks that keep small interface symbols readable.

Aiko Tanaka

Typography & Colour

Button Hover Colors: Hover, Active, Focus and Disabled

Build a predictable interaction palette for buttons, links and controls. Learn how to separate hover, pressed, focus and disabled colours across light and dark themes.

Inside this article

Start with roles, not darker hex values
Separate hover, pressed and selected meanings
Give keyboard focus its own colour role
Encode state colours without cascade surprises

Jonah WeissRead the article

Typography & Colour

Dark Mode Color Palette: Surfaces, Elevation and Accents

Build a dark palette around clear surface steps, readable foreground pairs and restrained accents, then test it against real product screens rather than isolated swatches.

Jonah Weiss

HTML & CSS

HEX vs RGB vs HSL: How to Convert CSS Colors Correctly

Learn when to use HEX, RGB, and HSL, convert values without changing the intended colour, and avoid alpha, rounding, and percentage mistakes in CSS.

Marcus Bell

Typography & Colour

Vertical Rhythm and Baseline Grids: Worth It on the Web?

Learn when baseline grids improve web typography, when they become unnecessary constraints, and how to build a practical vertical rhythm that survives responsive content.

Mateo Fernández

Typography & Colour

Typographic Hierarchy: Heading Size, Weight and Spacing

Build a heading hierarchy that readers can scan quickly. Learn how to combine type size, font weight and spacing without making every heading compete for attention.

Inside this article

Start with content roles, not a size ladder
Use size contrast where it carries meaning
Give weight and spacing separate jobs
Encode a small, explicit hierarchy

Jonah WeissRead the article

Typography & Colour

CSS Line Height: Comfortable Spacing for Body Text

Set readable CSS line heights for paragraphs, headings, and compact labels. Learn how font metrics, line length, and inherited values change the result.

Jonah Weiss

UX & Research

User Interview Questions That Reveal Real Needs

Plan user interviews around recent behavior, write neutral questions, and turn concrete stories into evidence your team can use for product decisions.

Noor Haddad

UI Design

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.

Maya Lindqvist

Browse another topic