The Empire UI blog

2026-10-19 · 8 min read

Dark Mode Color Palette System: Semantic Tokens That Actually Work

Stop shipping broken dark modes. Build a semantic token system with CSS variables that adapts correctly across light and dark without the copy-paste hell.

Read →

2026-10-07 · 9 min read

Monorepo Design System: Shared Packages, Storybook, Publishing

Set up a production-ready monorepo design system with Turborepo, shared packages, Storybook docs, and npm publishing - from workspace config to first release.

Read →

2026-09-27 · 8 min read

Chromatic Visual Testing: Storybook Snapshot Diffing for Components

Chromatic catches visual regressions before your users do - here's how to wire Storybook snapshot diffing into your CI pipeline and stop shipping broken components.

Read →

2026-09-25 · 9 min read

Testing a Design System: Visual Regression, Accessibility, API Tests

A practical guide to testing design systems with visual regression, accessibility audits, and component API tests - without drowning in flaky snapshots.

Read →

2026-09-25 · 8 min read

Elevation and Shadow System in CSS: Z-index, Shadows and Depth

Build a real elevation system in CSS - from z-index stacking contexts to layered box-shadows and design tokens that scale across your whole UI.

Read →

2026-09-24 · 8 min read

Border and Outline System: radius, width, style Tokens in CSS

Stop hardcoding border values. Build a token-based border and outline system in CSS that handles radius, width, and style consistently across every component.

Read →

2026-09-24 · 9 min read

Button Design System: Variants, States, Sizes and the API That Scales

Build a button system that actually scales - variants, states, sizes, and a component API that won't collapse under real product pressure.

Read →

2026-09-23 · 9 min read

Animation in Design Systems: Tokens, Reduced Motion, Choreography

How to build animation into a design system properly - tokens, prefers-reduced-motion, and choreography that actually scales across a real codebase.

Read →

2026-09-22 · 9 min read

Responsive Typography System: fluid type, scale ratios, viewport units

Build a type system that scales beautifully across every viewport - fluid clamp(), modular ratios, viewport units, and tokens that don't fight your design.

Read →

2026-09-21 · 8 min read

Design System Versioning: Semantic Versions, Changelogs and Breaking Changes

Semver, changelogs, and breaking changes explained for design systems - what actually matters when you're shipping components to a team.

Read →

2026-09-02 · 9 min read

Dark Mode Component Variants in Tailwind: Every Pattern Covered

Stop patching dark mode in after the fact. Here's every Tailwind pattern for building components that switch cleanly, from class strategy to CSS variables.

Read →

2026-08-30 · 8 min read

Button Component Variants in Tailwind: Primary, Ghost, Icon, Loading

Build a production-ready button system in Tailwind CSS - primary, ghost, icon, and loading variants with React, TypeScript, and class-variance-authority.

Read →

2026-07-26 · 8 min read

Dark Mode Color Tokens: Building a Theme That Doesn't Break Everything

Stop shipping dark mode as an afterthought. Here's how to build a real color token system with CSS variables that survives theming, components, and third-party libraries.

Read →

2026-07-26 · 9 min read

Design System Documentation: Storybook, Zeroheight and Custom Docs

Compare Storybook, Zeroheight and custom docs for your design system. Learn when to use each, how to combine them, and what teams actually ship in 2026.

Read →

2026-07-25 · 8 min read

Container Queries for Components: Component-Driven Responsive Design

Container queries let components respond to their own space, not the viewport. Here's how to build genuinely reusable, self-aware React components in 2026.

Read →

2026-06-23 · 8 min read

Design Tokens in 2026: From Figma Variables to CSS Custom Properties

Design tokens bridge Figma variables and CSS custom properties - here's how to build a token pipeline that actually survives a design system at scale.

Read →

2026-06-20 · 7 min read

Icon System in React: lucide-react, Heroicons and Custom SVGs

Pick the right icon library for your React app in 2026 - lucide-react, Heroicons, or roll your own SVG system. Here's how each one holds up.

Read →

2026-06-15 · 8 min read

CSS Custom Properties as a Design System: The Right Architecture

Build a scalable CSS custom properties architecture that powers real design systems - theming, tokens, component overrides, and dark mode without the mess.

Read →

2026-06-14 · 7 min read

Best Free UI Frameworks for React in 2026

Discover the best free ui frameworks for React in 2026, from style-rich component libraries to AI-native tooling that ships production-ready interfaces faster.

Read →