Clay Notebook

by Frontend Forever · MIT

Open in editor

Preview

Total revenue

$15,231.89

Sample monthly revenue

Subscriptions

+2,350

Sample subscription activity

Move goal

Set your daily activity goal.

350

Calories / day

Activity

A sample of this week’s exercise minutes.

MonTueWedThuFriSatSun

Colors

light mode

Base

Brand

State

Borders & inputs

Charts

Sidebar

Typography

Sanssystem-ui, sans-serif

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLM · abcdefghijklm · 0123456789

SerifGeorgia, serif

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLM · abcdefghijklm · 0123456789

Monoui-monospace, monospace

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLM · abcdefghijklm · 0123456789

Tokens

Radius: 6px
Spacing: 4px
Letter Spacing: 0em
Shadow Sm: 0 1px 3px rgb(0 0 0 / 0.08)

Use the theme

Warm paper, readable serif headings and clay actions. Import theme.css and map semantic variables to your components. The bundle includes installation instructions and paired light and dark tokens.

:root, [data-theme="light"] {
  color-scheme: light;
  --font-body: system-ui, sans-serif;
  --font-sans: system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, monospace;
  --font-display: Georgia, serif;
  --radius: 6px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #fff7ed;
  --surface: #ffffff;
  --foreground: #18181b;
  --card: #ffffff;
  --card-foreground: #18181b;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --primary: #9a3412;
  --primary-foreground: #ffffff;
  --secondary: #fff7ed;
  --secondary-foreground: #18181b;
  --accent: #9a3412;
  --accent-foreground: #ffffff;
  --on-accent: #ffffff;
  --muted: #f1f1f4;
  --muted-foreground: #52525b;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d4d4d8;
  --input: #d4d4d8;
  --ring: #9a3412;
  --chart-1: #9a3412;
  --chart-2: #0369a1;
  --chart-3: #166534;
  --chart-4: #9a3412;
  --chart-5: #9d174d;
  --sidebar: #fff7ed;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #9a3412;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #fff7ed;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #d4d4d8;
  --sidebar-ring: #9a3412;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    color-scheme: dark;
  --font-body: system-ui, sans-serif;
  --font-sans: system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, monospace;
  --font-display: Georgia, serif;
  --radius: 6px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #101114;
  --surface: #1d1f24;
  --foreground: #fafafa;
  --card: #1d1f24;
  --card-foreground: #fafafa;
  --popover: #1d1f24;
  --popover-foreground: #fafafa;
  --primary: #fdba74;
  --primary-foreground: #111111;
  --secondary: #30343c;
  --secondary-foreground: #fafafa;
  --accent: #fdba74;
  --accent-foreground: #111111;
  --on-accent: #111111;
  --muted: #252830;
  --muted-foreground: #b4b8c1;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #454a54;
  --input: #454a54;
  --ring: #fdba74;
  --chart-1: #fdba74;
  --chart-2: #7dd3fc;
  --chart-3: #86efac;
  --chart-4: #fdba74;
  --chart-5: #f9a8d4;
  --sidebar: #17191f;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fdba74;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #30343c;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #454a54;
  --sidebar-ring: #fdba74;
  }
}
.dark, [data-theme="dark"] {
  color-scheme: dark;
  --font-body: system-ui, sans-serif;
  --font-sans: system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, monospace;
  --font-display: Georgia, serif;
  --radius: 6px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #101114;
  --surface: #1d1f24;
  --foreground: #fafafa;
  --card: #1d1f24;
  --card-foreground: #fafafa;
  --popover: #1d1f24;
  --popover-foreground: #fafafa;
  --primary: #fdba74;
  --primary-foreground: #111111;
  --secondary: #30343c;
  --secondary-foreground: #fafafa;
  --accent: #fdba74;
  --accent-foreground: #111111;
  --on-accent: #111111;
  --muted: #252830;
  --muted-foreground: #b4b8c1;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #454a54;
  --input: #454a54;
  --ring: #fdba74;
  --chart-1: #fdba74;
  --chart-2: #7dd3fc;
  --chart-3: #86efac;
  --chart-4: #fdba74;
  --chart-5: #f9a8d4;
  --sidebar: #17191f;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fdba74;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #30343c;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #454a54;
  --sidebar-ring: #fdba74;
}