Skip to content

Warp Design System

Main Navigation Get started Foundations Components Patterns What's new

Appearance

Sidebar Navigation

Foundations

Tokens

Intro

Overview

CSS classes

Introduction

UnoCSS - what's that?

Class Variants

Hover, Focus and other states

Helper classes

Layout

Aspect Ratio

Columns

Break After

Break Before

Break Inside

Box Sizing

Display

Floats

Clear

Isolate

Object Fit

Object Position

Overflow

Overscroll

Position

Top / Right / Bottom / Left

Visibility

Z-Index

Sizing

Width

Min-Width

Max-Width

Height

Min-Height

Max-Height

Typography

Font Size

Font Style

Font Weight

Font Variant Numeric

Line Height

List Style Position

List Style Type

Text Align

Text Color

Text Decoration

Text Transform

Text Overflow

Vertical Align

Whitespace

Word Break

Content

Iconography

Icon Color

Backgrounds

Background Attachment

Background Clip

Background Color

Background Origin

Background Position

Background Repeat

Background Size

Background Image

Elevation

surface

Spacing

Padding

Margin

Space between

Flexbox & Grid

Flex

Flex Basis

Flex Direction

Flex Grow

Flex Shrink

Flex Wrap

Order

Grid Template Columns

Grid Column Start / End

Grid Template Rows

Grid Row Start / End

Grid Auto Flow

Grid Auto Columns

Grid Auto Rows

Gap

Justify Content

Justify Items

Justify Self

Align Content

Align Items

Align Self

Place Content

Place Items

Place Self

Border

Border Radius

Border Width

Border Color

Border Style

Divide Width

Divide Color

Divide Style

Outline Style

Outline Width

Outline Color

Outline Offset

Effects

Box Shadow

Drop Shadow

Opacity

Filters

Backdrop Blur

Tables

Border Collapse

Border Spacing

Table Layout

Transitions & Animation

Transition Property

Transition Duration

Transition Timing

Transition Delay

Animation

Transforms

Scale

Rotate

Translate

Skew

Transform Origin

Interactivity

Appearance

Caret

Cursor

Pointer Events

Resize

Scroll Behavior

Scroll Snap Align

Scroll Snap Stop

Scroll Snap Type

Touch Action

User Select

Will Change

Accessibility

Screen Readers

Illustrations

Typography

Accessibility

Brands

Data visualization

Introduction

Figma Library

Color Guidelines

Introduction

Chart Colors

Data Colors

Lines & Points

Bars & Areas

Text & Icons

Tokens & CSS

Introduction

Chart Colors

Background

Border

Icon

Line

Text

Chart Components

Interaction

Success Criteria

Introduction

Cognitive Accessibility

Visual Accessibility

Keyboard Navigation

Screen Reader

Elevation

Dark mode

Motion

On this page

Are you an LLM? You can read better optimized documentation at /docs/foundations/tokens/overview.md for this page in Markdown format

Overview

Overview of our tokens types with names, descriptions and branded examples.

Background

Add alt text

Elevation

Add alt text

Text

Add alt text

Border

Add alt text

Icon

Pager

Previous pageIntro

Next pageUnoCSS - what's that?

Collaborate

Request new component Request component changes

Help

FAQ Support Report bugs/errors