Fruitful is a shadcn/ui theme built around a blue primary color (#8fbad1) with muted blue accents (#a8bcc7). The light mode uses a neutral background (#fbfdfe). Dark mode keeps the blue primary (#8fbad1) on a blue-tinted background (#060b0e).
| Token | Light | Dark |
|---|---|---|
| Background | #fbfdfewhite | #060b0eblack |
| Foreground | #050c0fblack | #f9fafbghostwhite |
| Card | #f7fbfcghostwhite | #070e12black |
| Card foreground | #04090bblack | #fcfdfdwhite |
| Popover | #fbfdfewhite | #060b0eblack |
| Popover foreground | #050c0fblack | #f9fafbghostwhite |
| Primary | #8fbad1skyblue | #8fbad1skyblue |
| Primary foreground | #0d1a21black | #0d1a21black |
| Secondary | #c9d0d4lightgrey | #161718black |
| Secondary foreground | #2f373cdarkslategray | #acb1b4darkgray |
| Muted | #e3eaeelavender | #11191cblack |
| Muted foreground | #585a5adimgray | #a5a6a7darkgray |
| Accent | #a8bcc7silver | #242a2ddarkslategray |
| Accent foreground | #182125black | #bbc4c9silver |
| Destructive | #c1450bchocolate | #f1560eorangered |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #8fbad1skyblue | #8fbad1skyblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.29:1 | AAA |
| Text on card | 19.19:1 | AAA |
| Primary button | 8.51:1 | AAA |
| Secondary button | 7.78:1 | AAA |
| Muted text | 5.69:1 | AA |
| Accent | 8.34:1 | AAA |
| Destructive | 5.10:1 | AA |
| Text on background | 18.87:1 | AAA |
| Text on card | 19.02:1 | AAA |
| Primary button | 8.51:1 | AAA |
| Secondary button | 8.27:1 | AAA |
| Muted text | 7.31:1 | AAA |
| Accent | 8.18:1 | AAA |
| Destructive | 3.45:1 | AA Large |
Paste this into your globals.css to use Fruitful in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.993 0.002 230.689);
--foreground: oklch(0.147 0.014 229.013);
--muted: oklch(0.932 0.009 230.797);
--muted-foreground: oklch(0.465 0.002 230.712);
--popover: oklch(0.993 0.002 230.689);
--popover-foreground: oklch(0.147 0.014 229.013);
--card: oklch(0.985 0.004 230.718);
--card-foreground: oklch(0.133 0.012 225.433);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.766 0.057 231.957);
--primary-foreground: oklch(0.209 0.022 232.832);
--secondary: oklch(0.854 0.01 230.822);
--secondary-foreground: oklch(0.333 0.014 231.295);
--accent: oklch(0.784 0.027 231.18);
--accent-foreground: oklch(0.24 0.015 231.744);
--destructive: oklch(0.556 0.17 39.919);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.766 0.057 231.957);
--chart-1: oklch(0.766 0.057 231.957);
--chart-2: oklch(0.854 0.01 230.822);
--chart-3: oklch(0.784 0.027 231.18);
--chart-4: oklch(0.877 0.008 230.791);
--chart-5: oklch(0.767 0.061 232.073);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.147 0.012 229.328);
--foreground: oklch(0.985 0.002 230.681);
--muted: oklch(0.206 0.013 231.728);
--muted-foreground: oklch(0.724 0.002 230.69);
--popover: oklch(0.147 0.012 229.328);
--popover-foreground: oklch(0.985 0.002 230.681);
--card: oklch(0.16 0.014 231.389);
--card-foreground: oklch(0.992 0.001 230.67);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.766 0.057 231.957);
--primary-foreground: oklch(0.209 0.022 232.832);
--secondary: oklch(0.205 0.003 230.852);
--secondary-foreground: oklch(0.758 0.007 230.787);
--accent: oklch(0.281 0.01 231.198);
--accent-foreground: oklch(0.814 0.012 230.861);
--destructive: oklch(0.655 0.203 39.558);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.766 0.057 231.957);
--chart-1: oklch(0.766 0.057 231.957);
--chart-2: oklch(0.205 0.003 230.852);
--chart-3: oklch(0.281 0.01 231.198);
--chart-4: oklch(0.238 0.004 230.873);
--chart-5: oklch(0.767 0.061 232.073);
}