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