Get Started

Foundations

Components

Patterns

Content Design

Search docs…

Get Started

Foundations

Components

Patterns

Content Design

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

Oct 2, 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

Oct 2, 2025

Updated icons with new lucide icons
Added interactive badge examples
Added warning states for inputs, date picker, and dropdown select
Updated title bar to show new breadcrumbs design
Added interactive card group examples
Added designer help docs for creating Data Tables

Oct 2, 2025

Updated icons with new lucide icons
Added interactive badge examples
Added warning states for inputs, date picker, and dropdown select
Updated title bar to show new breadcrumbs design
Added interactive card group examples
Added designer help docs for creating Data Tables

Oct 2, 2025

Updated icons with new lucide icons
Added interactive badge examples
Added warning states for inputs, date picker, and dropdown select
Updated title bar to show new breadcrumbs design
Added interactive card group examples
Added designer help docs for creating Data Tables

Sep 24, 2025

Added "Beta" content guidelines to components
Created new Content Design pages
- Added Language and Grammar
- Added Inclusive Language and Accessibility
- Added Confirmation Messages
- Added Help Center Links
- Added Word List
Removed the Style page
- Moved the user action terms to a new page titled User Actions
- Merged style guidelines with additional content in the Language and Grammar page
Renamed Tone to Voice & Tone and updated content
Added to and reorganized content in Mechanics
Updated Error Handling guidelines

Sep 24, 2025

Added "Beta" content guidelines to components
Created new Content Design pages
- Added Language and Grammar
- Added Inclusive Language and Accessibility
- Added Confirmation Messages
- Added Help Center Links
- Added Word List
Removed the Style page
- Moved the user action terms to a new page titled User Actions
- Merged style guidelines with additional content in the Language and Grammar page
Renamed Tone to Voice & Tone and updated content
Added to and reorganized content in Mechanics
Updated Error Handling guidelines

Sep 24, 2025

Added "Beta" content guidelines to components
Created new Content Design pages
- Added Language and Grammar
- Added Inclusive Language and Accessibility
- Added Confirmation Messages
- Added Help Center Links
- Added Word List
Removed the Style page
- Moved the user action terms to a new page titled User Actions
- Merged style guidelines with additional content in the Language and Grammar page
Renamed Tone to Voice & Tone and updated content
Added to and reorganized content in Mechanics
Updated Error Handling guidelines

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

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.

Ready

Colors

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

Ready

Colors

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

Ready

Colors

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

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 Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

Ready

App Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

Ready

App Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Ready

App Header

The App Header contains actions that can be accessed from any page across Basis platform.

Ready

Badge

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

Ready

Badge

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

Ready

Badge

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

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.

Coming soon

Customize Columns

Coming soon

Customize Columns

Coming soon

Customize Columns

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 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 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 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

Voice and Tone

This page outlines the tone guidelines for the Basis design system, emphasizing being dedicated to others, honest, positive, smart, professional, and clear and direct in communication.

Ready

Voice and Tone

This page outlines the tone guidelines for the Basis design system, emphasizing being dedicated to others, honest, positive, smart, professional, and clear and direct in communication.

Ready

Voice and Tone

This page outlines the tone guidelines for the Basis design system, emphasizing being dedicated to others, honest, positive, smart, professional, and clear and direct in communication.

Ready

Language and Grammar

Content is a critical part of the user interface, so words and writing are an essential part of design. These language and grammar writing principles help make our UX copy clear to all readers.

Ready

Language and Grammar

Content is a critical part of the user interface, so words and writing are an essential part of design. These language and grammar writing principles help make our UX copy clear to all readers.

Ready

Language and Grammar

Content is a critical part of the user interface, so words and writing are an essential part of design. These language and grammar writing principles help make our UX copy clear to all readers.

Ready

Inclusive Language and Accessibility

Everybody should be able to understand and enjoy our product. The language that we use should be clear and unambiguous to all readers. Following these guidelines allows readers of all levels to understand our content and makes it easier to translate to other languages.

Ready

Inclusive Language and Accessibility

Ready

Inclusive Language and Accessibility

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.