Foundations

Animation helps to establish relationships between UI elements, focuses the user's attention on important content, and guides users through the actions they take.

Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.

Cards styles are used to group related content, data, links and actions. Cards are placed within the page content.

Our color palette has been thoughtfully selected for usability, accessibility, and the ability to be optimized across different components.

Counters contain dynamic number values. Counters help users quickly identify quantities of non-visible items.

Users have the option to switch the UI to a dark theme. A dark theme is a user interface that uses a dark color scheme as the base. This means the background and main surfaces of the interface will be dark gray, with text and other elements displayed in lighter colors.

UI density is the amount of information or content shown within an area of a user interface. It affects how users perceive and interact with the interface, effecting readability and usability.

Icons add context or emphasis to elements within the user interface.

Use layout to organize visual elements and to help guide users’ attention through a user experience.

Links are primarily used for simple navigation to another page, or to an anchor within that page. Link text should be brief, and should clearly indicate what the user will be navigating to. A link is typically placed within or following a sentence, but can also be used by itself.

Responsive design allows Basis layouts and content to seamlessly adapt fit any screen, from smallest phone to widest desktop.

Elevation levels help specify the stack order and z-index of an element.

Provides a foundation to help create consistent layouts and designs.

The typographic styles that make up our Basis applications user interfaces. All styles use Source Sans Pro.