Token values corrected: fixed hex values for --neutral-400, --neutral-700, --blue-800, --blue-50, --orange-600 and --orange-200, plus the shadow values and the Inter and Source Sans Pro SC font values.
Token names updated to match code: line-height tokens are now --type-height-* and font-weight tokens are now --type-weight-*. Card and icon classes now use the code’s casing (.Card…, .Icon--…).
Removed tokens that don’t exist in code: --core-1 to --core-10 and 10 unused classes.
Added --core (4px): the base spacing unit. Use multiples like calc(var(--core) * 2).
Recategorized: 30 layout classes moved from Animation to the new Layout category.

Nov 12, 2026

Dev Links fixed: 43 “Dev Link”s now go to the right page on the code docs site

Token values corrected: fixed hex values for --neutral-400, --neutral-700, --blue-800, --blue-50, --orange-600 and --orange-200, plus the shadow values and the Inter and Source Sans Pro SC font values.
Token names updated to match code: line-height tokens are now --type-height-* and font-weight tokens are now --type-weight-*. Card and icon classes now use the code’s casing (.Card…, .Icon--…).
Removed tokens that don’t exist in code: --core-1 to --core-10 and 10 unused classes.
Added --core (4px): the base spacing unit. Use multiples like calc(var(--core) * 2).
Recategorized: 30 layout classes moved from Animation to the new Layout category.

Oct 15, 2026

Added Accessibility guidelines
Mechanics
- Updated guidelines for capitalization and punctuation
Drag and drop
- Added best practices

Oct 15, 2026

Added Accessibility guidelines
Mechanics
- Updated guidelines for capitalization and punctuation
Drag and drop
- Added best practices

Foundations

View all

Ready

Accessibility

At Basis, accessibility is a design constraint we work with from the first sketch, not a compliance pass applied at the end of a project. It sits alongside brand, performance, and platform convention as a baseline requirement. This page is the foundation for that practice across Basis: the standard we design to, who we're designing for, and the patterns that show up in nearly every component.

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

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

App Header

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

In Progress

Avatar

An avatar is a visual representation of a user or entity used to personalize UI and communicate identity at a glance. It serves as a compact, recognizable marker of a person or account across interfaces such as navigation bars, comment threads, and user lists.

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.

In Progress

Customize Columns

The customize columns modal pattern allows users to efficiently and conveniently select and order columns in a data table

Ready

Data Visualization

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

Ready

Disabled Buttons

A disabled button is a UI element that is temporarily inactive and cannot be interacted with, rendered a muted color to signal its unavailable state. It communicates that an action exists but cannot be performed until a required condition is met.

Voice and Tone

View all

Ready

About Content Design

Writing is an integral part of design, making words essential design assets. Our Content Design System (CDS) contains the guidelines and standards for creating UX content that is effective, consistent, and user-friendly.

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

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.