ButtonsBadgesTextCardsStatusSettingsColorsSystem

Button

Variants
Sizes
As LinkGo to Login

Badge

EmberAmberSuccessErrorMuted

Text

body

Body text, used for most content throughout the dashboard.

caption

Caption text. Secondary information, timestamps, metadata.

labelLABEL TEXT
codenpm install && npm run dev

Card

Card TitleActive

Card body content. This is where the main content of the card goes.

Footer metadata
Revenue CardQ1 2026
$47,820
+12.4% vs last month

Status Chips

activetrialingtrialpast duecancelledchurned

Settings Layout

Profile
Display name
Shown in the topbar and activity feed.
Email notifications
Receive upgrade, cancellation, and payment alerts.
Delete account
Permanently delete your account and all workspace data.

Color Tokens

Background
#13100d
Surface
#1e1a16
Surface 2
#252019
Surface 3
#2c2620
Rail BG
#0e0c09
Border
#2e2820
Border 2
#3a3028
Text Faint
#5c5040
Text Dim
#a09080
Text Body
#c8bdb0
Text Head
#f0ebe4
Accent (Ember)
#e8631a
Amber
#c49a3c
Green (Success)
#4ade80
Red (Error)
#f87171

System Pages

404 PageError PageLoginSign Up