Nucleus is the design system of Securly

The team

I'm here
V1 design system




About this project


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.

How to approach

Redefine the foundation of Nucleus

Build new design system in Figma

Optimize corporation style

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


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


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


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.


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


Build new design system in Figma
Button style

Toggles, checkbox and radio button




Notification

Text field

Components


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.

