Themes

Violet Foundation

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.82:1 · AAA
Muted text7.92:1 · AAA
Muted surface6.58:1 · AA
Card17.72:1 · AAA
Popover17.72:1 · AAA
Primary button7.10:1 · AAA
Secondary button15.12:1 · AAA
Accent15.12:1 · AAA
Destructive button6.47:1 · AA
Sidebar16.82:1 · AAA
Sidebar button7.10:1 · AAA
Sidebar selection15.12:1 · AAA

dark appearance

Body text17.37:1 · AAA
Muted text9.44:1 · AAA
Muted surface7.81:1 · AAA
Card15.92:1 · AAA
Popover15.92:1 · AAA
Primary button10.23:1 · AAA
Secondary button13.62:1 · AAA
Accent13.62:1 · AAA
Destructive button8.51:1 · AAA
Sidebar17.37:1 · AAA
Sidebar button10.23:1 · AAA
Sidebar selection13.62: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: 12px
Spacing: 4px
Letter Spacing: 0em
Shadow Sm: 0 1px 3px rgb(0 0 0 / 0.08)

Use the theme

Neutral surfaces with a precise violet accent. 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: system-ui, sans-serif;
  --radius: 12px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #faf8ff;
  --surface: #ffffff;
  --foreground: #18181b;
  --card: #ffffff;
  --card-foreground: #18181b;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --primary: #6d28d9;
  --primary-foreground: #ffffff;
  --secondary: #f0eaff;
  --secondary-foreground: #18181b;
  --accent: #f0eaff;
  --accent-foreground: #18181b;
  --on-accent: #18181b;
  --muted: #e9e1f7;
  --muted-foreground: #544965;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #d1c5e2;
  --input: #d1c5e2;
  --ring: #6d28d9;
  --chart-1: #6d28d9;
  --chart-2: #a21caf;
  --chart-3: #4338ca;
  --chart-4: #be185d;
  --chart-5: #0369a1;
  --sidebar: #faf8ff;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #6d28d9;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0eaff;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #d1c5e2;
  --sidebar-ring: #6d28d9;
}
@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: system-ui, sans-serif;
  --radius: 12px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #171421;
  --surface: #211b30;
  --foreground: #fafafa;
  --card: #211b30;
  --card-foreground: #fafafa;
  --popover: #211b30;
  --popover-foreground: #fafafa;
  --primary: #c4b5fd;
  --primary-foreground: #111111;
  --secondary: #302640;
  --secondary-foreground: #fafafa;
  --accent: #302640;
  --accent-foreground: #fafafa;
  --on-accent: #fafafa;
  --muted: #2b2338;
  --muted-foreground: #c2b6d4;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #655875;
  --input: #655875;
  --ring: #c4b5fd;
  --chart-1: #c4b5fd;
  --chart-2: #f0abfc;
  --chart-3: #a5b4fc;
  --chart-4: #f9a8d4;
  --chart-5: #7dd3fc;
  --sidebar: #171421;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #c4b5fd;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #302640;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #655875;
  --sidebar-ring: #c4b5fd;
  }
}
.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: system-ui, sans-serif;
  --radius: 12px;
  --spacing: 4px;
  --space-unit: 4px;
  --letter-spacing: 0em;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --background: #171421;
  --surface: #211b30;
  --foreground: #fafafa;
  --card: #211b30;
  --card-foreground: #fafafa;
  --popover: #211b30;
  --popover-foreground: #fafafa;
  --primary: #c4b5fd;
  --primary-foreground: #111111;
  --secondary: #302640;
  --secondary-foreground: #fafafa;
  --accent: #302640;
  --accent-foreground: #fafafa;
  --on-accent: #fafafa;
  --muted: #2b2338;
  --muted-foreground: #c2b6d4;
  --destructive: #fca5a5;
  --destructive-foreground: #450a0a;
  --border: #655875;
  --input: #655875;
  --ring: #c4b5fd;
  --chart-1: #c4b5fd;
  --chart-2: #f0abfc;
  --chart-3: #a5b4fc;
  --chart-4: #f9a8d4;
  --chart-5: #7dd3fc;
  --sidebar: #171421;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #c4b5fd;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #302640;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #655875;
  --sidebar-ring: #c4b5fd;
}