Get Started

Foundations

Components

Patterns

Voice and Tone

Basis design system

Search docs…

Basis design system

Search docs…

Get Started

Foundations

Components

Patterns

Voice and Tone

Basis design system

Basis Design System

The Basis Design System is a collection of visual and experience guidelines as well as technical standards for Basis Technologies application development. This flexible and scalable system is comprised of reusable artifacts that create a common visual language and consistent experience throughout Basis.

Last Updated

Mar 20, 2025

Introduction

This collection of elements and components is much more than a style guide or a component library.

Learn more

For Designers

The designer help documents provide guidance and support to product designers at Basis Technologies.

Learn more

Contribution

Contribution to the design system is open to all internal team members.

Learn more

What's New

View all

Maecenas faucibus mollis interdum.

Donec id elit non mi porta gravida at eget metus.

Mar 20, 2025

added guidance for Button Group with Dropdown Button
updated Designer Help docs with in-page navigation links

Mar 20, 2025

added guidance for Button Group with Dropdown Button
updated Designer Help docs with in-page navigation links

Mar 20, 2025

added guidance for Button Group with Dropdown Button
updated Designer Help docs with in-page navigation links

Mar 5, 2025

added help docs for Figma components which includes a guide on how to swap out component "slots" with custom content.

Mar 5, 2025

added help docs for Figma components which includes a guide on how to swap out component "slots" with custom content.

Mar 5, 2025

added help docs for Figma components which includes a guide on how to swap out component "slots" with custom content.

Maecenas faucibus mollis interdum.

Donec id elit non mi porta gravida at eget metus.

Foundations

View all

Ready

Animation

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

Ready

Animation

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

Ready

Animation

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

Ready

Badge

A badge is a label that's used to bring attention to important information. Badges are non-interactive and can display status, categories, or properties.

Ready

Badge

A badge is a label that's used to bring attention to important information. Badges are non-interactive and can display status, categories, or properties.

Ready

Badge

A badge is a label that's used to bring attention to important information. Badges are non-interactive and can display status, categories, or properties.

Ready

Borders

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

Ready

Borders

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

Ready

Borders

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

Ready

Cards

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

Ready

Cards

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

Ready

Cards

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

Components

View all

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Ready

App Header

The App Header contains the global navigation and actions and can be accessed from any page across Basis applications.

Ready

App Header

The App Header contains the global navigation and actions and can be accessed from any page across Basis applications.

Ready

App Header

The App Header contains the global navigation and actions and can be accessed from any page across Basis applications.

Ready

Buttons

Buttons are clickable items used to perform a direct action.

Ready

Buttons

Buttons are clickable items used to perform a direct action.

Ready

Buttons

Buttons are clickable items used to perform a direct action.

Ready

Calendar

The Calendar allows users to visually select a date from a calendar grid for quick and accurate date selection.

Ready

Calendar

The Calendar allows users to visually select a date from a calendar grid for quick and accurate date selection.

Ready

Calendar

The Calendar allows users to visually select a date from a calendar grid for quick and accurate date selection.

Patterns

View all

Ready

Bulk Editing

A bulk editing design pattern allows users to efficiently and conveniently modify multiple items or data entries at the same time.

Ready

Bulk Editing

A bulk editing design pattern allows users to efficiently and conveniently modify multiple items or data entries at the same time.

Ready

Bulk Editing

A bulk editing design pattern allows users to efficiently and conveniently modify multiple items or data entries at the same time.

Ready

Choosing Selection Controls

Choosing the appropriate selection control can be a daunting task. Consider the nature of the interaction, the number of options available, and the structure of any accompanying secondary content. Use the tool below to assist you in making an informed decision.

Ready

Choosing Selection Controls

Ready

Choosing Selection Controls

Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Ready

Data Visualization

Data visualizations make complex data easier to understand and help users answers specific questions.

Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Voice and Tone

View all

Ready

Error Handling

This page provides guidelines for using positive, helpful, and polite language when displaying error messages to users in the Basis design system.

Ready

Error Handling

This page provides guidelines for using positive, helpful, and polite language when displaying error messages to users in the Basis design system.

Ready

Error Handling

This page provides guidelines for using positive, helpful, and polite language when displaying error messages to users in the Basis design system.

Ready

Mechanics

This page provides guidelines for the mechanics of writing, including formatting for file sizes, file extensions, acronyms, abbreviations, punctuation, and capitalization in the Basis design system.

Ready

Mechanics

This page provides guidelines for the mechanics of writing, including formatting for file sizes, file extensions, acronyms, abbreviations, punctuation, and capitalization in the Basis design system.

Ready

Mechanics

This page provides guidelines for the mechanics of writing, including formatting for file sizes, file extensions, acronyms, abbreviations, punctuation, and capitalization in the Basis design system.

Ready

Numbers

This page provides guidelines for formatting numbers, dates, times, and null values in the Basis design system.

Ready

Numbers

This page provides guidelines for formatting numbers, dates, times, and null values in the Basis design system.

Ready

Numbers

This page provides guidelines for formatting numbers, dates, times, and null values in the Basis design system.

Ready

Style

This page provides style guidelines for the Basis design system, covering topics such as using contractions, prioritizing information, addressing users, being consistent, and being concise.

Ready

Style

This page provides style guidelines for the Basis design system, covering topics such as using contractions, prioritizing information, addressing users, being consistent, and being concise.

Ready

Style

This page provides style guidelines for the Basis design system, covering topics such as using contractions, prioritizing information, addressing users, being consistent, and being concise.