Total projects
243 this monthBy 
Frontend Forever · MIT
A little clarity for your working day.
Total projects
243 this monthActive tasks
8612% from last monthTeam members
122 new this monthTotal revenue
$15,231.89
Sample monthly revenue
Subscriptions
+2,350
Sample subscription activity
Set your daily activity goal.
350
Calories / day
A sample of this week’s exercise minutes.
MonTueWedThuFriSatSun
Illustrative preview. Export includes both appearances.
Sans · system-ui, sans-serif
The quick brown fox jumps over the lazy dog
Serif · Georgia, serif
The quick brown fox jumps over the lazy dog
Mono · ui-monospace, monospace
The quick brown fox jumps over the lazy dog
Display · system-ui, sans-serif
The quick brown fox jumps over the lazy dog
Inspect the configured text pairs in both appearances. These checks do not certify every use of the theme.
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.
Pastel, Cool, Minimal colors with coordinated light and dark UI tokens. Import theme.css and map semantic variables to your components.
: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: 10px;
--spacing: 4px;
--space-unit: 4px;
--letter-spacing: 0em;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
--background: #f7fcff;
--surface: #ffffff;
--foreground: #18181b;
--card: #ffffff;
--card-foreground: #18181b;
--popover: #ffffff;
--popover-foreground: #18181b;
--primary: #285e85;
--primary-foreground: #ffffff;
--secondary: #dcedf5;
--secondary-foreground: #18181b;
--accent: #e7f2f8;
--accent-foreground: #18181b;
--on-accent: #18181b;
--muted: #dcedf5;
--muted-foreground: #52525b;
--destructive: #b91c1c;
--destructive-foreground: #ffffff;
--border: #b4c8d3;
--input: #b4c8d3;
--ring: #285e85;
--chart-1: #15344c;
--chart-2: #91c9df;
--chart-3: #91c9df;
--chart-4: #578eae;
--chart-5: #b3d9e9;
--sidebar: #dcedf5;
--sidebar-foreground: #18181b;
--sidebar-primary: #285e85;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #dcedf5;
--sidebar-accent-foreground: #18181b;
--sidebar-border: #b4c8d3;
--sidebar-ring: #285e85;
}
@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: 10px;
--spacing: 4px;
--space-unit: 4px;
--letter-spacing: 0em;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
--background: #111f2a;
--surface: #1c2c38;
--foreground: #fafafa;
--card: #1c2c38;
--card-foreground: #fafafa;
--popover: #1c2c38;
--popover-foreground: #fafafa;
--primary: #a8d5ec;
--primary-foreground: #111111;
--secondary: #263e4d;
--secondary-foreground: #fafafa;
--accent: #263e4d;
--accent-foreground: #fafafa;
--on-accent: #fafafa;
--muted: #20313d;
--muted-foreground: #c3c8cc;
--destructive: #fca5a5;
--destructive-foreground: #450a0a;
--border: #465f6e;
--input: #465f6e;
--ring: #a8d5ec;
--chart-1: #99cee6;
--chart-2: #89c7df;
--chart-3: #89c7df;
--chart-4: #9acfe6;
--chart-5: #5c899d;
--sidebar: #111f2a;
--sidebar-foreground: #fafafa;
--sidebar-primary: #a8d5ec;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #263e4d;
--sidebar-accent-foreground: #fafafa;
--sidebar-border: #465f6e;
--sidebar-ring: #a8d5ec;
}
}
.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: 10px;
--spacing: 4px;
--space-unit: 4px;
--letter-spacing: 0em;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
--background: #111f2a;
--surface: #1c2c38;
--foreground: #fafafa;
--card: #1c2c38;
--card-foreground: #fafafa;
--popover: #1c2c38;
--popover-foreground: #fafafa;
--primary: #a8d5ec;
--primary-foreground: #111111;
--secondary: #263e4d;
--secondary-foreground: #fafafa;
--accent: #263e4d;
--accent-foreground: #fafafa;
--on-accent: #fafafa;
--muted: #20313d;
--muted-foreground: #c3c8cc;
--destructive: #fca5a5;
--destructive-foreground: #450a0a;
--border: #465f6e;
--input: #465f6e;
--ring: #a8d5ec;
--chart-1: #99cee6;
--chart-2: #89c7df;
--chart-3: #89c7df;
--chart-4: #9acfe6;
--chart-5: #5c899d;
--sidebar: #111f2a;
--sidebar-foreground: #fafafa;
--sidebar-primary: #a8d5ec;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #263e4d;
--sidebar-accent-foreground: #fafafa;
--sidebar-border: #465f6e;
--sidebar-ring: #a8d5ec;
}