Frappe Theme
A Frappe-inspired neutral application palette with typography, chart colors, sidebar colors, a brand accent, and a compact radius scale.
registry:theme Registry JSON Semantic design tokens
Frappe-inspired neutral palette
The theme defines color, chart, sidebar, typography, and radius values without adding global selectors.
Primary
Secondary
Muted
Accent
Brand
Destructive
Ready Attention Blocked
Compact, intentionally flattened radii
Installation
pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/frappe-theme.jsonThe CLI merges these tokens into your CSS theme.
This token-only item changes semantic values without adding global selectors or font packages. Install frappe-style for the complete application foundation.
Tokens
| Scope | Token | Value |
|---|---|---|
| theme | font-sans | 'Inter Variable', sans-serif |
| theme | color-background | var(--background) |
| theme | color-foreground | var(--foreground) |
| theme | color-card | var(--card) |
| theme | color-card-foreground | var(--card-foreground) |
| theme | color-popover | var(--popover) |
| theme | color-popover-foreground | var(--popover-foreground) |
| theme | color-primary | var(--primary) |
| theme | color-primary-foreground | var(--primary-foreground) |
| theme | color-secondary | var(--secondary) |
| theme | color-secondary-foreground | var(--secondary-foreground) |
| theme | color-muted | var(--muted) |
| theme | color-muted-foreground | var(--muted-foreground) |
| theme | color-accent | var(--accent) |
| theme | color-accent-foreground | var(--accent-foreground) |
| theme | color-destructive | var(--destructive) |
| theme | color-brand | var(--brand) |
| theme | color-brand-foreground | var(--brand-foreground) |
| theme | color-border | var(--border) |
| theme | color-input | var(--input) |
| theme | color-ring | var(--ring) |
| theme | color-chart-1 | var(--chart-1) |
| theme | color-chart-2 | var(--chart-2) |
| theme | color-chart-3 | var(--chart-3) |
| theme | color-chart-4 | var(--chart-4) |
| theme | color-chart-5 | var(--chart-5) |
| theme | color-sidebar | var(--sidebar) |
| theme | color-sidebar-foreground | var(--sidebar-foreground) |
| theme | color-sidebar-primary | var(--sidebar-primary) |
| theme | color-sidebar-primary-foreground | var(--sidebar-primary-foreground) |
| theme | color-sidebar-accent | var(--sidebar-accent) |
| theme | color-sidebar-accent-foreground | var(--sidebar-accent-foreground) |
| theme | color-sidebar-border | var(--sidebar-border) |
| theme | color-sidebar-ring | var(--sidebar-ring) |
| theme | radius-sm | calc(var(--radius) * 0.5) |
| theme | radius-md | calc(var(--radius) * 0.75) |
| theme | radius-lg | var(--radius) |
| theme | radius-xl | var(--radius) |
| theme | radius-2xl | var(--radius) |
| theme | radius-3xl | var(--radius) |
| theme | radius-4xl | var(--radius) |
| light | radius | 0.5rem |
| light | background | oklch(1 0 0) |
| light | foreground | oklch(0.205 0 0) |
| light | card | oklch(1 0 0) |
| light | card-foreground | oklch(0.205 0 0) |
| light | popover | oklch(1 0 0) |
| light | popover-foreground | oklch(0.205 0 0) |
| light | primary | oklch(0.24 0 0) |
| light | primary-foreground | oklch(0.985 0 0) |
| light | secondary | oklch(0.965 0 0) |
| light | secondary-foreground | oklch(0.3 0 0) |
| light | muted | oklch(0.965 0 0) |
| light | muted-foreground | oklch(0.556 0 0) |
| light | accent | oklch(0.955 0 0) |
| light | accent-foreground | oklch(0.24 0 0) |
| light | destructive | oklch(0.58 0.19 25) |
| light | brand | oklch(0.62 0.17 253) |
| light | brand-foreground | oklch(0.99 0 0) |
| light | border | oklch(0.916 0 0) |
| light | input | oklch(0.9 0 0) |
| light | ring | oklch(0.708 0 0) |
| light | chart-1 | oklch(0.62 0.19 12) |
| light | chart-2 | oklch(0.6 0.12 250) |
| light | chart-3 | oklch(0.68 0.13 165) |
| light | chart-4 | oklch(0.72 0.14 75) |
| light | chart-5 | oklch(0.58 0.14 300) |
| light | sidebar | oklch(0.968 0 0) |
| light | sidebar-foreground | oklch(0.32 0 0) |
| light | sidebar-primary | oklch(0.24 0 0) |
| light | sidebar-primary-foreground | oklch(0.985 0 0) |
| light | sidebar-accent | oklch(1 0 0) |
| light | sidebar-accent-foreground | oklch(0.205 0 0) |
| light | sidebar-border | oklch(0.916 0 0) |
| light | sidebar-ring | oklch(0.708 0 0) |
| dark | background | oklch(0.17 0 0) |
| dark | foreground | oklch(0.96 0 0) |
| dark | card | oklch(0.215 0 0) |
| dark | card-foreground | oklch(0.96 0 0) |
| dark | popover | oklch(0.215 0 0) |
| dark | popover-foreground | oklch(0.96 0 0) |
| dark | primary | oklch(0.96 0 0) |
| dark | primary-foreground | oklch(0.2 0 0) |
| dark | secondary | oklch(0.27 0 0) |
| dark | secondary-foreground | oklch(0.96 0 0) |
| dark | muted | oklch(0.27 0 0) |
| dark | muted-foreground | oklch(0.71 0 0) |
| dark | accent | oklch(0.3 0 0) |
| dark | accent-foreground | oklch(0.96 0 0) |
| dark | destructive | oklch(0.68 0.17 22) |
| dark | brand | oklch(0.62 0.17 253) |
| dark | brand-foreground | oklch(0.99 0 0) |
| dark | border | oklch(1 0 0 / 10%) |
| dark | input | oklch(1 0 0 / 15%) |
| dark | ring | oklch(0.55 0 0) |
| dark | chart-1 | oklch(0.68 0.18 12) |
| dark | chart-2 | oklch(0.7 0.12 250) |
| dark | chart-3 | oklch(0.74 0.13 165) |
| dark | chart-4 | oklch(0.78 0.13 75) |
| dark | chart-5 | oklch(0.66 0.14 300) |
| dark | sidebar | oklch(0.195 0 0) |
| dark | sidebar-foreground | oklch(0.9 0 0) |
| dark | sidebar-primary | oklch(0.96 0 0) |
| dark | sidebar-primary-foreground | oklch(0.2 0 0) |
| dark | sidebar-accent | oklch(0.28 0 0) |
| dark | sidebar-accent-foreground | oklch(0.98 0 0) |
| dark | sidebar-border | oklch(1 0 0 / 10%) |
| dark | sidebar-ring | oklch(0.55 0 0) |
Files & dependencies
This item merges tokens; no source files are copied into your project.
npm dependencies
None.
Registry dependencies