Themes

Clay Notebook

by Frontend Forever · MIT

Open in editor

Preview

Compare light and dark

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

Contrast checkAll checked text pairs pass AA

Checks normal text at 4.5:1 in both appearances. This covers these color pairs; focus, charts, states, and your final interface still need review.

light appearance

Body text16.69:1 · AAA
Muted text6.99:1 · AA
Muted surface6.25:1 · AA
Card17.31:1 · AAA
Popover17.31:1 · AAA
Primary button7.31:1 · AAA
Secondary button14.30:1 · AAA
Accent14.30:1 · AAA
Destructive button6.47:1 · AA
Sidebar16.69:1 · AAA
Sidebar button7.31:1 · AAA
Sidebar selection14.30:1 · AAA

dark appearance

Body text16.59:1 · AAA
Muted text9.89:1 · AAA
Muted surface7.75:1 · AAA
Card14.72:1 · AAA
Popover14.72:1 · AAA
Primary button11.20:1 · AAA
Secondary button11.69:1 · AAA
Accent11.69:1 · AAA
Destructive button8.51:1 · AAA
Sidebar16.59:1 · AAA
Sidebar button11.20:1 · AAA
Sidebar selection11.69:1 · AAA

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: 5px
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: 5px;
  --space-unit: 5px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #fff7ed;
  --surface: #fffcf7;
  --foreground: #18181b;
  --card: #fffcf7;
  --card-foreground: #18181b;
  --popover: #fffcf7;
  --popover-foreground: #18181b;
  --primary: #9a3412;
  --primary-foreground: #ffffff;
  --secondary: #f3e5d2;
  --secondary-foreground: #18181b;
  --accent: #f3e5d2;
  --accent-foreground: #18181b;
  --on-accent: #18181b;
  --muted: #f5eadb;
  --muted-foreground: #68513b;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d8c1a5;
  --input: #d8c1a5;
  --ring: #9a3412;
  --chart-1: #9a3412;
  --chart-2: #a16207;
  --chart-3: #92400e;
  --chart-4: #b45309;
  --chart-5: #78716c;
  --sidebar: #fff7ed;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #9a3412;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f3e5d2;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #d8c1a5;
  --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: 5px;
  --space-unit: 5px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #211912;
  --surface: #2d231a;
  --foreground: #fafafa;
  --card: #2d231a;
  --card-foreground: #fafafa;
  --popover: #2d231a;
  --popover-foreground: #fafafa;
  --primary: #fdba74;
  --primary-foreground: #111111;
  --secondary: #433224;
  --secondary-foreground: #fafafa;
  --accent: #433224;
  --accent-foreground: #fafafa;
  --on-accent: #fafafa;
  --muted: #3a2b20;
  --muted-foreground: #d7c0a7;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #85684d;
  --input: #85684d;
  --ring: #fdba74;
  --chart-1: #fdba74;
  --chart-2: #fde68a;
  --chart-3: #fcd34d;
  --chart-4: #fbbf24;
  --chart-5: #d6d3d1;
  --sidebar: #211912;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fdba74;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #433224;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #85684d;
  --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: 5px;
  --space-unit: 5px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #211912;
  --surface: #2d231a;
  --foreground: #fafafa;
  --card: #2d231a;
  --card-foreground: #fafafa;
  --popover: #2d231a;
  --popover-foreground: #fafafa;
  --primary: #fdba74;
  --primary-foreground: #111111;
  --secondary: #433224;
  --secondary-foreground: #fafafa;
  --accent: #433224;
  --accent-foreground: #fafafa;
  --on-accent: #fafafa;
  --muted: #3a2b20;
  --muted-foreground: #d7c0a7;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #85684d;
  --input: #85684d;
  --ring: #fdba74;
  --chart-1: #fdba74;
  --chart-2: #fde68a;
  --chart-3: #fcd34d;
  --chart-4: #fbbf24;
  --chart-5: #d6d3d1;
  --sidebar: #211912;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fdba74;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #433224;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #85684d;
  --sidebar-ring: #fdba74;
}