Grid + Spacing
Grid + Spacing
Grid + Spacing
Grid + Spacing
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
The basis of our design system is an 8px grid.
However, our system is driven by usability. There are instances where additional flexibility is required. In these cases we allow for a 4px grid to ensure user experience is not hindered by arbitrary rules.
◢
Overview
The grid is the foundation of our design system. All components, measurements, and typography are based on multiples of 8. This allows us to keep an underlying harmony and consistency across our diverse product experiences.
SOFT GRID
When designing layouts we employ a "soft grid" system. This means that individual elements are positioned relative to each other rather than aligning to an underlying grid. Programming languages like React do not use an underlying grid structure. So, rather than requiring the extra step of designing to a grid that will ultimately be discarded, we rely on the final code as our source of truth in terms of user experience.
SPACING
Our spacing increments follow the same 8px grid system.
Design elements and components are built using the following spacing increments.
The basis of our design system is an 8px grid.
However, our system is driven by usability. There are instances where additional flexibility is required. In these cases we allow for a 4px grid to ensure user experience is not hindered by arbitrary rules.
◢
Overview
The grid is the foundation of our design system. All components, measurements, and typography are based on multiples of 8. This allows us to keep an underlying harmony and consistency across our diverse product experiences.
SOFT GRID
When designing layouts we employ a "soft grid" system. This means that individual elements are positioned relative to each other rather than aligning to an underlying grid. Programming languages like React do not use an underlying grid structure. So, rather than requiring the extra step of designing to a grid that will ultimately be discarded, we rely on the final code as our source of truth in terms of user experience.
SPACING
Our spacing increments follow the same 8px grid system.
Design elements and components are built using the following spacing increments.
Examples
Notes + Specifications
