Nucleus is the design system of Securly

HomeCover.png
The team
team2.png

I'm here

V1 design system
Screen Shot 2022-04-21 at 12.36.13 PM.png
font.png
Icons.png
Spacing_2.png
About this project
download.png
download-1.png

Why move Nucleus from Sketch to Figma

The design team used Sketch + Invision + zeplin to cross all products before Figma. It caused an amount of inconsistency from one platform to the others. 

The mission is to

Build a living style guide, a single source of truth that is consistency, scalability and efficiency.

Mission.png

How to approach

brickwall.png
Redefine the foundation of Nucleus
construction copy.png
Build new design system in Figma
solution.png
Optimize corporation style
brickwall.png

Redefine the foundation of Nucleus

Colors

Use cases of colors

Text has a contrast ratio of at least 4.5 to 1 against its background

Color Scheme.png
Color Scheme.png

Web Content Accessibility Guidelines

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.

Figma Nucleus
ColorTextDo.png
ColorTextDont.png

Readable text 

Text has a contrast ratio of at least 4.5 to 1 against its background

ColorDotDo.png
ColorDotDont.png

High color contrast

High color contrast helps people who are partially or completely color blind see differences between certain colors. It creates a strong visual hierarchy and improves usability for everyone.

ColorVueDo.png
ColorVueDont.png

Include multiple visual cues

Don't convey information using color alone. Use multiple visual cues, such as stroke weight, patterns, shape, text, or illustrations to ensure that everyone receives the same information.

Typography

Typography.png
construction copy.png
Build new design system in Figma

Button style

Button.png

Toggles, checkbox and radio button

Toggles.png
Button.png
Button.png
Button bars.png

Notification

Notifications.png

Text field

Field.png

Components

components.png
solution.png
Optimize corporation style

How to maintain Nucleus effectivly

* The federated model. Team members from across the company come together to work on the design system. It has great insight into what is needed for all the product features and user needs.

* Invite the front-end engineer to join the process of design system creation. 

Who.png
Engineer 1.png

Redesign dashboard of
cloud-based security service

FilterUI.png

Design Kid's Profile for Online Protecting App

Home app.png