Design System

A showcase of the design system components and patterns

Overview AI Guide Typography Components Layouts Patterns Colors & Animations Advanced Additional App Shell Scheduling Rich Text Editor

Colors, Radius, and Animations

Theme Colors

Primary Text

Primary

var(--primary)

oklch(0.623 0.214 259.815)

Secondary

var(--secondary)

oklch(0.967 0.001 286.375)

Accent

var(--accent)

oklch(0.967 0.001 286.375)

Muted

var(--muted)

oklch(0.967 0.001 286.375)

Background

var(--background)

oklch(1 0 0)

Foreground

var(--foreground)

oklch(0.141 0.005 285.823)

Primary Color Scale

Primary 50

var(--primary-50)

Primary 100

var(--primary-100)

Primary 200

var(--primary-200)

Primary 300

var(--primary-300)

Primary 400

var(--primary-400)

Primary 500

var(--primary-500)

Primary 600

var(--primary-600)

Primary 700

var(--primary-700)

Primary 800

var(--primary-800)

Primary 900

var(--primary-900)

Contrast Examples

Primary Button

White text on primary background

Text on Color

Text contrast examples

This is text on primary background

This is text on secondary background

This is text on destructive background

Status Colors

success Text

success

var(--success)

warning Text

warning

var(--warning)

info Text

info

var(--info)

destructive Text

destructive

var(--destructive)

UI Colors

background

var(--background)

foreground

var(--foreground)

card

var(--card)

card-foreground

var(--card-foreground)

border

var(--border)

input

var(--input)

ring

var(--ring)