Box
Put simply, a box is a simple container. The box itself is not interactive: it has no hover, pressed, focus or disabled state.
Breakpoints
Colors
Dividers
A divider aids in grouping content.
Duotone Icons
Decorative, non-functional imagery
Grids & Spacing
Iconography
The icon set used in product is called Font Awesome Icons with custom icons added to fit our needs.
Illustrations & GIFs
Rounded corners
We use rectangles with rounded corners because they are easier on the eyes than a rectangle with sharp edges. Rounded corners not only take less cognitive effort to visually process, they also give our UI a more modern look-and-feel.
Scrims
Scrims, aka overlays or masks, are darkened backgrounds that help users focus on an important modal or bottom sheet. When implementing, always apply to the entire page, including left navigation and product header.
Shadows
A natural-looking shadow makes a big impact to a design. They communicate depth to the user, helping them differentiate between the surface layer and those above it. Shadows are supported in portraying depth by borders and background colors.
Typography
Plus Jakarta Sans is used in 18 different styles on desktop and 15 different styles on mobile. Our fallback is san-serif and our base element size is 1rem = 16 px. Secondary fonts coming soon.