How to build the Nucleus design system?
Atomic Design Methodology
“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner."- Brad Frost
Web Content Accessibility Guidelines
The way to define the colors
WCAG 2 (Web Content Accessibility Guidelines is a measurable ratio of "luminance" or brightness between two colors. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white text on a white background) to 21:1 (e.g., black text on a white background). For the small text, 4.5:1 is a minimal contrast ratio. Large text is easier to read, so the contrast requirement is reduced to 3:1.
Atom - Colors
Atom - Spacing & grid
Atom - Typography
Atom - Icons
Molecules - Buttons
Molecules - Selector
Molecules - Toggle
Molecules - Search/Input/Text field
Organisms - Components
Watch the real time online activities on the different kid’s profiles