
THE LAST OF ME

DISTANT TIME
Beautification
Start off in a shower cap and brush your teeth before your makeup brushes magically come to life to glam you up for the day! The rear camera effect reveals red, squeezable lips floating throughout your environment.”


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

Redesign dashboard of
cloud-based security service

Design Kid's Profile for Online Protecting App
