Generate feedback colors (success, warning, error, and info) for shadcn/ui

Go to generator

10000+Themes for shadcn/ui

Used by 4k+ developers. Want me to build your product next? Let's work together.

Book a Call

Monasticism for shadcn/ui

Monasticism is a shadcn/ui theme built around a light pink primary color (#f4ebef) with neutral gray accents (#d8d4d6). The light mode uses a neutral background (#fdf7f9). Dark mode keeps the light pink primary (#f4ebef) on a pink-tinted background (#100509).

Color palette

TokenLightDark
Background
#fdf7f9snow
#100509black
Foreground
#0e0206black
#fdfcfcsnow
Card
#fdf7f9snow
#100509black
Card foreground
#0e0206black
#fdfcfcsnow
Popover
#fdf7f9snow
#100509black
Popover foreground
#0e0206black
#fdfcfcsnow
Primary
#f4ebefwhitesmoke
#f4ebefwhitesmoke
Primary foreground
#713d51dimgray
#713d51dimgray
Secondary
#d8d4d6lightgrey
#2c2025darkslategray
Secondary foreground
#403a3cdarkslategray
#c9b5bdsilver
Muted
#dcd6d8gainsboro
#292326darkslategray
Muted foreground
#665259dimgray
#ad99a1darkgray
Accent
#d8d4d6lightgrey
#2c2025darkslategray
Accent foreground
#403a3cdarkslategray
#c9b5bdsilver
Destructive
#791101maroon
#e82102red
Destructive foreground
#feb9aelightpink
#ffffffwhite
Border
#e5e7eblavender
#1f2937darkslategray
Input
#e5e7eblavender
#1f2937darkslategray
Ring
#f4ebefwhitesmoke
#f4ebefwhitesmoke

Contrast

WCAG 2 contrast ratios between each background and its foreground color.

Light mode
Text on background19.26:1AAA
Text on card19.26:1AAA
Primary button7.23:1AAA
Secondary button7.58:1AAA
Muted text5.01:1AA
Accent7.58:1AAA
Destructive6.72:1AA
Dark mode
Text on background19.61:1AAA
Text on card19.61:1AAA
Primary button7.23:1AAA
Secondary button8.06:1AAA
Muted text5.74:1AA
Accent8.06:1AAA
Destructive4.50:1AA

CSS variables

Paste this into your globals.css to use Monasticism in your shadcn/ui project.

:root {
  --radius: 0.5rem;
  --background: oklch(0.981 0.007 351.79);
  --foreground: oklch(0.116 0.034 351.694);
  --muted: oklch(0.881 0.007 351.831);
  --muted-foreground: oklch(0.461 0.029 353.328);
  --popover: oklch(0.981 0.007 351.79);
  --popover-foreground: oklch(0.116 0.034 351.694);
  --card: oklch(0.981 0.007 351.79);
  --card-foreground: oklch(0.116 0.034 351.694);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --primary: oklch(0.949 0.011 351.918);
  --primary-foreground: oklch(0.43 0.077 356.427);
  --secondary: oklch(0.874 0.005 351.753);
  --secondary-foreground: oklch(0.356 0.009 352.328);
  --accent: oklch(0.874 0.005 351.753);
  --accent-foreground: oklch(0.356 0.009 352.328);
  --destructive: oklch(0.372 0.14 31.914);
  --destructive-foreground: oklch(0.847 0.082 28.742);
  --ring: oklch(0.949 0.011 351.918);
  --chart-1: oklch(0.949 0.011 351.918);
  --chart-2: oklch(0.874 0.005 351.753);
  --chart-3: oklch(0.874 0.005 351.753);
  --chart-4: oklch(0.898 0.004 351.718);
  --chart-5: oklch(0.948 0.012 351.951);
}

.dark {
  --radius: 0.5rem;
  --background: oklch(0.135 0.025 353.076);
  --foreground: oklch(0.991 0.002 351.645);
  --muted: oklch(0.265 0.01 352.653);
  --muted-foreground: oklch(0.703 0.026 352.624);
  --popover: oklch(0.135 0.025 353.076);
  --popover-foreground: oklch(0.991 0.002 351.645);
  --card: oklch(0.135 0.025 353.076);
  --card-foreground: oklch(0.991 0.002 351.645);
  --border: oklch(0.278 0.03 256.848);
  --input: oklch(0.278 0.03 256.848);
  --primary: oklch(0.949 0.011 351.918);
  --primary-foreground: oklch(0.43 0.077 356.427);
  --secondary: oklch(0.261 0.02 353.728);
  --secondary-foreground: oklch(0.793 0.026 352.491);
  --accent: oklch(0.261 0.02 353.728);
  --accent-foreground: oklch(0.793 0.026 352.491);
  --destructive: oklch(0.595 0.231 30.978);
  --destructive-foreground: oklch(1 0 180);
  --ring: oklch(0.949 0.011 351.918);
  --chart-1: oklch(0.949 0.011 351.918);
  --chart-2: oklch(0.261 0.02 353.728);
  --chart-3: oklch(0.261 0.02 353.728);
  --chart-4: oklch(0.29 0.024 353.83);
  --chart-5: oklch(0.948 0.012 351.951);
}

More shadcn/ui themes

TermsPrivacy Policy