Themes/Claude
Start building with Claude

Claude Design System

Warm, thoughtful tones with a sand-beige palette. Calm, intelligent, and approachable.

Dashboard

Total Revenue

$15,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Cards

Move Goal

Set your daily activity goal.

350

Calories/day

Exercise Minutes

Your activity trend this week.

Mon
Tue
Wed
Thu
Fri
Sat
Sun

Forms

Create an account

Enter your email to get started.

Email

example@acme.com

Password

••••••••

Notifications

Manage your notification preferences.

Push notifications
Email digest
Marketing emails

Buttons

CSS Variables — shadcn/ui compatible
:root {
  --background: #FAF7F2;
  --foreground: #1A1714;
  --card: #FFFFFF;
  --card-foreground: #1A1714;
  --primary: #D97706;
  --primary-foreground: #FFFFFF;
  --secondary: #E9E6DC;
  --secondary-foreground: #535146;
  --muted: #F5F0E8;
  --muted-foreground: #8C7E6A;
  --accent: #F5F0E8;
  --accent-foreground: #D97706;
  --border: #E8E0D4;
  --input: #E8E0D4;
  --ring: #D97706;
  --radius: 0.75rem;
}

Color Palette

Primary

#D97706

Primary Foreground

#FFFFFF

Secondary

#E9E6DC

Secondary Foreground

#535146

Background

#FAF7F2

Foreground

#1A1714

Card

#FFFFFF

Card Foreground

#1A1714

Border

#E8E0D4

Muted

#F5F0E8

Muted Foreground

#8C7E6A

Accent

#F5F0E8

Accent Foreground

#D97706