Design System Test Page

Fluid Space Scale

Viewport Padding

Minimum Tap Target

Website width

Font families

Inter

Fira Code VF

Type Scale

text-md

Fluid Type Scale

text-xs

text-sm

text-md

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

Semantic Color Tokens

Background and foreground

*-background

*-foreground

Brand

*-brand-bg

*-brand-bg-hover

*-brand-bg-active

*-brand-border

*-brand-border-hover

*-brand-border-active

*-brand-card-title

*-brand-text

*-brand-text-hover

*-brand-text-active

Success

*-success-bg

*-success-bg-hover

*-success-bg-active

*-success-border

*-success-border-hover

*-success-border-active

*-success-card-title

*-success-text

*-success-text-hover

*-success-text-active

Info

*-info-bg

*-info-bg-hover

*-info-bg-active

*-info-border

*-info-border-hover

*-info-border-active

*-info-card-title

*-info-text

*-info-text-hover

*-info-text-active

Warning

*-warning-bg

*-warning-bg-hover

*-warning-bg-active

*-warning-border

*-warning-border-hover

*-warning-border-active

*-warning-card-title

*-warning-text

*-warning-text-hover

*-warning-text-active

Danger

*-danger-bg

*-danger-bg-hover

*-danger-bg-active

*-danger-border

*-danger-border-hover

*-danger-border-active

*-danger-card-title

*-danger-text

*-danger-text-hover

*-danger-text-active

Muted

*-muted-50

*-muted-100

*-muted-200

*-muted-300

*-muted-400

*-muted-500

*-muted-600

*-muted-700

*-muted-800

*-muted-900

*-muted-950

Animations

bounce

eclipse

Dark Theme