Generate feedback colors (success, warning, error, and info) for shadcn/ui
Go to generatorUsed by 4k+ developers. Want me to build your product next? Let's work together.
Typewriter is a shadcn/ui theme built around a muted deep red primary color (#261b18) with muted deep yellow accents (#262218). The light mode uses a neutral background (#fcf9f8). Dark mode keeps the muted deep red primary (#261b18) on a red-tinted background (#0b0604).
| Token | Light | Dark |
|---|---|---|
| Background | #fcf9f8snow | #0b0604black |
| Foreground | #090301black | #f9f7f6whitesmoke |
| Card | #fcf9f8snow | #0b0604black |
| Card foreground | #090301black | #f9f7f6whitesmoke |
| Popover | #fcf9f8snow | #0b0604black |
| Popover foreground | #090301black | #f9f7f6whitesmoke |
| Primary | #261b18black | #261b18black |
| Primary foreground | #c8afa7tan | #c8afa7tan |
| Secondary | #26181bblack | #26181bblack |
| Secondary foreground | #c8a7b0silver | #c8a7b0silver |
| Muted | #ece9ealinen | #161314black |
| Muted foreground | #72555cdimgray | #aa8d95rosybrown |
| Accent | #262218black | #262218black |
| Accent foreground | #c8bfa7silver | #c8bfa7silver |
| Destructive | #7f2a05saddlebrown | #f66628tomato |
| Destructive foreground | #fccebapeachpuff | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #261b18black | #261b18black |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.52:1 | AAA |
| Text on card | 19.52:1 | AAA |
| Primary button | 8.12:1 | AAA |
| Secondary button | 7.85:1 | AAA |
| Muted text | 5.50:1 | AA |
| Accent | 8.67:1 | AAA |
| Destructive | 6.55:1 | AA |
| Text on background | 18.88:1 | AAA |
| Text on card | 18.88:1 | AAA |
| Primary button | 8.12:1 | AAA |
| Secondary button | 7.85:1 | AAA |
| Muted text | 6.11:1 | AA |
| Accent | 8.67:1 | AAA |
| Destructive | 6.83:1 | AA |
Paste this into your globals.css to use Typewriter in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.984 0.004 37.723);
--foreground: oklch(0.11 0.019 48.971);
--muted: oklch(0.937 0.003 358.868);
--muted-foreground: oklch(0.482 0.041 1.128);
--popover: oklch(0.984 0.004 37.723);
--popover-foreground: oklch(0.11 0.019 48.971);
--card: oklch(0.984 0.004 37.723);
--card-foreground: oklch(0.11 0.019 48.971);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.234 0.018 37.596);
--primary-foreground: oklch(0.773 0.031 37.61);
--secondary: oklch(0.227 0.024 1.623);
--secondary-foreground: oklch(0.761 0.04 0.242);
--accent: oklch(0.252 0.019 90.426);
--accent-foreground: oklch(0.806 0.034 90.377);
--destructive: oklch(0.409 0.125 39.405);
--destructive-foreground: oklch(0.887 0.059 44.433);
--ring: oklch(0.234 0.018 37.596);
--chart-1: oklch(0.234 0.018 37.596);
--chart-2: oklch(0.227 0.024 1.623);
--chart-3: oklch(0.252 0.019 90.426);
--chart-4: oklch(0.257 0.029 1.826);
--chart-5: oklch(0.233 0.021 37.605);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.129 0.012 43.095);
--foreground: oklch(0.976 0.003 37.729);
--muted: oklch(0.191 0.004 359.399);
--muted-foreground: oklch(0.672 0.038 0.33);
--popover: oklch(0.129 0.012 43.095);
--popover-foreground: oklch(0.976 0.003 37.729);
--card: oklch(0.129 0.012 43.095);
--card-foreground: oklch(0.976 0.003 37.729);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.234 0.018 37.596);
--primary-foreground: oklch(0.773 0.031 37.61);
--secondary: oklch(0.227 0.024 1.623);
--secondary-foreground: oklch(0.761 0.04 0.242);
--accent: oklch(0.252 0.019 90.426);
--accent-foreground: oklch(0.806 0.034 90.377);
--destructive: oklch(0.683 0.191 40.835);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.234 0.018 37.596);
--chart-1: oklch(0.234 0.018 37.596);
--chart-2: oklch(0.227 0.024 1.623);
--chart-3: oklch(0.252 0.019 90.426);
--chart-4: oklch(0.257 0.029 1.826);
--chart-5: oklch(0.233 0.021 37.605);
}