Level 1: Atoms — The Indivisible Building Blocks

Atoms are the foundational, indivisible elements of a user interface. They cannot be broken down further without losing their functional identity:

• Examples: HTML tags, color tokens (#3B82F6), typography styles, raw input fields, buttons, icons, avatars, and labels.
• Characteristics: In isolation, an atom is abstract and carries little context. A button atom sitting alone on a canvas communicates interactivity, but achieves no product goal until combined with other elements.