Atomic Design Fundamentals

Master Brad Frost's Atomic Design methodology (extended with quarks) for building scalable, maintainable component-based user interfaces. This skill covers the core hierarchy, principles, and organization strategies for modern design systems.

Overview

Atomic Design is a methodology for creating design systems inspired by chemistry. Just as atoms combine to form molecules, which combine to form organisms, UI components follow a similar hierarchical structure. We extend this with quarks - the sub-atomic level of design tokens:

0. Quarks - Design tokens (colors, spacing, typography scales, shadows)
1. Atoms - Basic building blocks (buttons, inputs, labels)
2. Molecules - Groups of atoms functioning together (search form, card)
3. Organisms - Complex UI sections (header, footer, sidebar)
4. Templates - Page-level layouts without real content
5. Pages - Templates with real representative content

The Six Stages

0. Quarks