Skip to content

Two subjects, one word apart

Design system.
System design.

Same two words, opposite order, very different jobs. Use the toggle at the top: the left button opens how to build a good design system, the right button opens how to answer system design interview questions.

Left toggle

Design System

A practical guide to building one with atomic design: tokens, atoms, molecules, organisms, templates and pages — plus typography, charts, accessibility and responsive design.

  1. Design tokens
  2. Colors
  3. Typography
  4. Spacing
  5. Color science & perception
  6. Atomic Design
  7. Layout
  8. Elevation
  9. Iconography
  10. Component API design
  11. Data display
  12. Charts
  13. Scientific charts
  14. Data grids & tables
  15. Feedback
  16. Forms
  17. Navigation
  18. Overlays
  19. Animation
  20. Accessibility
  21. Responsive design
  22. Theming & dark mode
  23. Internationalization & RTL
  24. Governance
  25. Laws of UX

Right toggle

System Design

Popular interview problems, each with requirements, back of the envelope numbers, an architecture diagram, the design decisions and the follow-up questions with answers.

  1. URL shortener
  2. Rate limiter
  3. Unique ID generator
  4. Distributed key-value store
  5. Twitter/X feed
  6. Instagram photo sharing
  7. YouTube video sharing
  8. Uber ride hailing
  9. Chat system
  10. Notification service
  11. Dropbox file sync
  12. Google Docs collaboration
  13. Recommendation system
  14. Ticketmaster event booking
  15. Stripe payments
  16. Autocomplete / typeahead
  17. Web crawler & search engine
  18. Content delivery network (CDN)
  19. Distributed cache
  20. Distributed message queue
  21. Distributed lock service
  22. API gateway
  23. Load balancer
  24. Service discovery