UI Design System Guide

Overview

This guide covers the creation of visual design systems, component libraries, and responsive layouts with developer-ready specifications. The approach follows a strict order: design tokens first, components second, screens last.

Core Requirements

• Every interactive element needs five states: default, hover, active, focus-visible, disabled.
• All color pairings must meet WCAG AA contrast (4.5:1 for normal text, 3:1 for large text).
• Touch targets must be at least 44x44px.
• Motion must respect prefers-reduced-motion by defaulting to no animation and enhancing for users who allow it.
• When a brand color fails contrast checks, create a darker/lighter variant for text use and document both.

Token Strategy

Define the full token set before designing any component. Tokens are the single source of truth. Token categories: primary colors, secondary/neutral colors, semantic colors (success, warning, error, info), typography (family, size scale), spacing (4px base grid), shadows, and motion durations.

Component Checklist