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
Predefined screen widths to provide an optimal and responsive user experience across devices, based on the most popular device screen sizes.
Colors
Homebase's brand colors and guidelines for using them consistently across digital interfaces to ensure accessibility, clarity, and brand cohesion.
Dividers
A divider aids in grouping content.
Duotone Icons
Decorative, non-functional imagery
Grids & Spacing
Grids provide consistent spacing of components.
Iconography
The icon set used in product is called Font Awesome Icons with custom icons added to fit our needs.
Illustrations & GIFs
Illustrations add visual interest and contribute to a cohesive brand identity.
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.