Design System

Tokens, Komponenten und Primitives für Web und Native — auto-generiert aus design-system.css & @repo/ui.

↓ Color palette & tokens↓ Typography↓ Spacing & radius
Color Palette
Raw color scales · hover to inspect token name and value

Brand (Green)

1
2
3
4
5
6
7
8
9
10
11
12

Neutral Gray

1
2
3
4
5
6
7
8
9
10
11
12

Red / Error

1
2
3
4
5
6
7
8
9
10
11
12

Yellow / Warning

1
2
3
4
5
6
7
8
9
10
11
12

Blue / Info

1
2
3
4
5
6
7
8
9
10
11
12
Semantic Colors
Resolved at runtime · automatically adapts to light/dark mode

Form

Other

Background & Surface

Text

Border

Accent

Status

Default

Glow

Loading computed values…
Type Scale
All variants · use via the variant prop on Text
h1

Display Heading

.text-h1

h2

Section Heading

.text-h2

h3

Subsection Title

.text-h3

h4

Card Title

.text-h4

h5
Label Heading

.text-h5

h6
Small Heading

.text-h6

body

The quick brown fox jumps over the lazy dog.

.text-body

body-bold

The quick brown fox jumps over the lazy dog.

.text-body-bold

captionCaption text — supporting metadata.

.text-caption

smallFine print — terms, hints, footnotes.

.text-small

Type Tokens

Size

xs

Ag0.6875rem

sm

Ag0.75rem

base

Ag0.875rem

md

Ag1rem

lg

Ag1.125rem

xl

Ag1.25rem

2xl

Ag1.375rem

3xl

Ag1.875rem

4xl

Ag2.625rem

5xl

Ag3.25rem

6xl

Ag3.875rem

7xl

Ag4.5rem

8xl

Ag5.75rem

9xl

Ag7.125rem

10xl

Ag8.375rem

11xl

Ag10rem

Tracking & Leading

tracking-tight

-0.04em

tracking-snug

-0.02em

tracking-normal

0em

tracking-wide

0.025em

tracking-wider

0.05em

tracking-widest

0.125em

leading-none

1

leading-tight

1.1

leading-snug

1.2

leading-normal

1.4

leading-relaxed

1.5

leading-loose

1.55

Spacing
8px grid — every value is a multiple of 8px (4px half-unit)

space-1

4px · 0.5u

space-2

8px · 1u

space-3

12px · 1.5u

space-4

16px · 2u

space-6

24px · 3u

space-8

32px · 4u

space-10

40px · 5u

space-12

48px · 6u

space-16

64px · 8u

space-20

80px · 10u

space-24

96px · 12u
Border Radius
xs4px
sm8px
md8px
lg16px
xl24px
2xl32px
3xl40px
full999px
Shadows
sm
md
lg
xl

Alert

webnative

Default

This is an alert with status "default".

Success

This is an alert with status "success".

Warning

This is an alert with status "warning".

Danger

This is an alert with status "danger".

Avatar

webnative
With fallback
ALJDMK
With image
ABC

Breadcrumbs

webnative
  1. Home
  2. Products
  3. Category
  4. Current

Button

webnative
Variants
Sizes
Loading

Card

webnative

Card Title

A short description for context.

Default card with full slots.

Simple Card

Header + content only.

Checkbox

webnative
Standalone
CheckboxGroup
Interests

Chip

webnative
Colors
DefaultSuccessWarningDangerAccent
Sizes
SmallMediumLarge

EmptyView

webnative

Keine Events in deiner Nähe.

ErrorView

webnative
User message only

Fehler

Der angeforderte Inhalt wurde nicht gefunden.

With dev info (DEV only)

Fehler

Serverfehler. Bitte versuche es später erneut.

With retry

Fehler

Keine Verbindung. Bitte überprüfe deine Internetverbindung.

Input

webnative

LoadingView

webnative

ProgressBar

webnative

Radio

webnative
Standalone
RadioGroup
Plan

Separator

webnative
Horizontal
Vertical

Left

Right

Skeleton

webnative

Slider

webnative

Spinner

webnative
Colors
Sizes

Switch

webnative

Tabs

webnative
Overview content

Text

webnative
h1

The quick brown fox jumps over the lazy dog

h2

The quick brown fox jumps over the lazy dog

h3

The quick brown fox jumps over the lazy dog

h4

The quick brown fox jumps over the lazy dog

h5
The quick brown fox jumps over the lazy dog
h6
The quick brown fox jumps over the lazy dog
body

The quick brown fox jumps over the lazy dog

body-bold

The quick brown fox jumps over the lazy dog

captionThe quick brown fox jumps over the lazy dog
smallThe quick brown fox jumps over the lazy dog

TextArea

web

Tooltip

webnative
Hover the button

View

webnative
gap="none"
gap="item"
gap="inner"
gap="outer"
gap="section"