Skip to main content

Glossary · framework

Atomic Design

Brad Frost's hierarchical design system methodology that scales components from atoms (button, input) to organisms (header, card) to pages.

Atomic design organizes a UI into five tiers: atoms (smallest units like a button or label), molecules (combinations like a search bar), organisms (full sections like a navigation), templates (page-level layouts), and pages (real content). The advantage for AI agents is fitness — a well-built atomic registry exposes every primitive as a token-backed component, which makes a transferred design language easier to manifest as code. AI2 Design's Launchpad product ships a curated atomic registry as starter code.

External reference

Brad Frost — Atomic Design
All glossary terms

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.