Updated all UI examples in Foundations and Components
Updated the Patterns pages status to "Under Construction" while we update the remaining UI examples
Updated content guidelines for Help Center Links

Apr 16, 2026

Updated all UI examples in Foundations and Components
Updated the Patterns pages status to "Under Construction" while we update the remaining UI examples
Updated content guidelines for Help Center Links

Mar 5, 2026

Update visuals for all Foundations to use the new colors, icons, and typography
Animation: added figma prototypes to demo different animations token combinations
Spacing: added an interactive spacing demo that will generate margin and padding class examples
App Drawer and Accordion: update visuals to use the new colors, icons, and typography

Mar 5, 2026

Update visuals for all Foundations to use the new colors, icons, and typography
Animation: added figma prototypes to demo different animations token combinations
Spacing: added an interactive spacing demo that will generate margin and padding class examples
App Drawer and Accordion: update visuals to use the new colors, icons, and typography

Foundations

View all

In Progress

Accessibility

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

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

Coming soon

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

Data Visualization

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

Coming soon

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

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.