Jot is a shadcn/ui theme built around a green primary color (#bfe274) with muted light green accents (#eceee7). The light mode uses a neutral background (#fdfefb). Dark mode keeps the green primary (#bfe274) on a green-tinted background (#080a05).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfefbwhite | #080a05black |
| Foreground | #0c1005black | #f8f9f6whitesmoke |
| Card | #fdfefbwhite | #080a05black |
| Card foreground | #0c1005black | #f8f9f6whitesmoke |
| Popover | #fdfefbwhite | #080a05black |
| Popover foreground | #0c1005black | #f8f9f6whitesmoke |
| Primary | #bfe274darkkhaki | #bfe274darkkhaki |
| Primary foreground | #161d06black | #161d06black |
| Secondary | #eceee7linen | #26291fdarkslategray |
| Secondary foreground | #212419black | #c0c6b3silver |
| Muted | #f2f6ealinen | #111509black |
| Muted foreground | #464841darkslategray | #bbbeb7silver |
| Accent | #eceee7linen | #26291fdarkslategray |
| Accent foreground | #212419black | #c0c6b3silver |
| Destructive | #be0a04firebrick | #fa2119red |
| Destructive foreground | #fff5f5lavenderblush | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #bfe274darkkhaki | #bfe274darkkhaki |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.94:1 | AAA |
| Text on card | 18.94:1 | AAA |
| Primary button | 11.78:1 | AAA |
| Secondary button | 13.50:1 | AAA |
| Muted text | 8.43:1 | AAA |
| Accent | 13.50:1 | AAA |
| Destructive | 6.07:1 | AA |
| Text on background | 18.80:1 | AAA |
| Text on card | 18.80:1 | AAA |
| Primary button | 11.78:1 | AAA |
| Secondary button | 8.47:1 | AAA |
| Muted text | 9.80:1 | AAA |
| Accent | 8.47:1 | AAA |
| Destructive | 3.95:1 | AA Large |
Paste this into your globals.css to use Jot in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.995 0.003 120.818);
--foreground: oklch(0.163 0.023 122.122);
--muted: oklch(0.966 0.016 121.045);
--muted-foreground: oklch(0.398 0.012 121.252);
--popover: oklch(0.995 0.003 120.818);
--popover-foreground: oklch(0.163 0.023 122.122);
--card: oklch(0.995 0.003 120.818);
--card-foreground: oklch(0.163 0.023 122.122);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.863 0.142 123.825);
--primary-foreground: oklch(0.219 0.042 124.263);
--secondary: oklch(0.946 0.01 120.943);
--secondary-foreground: oklch(0.253 0.021 122.14);
--accent: oklch(0.946 0.01 120.943);
--accent-foreground: oklch(0.253 0.021 122.14);
--destructive: oklch(0.506 0.204 29.416);
--destructive-foreground: oklch(0.978 0.01 19.752);
--ring: oklch(0.863 0.142 123.825);
--chart-1: oklch(0.863 0.142 123.825);
--chart-2: oklch(0.946 0.01 120.943);
--chart-3: oklch(0.946 0.01 120.943);
--chart-4: oklch(0.966 0.006 120.874);
--chart-5: oklch(0.869 0.148 123.952);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.141 0.012 120.631);
--foreground: oklch(0.98 0.003 120.824);
--muted: oklch(0.189 0.023 122.934);
--muted-foreground: oklch(0.797 0.01 120.971);
--popover: oklch(0.141 0.012 120.631);
--popover-foreground: oklch(0.98 0.003 120.824);
--card: oklch(0.141 0.012 120.631);
--card-foreground: oklch(0.98 0.003 120.824);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.863 0.142 123.825);
--primary-foreground: oklch(0.219 0.042 124.263);
--secondary: oklch(0.273 0.018 121.899);
--secondary-foreground: oklch(0.817 0.026 121.3);
--accent: oklch(0.273 0.018 121.899);
--accent-foreground: oklch(0.817 0.026 121.3);
--destructive: oklch(0.629 0.245 28.988);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.863 0.142 123.825);
--chart-1: oklch(0.863 0.142 123.825);
--chart-2: oklch(0.273 0.018 121.899);
--chart-3: oklch(0.273 0.018 121.899);
--chart-4: oklch(0.307 0.022 121.955);
--chart-5: oklch(0.869 0.148 123.952);
}