Nucleo.png
Why.png

How to build the Nucleus design system?

Who.png

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

Group 5.png

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.

WCAG.png

Atom - Colors

Colors.png

Atom - Spacing & grid

spacing.png
Spacing_2.png

Atom - Typography

font.png

Atom - Icons

Icons.png

Molecules - Buttons

Buttons.png

Molecules - Selector

Selectors.png

Molecules - Toggle

Toggle.png

Molecules - Search/Input/Text field

Text field.png

Organisms - Components

Watch the real time online activities on the different kid’s profiles

components.png