atomic-design-quarks
Atomic Design: Quarks
Master the creation and organization of quarks - the sub-atomic design tokens and primitive values that form the foundation of your design system. Quarks are the smallest building blocks that atoms consume.
What Are Quarks?
Quarks extend Brad Frost's Atomic Design methodology by adding a level below atoms. While atoms are the smallest UI components, quarks are the smallest design values - the raw materials from which atoms are built.
Quarks are:
- Primitive Values: Colors, spacing units, font sizes, shadows
- Non-Visual: They don't render anything on their own
- Design Tokens: Named constants that define your design language
- Consumed by Atoms: Atoms import and use quarks for styling
Quarks vs Atoms
| Aspect | Quarks | Atoms |
|---|
More from thebushidocollective/han
android-jetpack-compose
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
1.1Kfastapi-async-patterns
Use when FastAPI async patterns for building high-performance APIs. Use when handling concurrent requests and async operations.
785storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
487atomic-design-fundamentals
Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
364solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
248angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216