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.
