After spending time exploring and practicing Atomic Design, this project gave me the chance to truly put those lessons into practice and build a design system with real impact.
Step 1: Establishing the 3-Tier Token Architecture
Goal: to support brand differentiation (B2B vs B2C) and maximize scalability across all 4 products, we structured the Design Tokens using the 3-Tier hierarchy (TailwindCSS - Theme - Mode).
Tailwind CSS/CSS Variables
The fixed, foundational layer. We utilize Tailwind's utility classes and CSS variables as raw primitives to maximize development speed and leverage existing standards.
Theme
Goal: Ensure core consistency and branding. This layer maps Tailwind values to functional roles (e.g., $color-primary, $border-subtle). This forms the consistent visual identity across all Hamlet products.
Mode
Goal: Handle high-level variants and platform differences. This layer overrides Theme Tokens based on specific context (e.g., handling Light/Dark Mode, or adjusting size/density for the Mobile App environment versus the Admin Hub).
Step 2: Core Component Development and Strategic Documentation
Goal: Apply the Tokens to build complex Components (like Data Tables, Forms) and create detailed Documentation to ensure the DS is immediately reusable across all 4 products.
Sidebar Components
Goal: Apply the Tokens to build complex Components (like Data Tables, Forms) and create detailed Documentation to ensure the DS is immediately reusable across all 4 products.
