Get Started

Introduction

What's New

Principles

For Designers

Contribution

Tokens

Foundations

Components

Patterns

Content Design

Search docs…

Search docs…

Get Started

Foundations

Components

Patterns

Content Design

For Designers

Variables in Figma

Ready

Variables in Figma

Figma variables represent many of our design foundations.

Applying border radius and weight

Applying background, border, and text color

Applying padding and gap spacing

Related Foundations

Ready

Borders

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

Ready

Colors

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

Ready

Spacing

Provides a foundation to help create consistent layouts and designs.

Previous

Layout & Responsive Design

Next

Development Handoff

© 2026 Basis Technologies

Slack

© 2026 Basis Technologies

Slack

© 2026 Basis Technologies

Slack

Border Variables

Color Variables

Spacing Variables

Border Variables

Color Variables

Spacing Variables