Design System

Un aperçu de tous les composants et design tokens disponibles.

Back to home

Colors

Background

Foreground

Primary

Secondary

Muted

Accent

Destructive

Card

Border

Input

Ring

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small text - Used for captions and helper text.

Button

Variants

Sizes

States

Badge

Standard

DefaultSecondaryOutlineDestructive

Pastel (Filled)

BlueGreenYellowPinkPurpleOrangeTealRose

Pastel (Outlined)

BlueGreenYellowPinkPurpleOrangeTealRose

Card

Card Title
Card description with supporting text.

Card content goes here. This is where the main content lives.

Small Card
Compact variant

Smaller padding for denser layouts.

Form Elements

Select

Dropdown Menu

Alert Dialog

Separator

Horizontal separator:

Item 1Item 2Item 3

Tooltip

Field

We'll never share your email.

InputGroup

With icon addon

With button

Breadcrumb

Basic

With ellipsis