Design System Redesign - Devlog

A Complete Design Language

The design system redesign touched every layer of motivka's visual identity. It began with token consolidation — a 10-step spacing scale, aligned typography, elevation tokens, and shared animation tokens. Brand colours were surfaced through accent roles, gradient tokens, and the full warm sunset palette including navy and aubergine.

Card System

Cards were unified into a single self-contained Card component with outlined and interactive variants. The redundant CardCompact was removed. SolutionCard was audited to compose cleanly on the base card.

New Atoms

Six new atoms filled gaps: Icon, Badge, Divider, Avatar, Skeleton, and updated barrel exports. The form system received FormGroup wrappers with CSS-driven validation states and consistent input visuals.

Navigation

Breadcrumb, Header active page state, and Footer brand audit completed the wayfinding improvements. A cleanup phase resolved 18 bugs and ad-hoc tasks accumulated during the build.

Features Delivered

Token Consolidation

10-step spacing scale — Renamed and extended spacing tokens
Typography alignment — Consistent type scale across all components
Elevation and animation tokens — Z-index scale and shared motion tokens

Brand Colours

Accent roles and gradients — Full warm sunset palette with navy and aubergine
TagPill colour prop — Category-aware colour variants

Card Consolidation

Unified Card component — Self-contained card with outlined and interactive variants

Missing Atoms

6 new atoms — Icon, Badge, Divider, Avatar, Skeleton, barrel exports