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

PastelCard

Color variants

Slate
⚪
Slate variant
The slate pastel card.
Stone
🪨
Stone variant
The stone pastel card.
Red
🔴
Red variant
The red pastel card.
Orange
🟠
Orange variant
The orange pastel card.
Green
🟢
Green variant
The green pastel card.
Blue
🔵
Blue variant
The blue pastel card.
Purple
🟣
Purple variant
The purple pastel card.
Pink
🩷
Pink variant
The pink pastel card.

Optional props (label, emoji, title, children)

All
✨
Everything
Label, emoji, title and children.
🎨
No label
Without the uppercase chip in the corner.
No emoji
No emoji
The big icon at the top is gone.
No title
📦
Just a label, an emoji and some body text.
No children
🪄
No children
🌙
Title only
Label only
👻
Title + body
A card with just a title and some children.
Children only — no label, emoji, or title.
Empty

Breadcrumb

Basic

With ellipsis