atomic-design-fundamentals

# 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

The sub-atomic building blocks - design tokens and primitive values that atoms consume. Quarks are not UI components themselves; they are the raw values that define your design language.

**Examples:**

- Color tokens (primary-500, neutral-100)
- Spacing scales (4px, 8px, 16px)
- Typography tokens (font sizes, weights, line heights)
- Border radii
- Shadow definitions
- Animation durations and easing functions
- Breakpoints

**Characteristics:**

- Pure values, not visual components
- Cannot import from any other level
- Define the design language
- Enable theming and consistency
- Single source of truth for design decisions

### 1. Atoms

The smallest functional UI units of your interface. Atoms consume quarks for styling but cannot be broken down further without losing meaning.

**Examples:**

- Buttons
- Input fields
- Labels
- Icons
- Typography elements (headings, paragraphs)
- Color swatches
- Avatars

**Characteristics:**

- Self-contained and independent
- No business logic