Design System Learning

Implementation of a 3-month UI/UX design system course, focusing on modern design principles and implementation.

Course Structure

Week 1: Design Fundamentals

• ✅ Day 1: Typography System
  • Blog post component
  • Type scale implementation
  • Font pairing & hierarchy
• 📝 Day 2: Color Theory (Upcoming)
• 📝 Day 3: Layout Systems (Upcoming)

Week 2: Component Architecture (Upcoming)

Week 3: Advanced Patterns (Upcoming)

Project Structure

src/
├── exercises/
│   └── weeks/
│       └── week-1/
│           └── typography/
│               ├── BlogPost.tsx
│               └── styles/
│                   └── typography.css
├── App.tsx
└── App.css

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

Technologies

• React
• TypeScript
• CSS Custom Properties
• Google Fonts

Progress Tracking

• Week 1, Day 1: Typography Implementation
• Week 1, Day 2: Color Theory
• Week 1, Day 3: Layout Systems

Resources

• Course Materials
• Design System Examples
• Implementation Guides

License

MIT