Stockio
Web DesignWeb DevelopmentTechToolsResourcesAdvertise

Web Design articles

UI DesignUX & ResearchTypography & ColourIcons & IllustrationDesign SystemsMotion & AnimationBranding & BusinessAI for Design & UX

Web Development articles

HTML & CSSJavaScript & FrameworksBackend & APIsPerformance & SEODevOps & DeploymentAccessibilityDev Tools & AI CodingAI Builders & APIs

Tech articles

Smartphones & TabletsLaptops & PCsSmart Home & GadgetsHome Wi-Fi & InternetOnline Security & ScamsStreaming & GamingWeb Hosting & ServersVPN & Online Privacy
Articles

Design Systems

Tokens, component libraries, Figma variables, documentation and the governance that keeps a system alive.

Design Systems

Multi-Brand Design Systems: Share Components, Keep Brands

Architect a multi-brand design system with stable semantic roles, explicit brand boundaries, scoped theme application, and a test strategy for supported combinations.

Inside this article
  • Separate brand expression from shared behavior
  • Define the theme contract explicitly
  • Scope brand values at application boundaries
  • Test supported combinations rather than imagined freedom
Jonah WeissJonah WeissRead the article
Design Systems

Design Tokens Explained: Bridging Designers and Developers

Create a practical design-token system with semantic color roles, CSS custom properties, reviewed conversions, and a safe migration process for teams.

Jonah WeissJonah Weiss
Design Systems

How to Deprecate Design System Components Safely

Plan component deprecations with usage evidence, replacement contracts, migration guidance, compatibility windows, and removal checks that product teams can verify.

Maya LindqvistMaya Lindqvist
Design Systems

Design System Versioning: What Counts as Breaking?

Apply semantic versioning to component APIs, visual contracts, themes, and design assets, with clear release notes and migration checks for downstream product teams.

Maya LindqvistMaya Lindqvist
Design Systems

Design System Governance: A Contribution Process That Ships

Set up a lightweight design system contribution process with clear ownership, decision rights, review gates, and release criteria that keep product teams moving.

Inside this article
  • Define decision rights and service boundaries
  • Create a small contribution proposal
  • Review reuse without centralizing every decision
  • Separate acceptance from release readiness
Maya LindqvistMaya LindqvistRead the article
Design Systems

Design System Documentation: A Component Page Template

Build component documentation around decisions, supported states, API contracts, and maintenance ownership, with a practical template for a reliable library reference.

Jonah WeissJonah Weiss
Design Systems

Figma 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 LindqvistMaya Lindqvist
Design Systems

Figma Variables and Modes: How to Organize Collections

Organize Figma variable collections and modes around independent decisions, with clear aliases, naming rules, code mappings, and a publishing checklist for teams.

Maya LindqvistMaya Lindqvist
Design Systems

Design System Naming Conventions for Components

Create component naming conventions that map cleanly between Figma and code, clarify variants, prevent ambiguity, and support safe renaming as your library grows.

Inside this article
  • Start with a shared naming model
  • Name by purpose rather than appearance
  • Separate components, variants, and states
  • Make discovery work in both tools
Jonah WeissJonah WeissRead the article
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.

Jonah WeissJonah Weiss