zero design system
zero design system
The Zero Design System is a learning-focused toolkit exploring modular, accessible design components. It helps understand building and organizing a cohesive design system.
design system
foundations
components
ZERO DESIGN SYSTEM
FOUNDATIONS
color system -
color system -
color system -
A color system for consistent, accessible, and purposeful design.
typography -
typography -
typography -
Typography shapes readability, hierarchy, and visual appeal in design.
Typography shapes readability, hierarchy, and visual appeal in design.
Typography shapes readability, hierarchy, and visual appeal in design.
padding -
padding -
padding -
Padding is the space around content that improves readability and layout.
Padding is the space around content that improves readability and layout.
Padding is the space around content that improves readability and layout.
spacing -
spacing -
spacing -
Spacing is the gap between elements that ensures a balanced and organized layout.
Spacing is the gap between elements that ensures a balanced and organized layout.
Spacing is the gap between elements that ensures a balanced and organized layout.
elevation -
elevation -
elevation -
Elevation adds depth and hierarchy to elements using shadows to highlight importance.
Elevation adds depth and hierarchy to elements using shadows to highlight importance.
Elevation adds depth and hierarchy to elements using shadows to highlight importance.
COMPONENTS
buttons -
buttons -
buttons -
Buttons are key UI elements that enable actions and provide interactive feedback.
Buttons are key UI elements that enable actions and provide interactive feedback.
Buttons are key UI elements that enable actions and provide interactive feedback.
cards -
cards -
cards -
Cards are versatile UI elements that neatly group related information.
Cards are versatile UI elements that neatly group related information.
Cards are versatile UI elements that neatly group related information.
input fields -
input fields -
input fields -
Input fields let users enter and edit text with supportive styles and feedback.
Input fields let users enter and edit text with supportive styles and feedback.
Input fields let users enter and edit text with supportive styles and feedback.
select dropdown -
select dropdown -
select dropdown -
The Select Dropdown lets users pick an option from a list with flexible styling.
The Select Dropdown lets users pick an option from a list with flexible styling.
The Select Dropdown lets users pick an option from a list with flexible styling.
