Dopamine Design

Also called: Dopamine UI, Joycore, Dopamine Dressing

Saturated orange, hot pink and lime on warm cream — squishy blob shapes, pill buttons and bouncy micro-animations that feel like a mood boost.

“Happy brights”Bold & ExpressiveEra: 2020sPlayfulFriendlyBoldNew

Open full screen ↗

dopamine-design / landingEN

dopamine-design / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm14pxRadius md22pxRadius lg32pxRadius xl44pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

saturated happy coloursorange pink limeblob shapespill buttonsbouncy spring motioncolour-block cardsdeep plum textoptimistic

Dopamine Design applies “dopamine dressing” to interfaces: every surface is a cheerful, fully saturated colour block — tangerine, bubblegum pink, lime, violet, sunshine yellow — set on a warm cream page with deep plum text instead of black. Shapes are soft and organic (blobs, pills, 28–44px corners), there are no hard outlines, and interactions bounce with a springy overshoot. It is optimistic rather than chaotic: one colour per card, generous spacing and big friendly type keep it readable.

Best for

Wellness, habit and mood-tracking apps
Consumer lifestyle and D2C brands
Kids, family and learning apps
Food delivery and snack brands

Avoid for

Banking, legal or enterprise tools
Luxury or minimal premium brands
Medical contexts that must feel calm and clinical

✓ Do

Give each card one solid bright in the 6-colour rotation (#FF8A4C, #FF7EB3, #C9F55B, #9D86FF, #FFD84D, #6FD3FF) with plum #2A1238 text
Use the 14/22/32/44px radius scale (cards 32px, big blocks 44px), pills for controls, and blob border-radius for icons and art
Use a spring easing (cubic-bezier(.34,1.56,.64,1)) for hover/press scale and tilt
Keep the page ground warm cream (#FFF5EA), not white
Thai display in Mitr at line-height ≥ 1.32, phrase-level nowrap spans in narrow tiles

✕ Don't

No black outlines or hard offset shadows
Don’t use muted pastels — colours must be saturated
Don’t use pure black text or grey UI chrome
Don’t animate continuously behind reading text

Not to be confused with

Neubrutalism →Neubrutalism outlines every bright tile in 3px black with a hard offset shadow; Dopamine has no outlines at all — just soft blobs, pills and plum text on saturated fills.Kawaii / Cute →Kawaii uses soft pastels, faces and mascots; Dopamine uses fully saturated brights and abstract blobs with no characters.Memphis Design →Memphis clashes pastels with black squiggles, confetti and terrazzo patterns; Dopamine is cleaner — one solid colour per block and organic blob shapes.

On mobile

Perfect fit for phones: big colour-block cards, pill chips and a floating white tab bar whose active icon sits in an orange blob. Keep the spring scale on press (0.96 → 1) but drop background blob animation to save battery.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBricolage Grotesque · 600/700

The quick brown fox

Heading · ThaiMitr · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinFigtree · 400/500/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai Looped · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Mitr’s chunky, rounded loopless forms match Bricolage Grotesque’s plump, friendly headlines; looped Noto Sans Thai keeps long wellness copy warm and very legible beside Figtree.

Colour palette

Light

Dark

Design tokens

Radius	`sm 14px · md 22px · lg 32px · xl 44px · pill 999px`
Border	`2px`
Shadow	`0 16px 32px -14px rgba(255, 90, 31, 0.4)`
Display	`clamp(3rem, 6.6vw, 5.5rem)`
Motion	`380ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Dopamine Design (dopamine-design) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Figtree:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;700&display=swap
 */
:root {
  --radius: 32px;
  --background: #FFF5EA;
  --foreground: #2A1238;
  --card: #FFFFFF;
  --card-foreground: #2A1238;
  --popover: #FFFFFF;
  --popover-foreground: #2A1238;
  --primary: #FF5A1F;
  --primary-foreground: #2A1238;
  --secondary: #FF3D8B;
  --secondary-foreground: #2A1238;
  --muted: #FFE6F1;
  --muted-foreground: #654A73;
  --accent: #FFE6F1;
  --accent-foreground: #2A1238;
  --destructive: #E5294B;
  --border: #F2D3E4;
  --input: #F2D3E4;
  --ring: #FF5A1F;
  --chart-1: #FF5A1F;
  --chart-2: #FF3D8B;
  --chart-3: #7B5CFF;
  --chart-4: #9BD62A;
  --chart-5: #FFC21A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2A1238;
  --sidebar-primary: #FF5A1F;
  --sidebar-primary-foreground: #2A1238;
  --sidebar-accent: #FFE6F1;
  --sidebar-accent-foreground: #2A1238;
  --sidebar-border: #F2D3E4;
  --sidebar-ring: #FF5A1F;
}

.dark {
  --background: #1E0F2B;
  --foreground: #FFF5EA;
  --card: #2B1740;
  --card-foreground: #FFF5EA;
  --popover: #2B1740;
  --popover-foreground: #FFF5EA;
  --primary: #FF7A3D;
  --primary-foreground: #1E0F2B;
  --secondary: #FF5C9E;
  --secondary-foreground: #1E0F2B;
  --muted: #3A2052;
  --muted-foreground: #D3BEDD;
  --accent: #3A2052;
  --accent-foreground: #FFF5EA;
  --destructive: #FF5C7A;
  --border: #4A2B63;
  --input: #4A2B63;
  --ring: #FF7A3D;
  --chart-1: #FF7A3D;
  --chart-2: #FF5C9E;
  --chart-3: #9D86FF;
  --chart-4: #C6FF4D;
  --chart-5: #FFD84D;
  --sidebar: #2B1740;
  --sidebar-foreground: #FFF5EA;
  --sidebar-primary: #FF7A3D;
  --sidebar-primary-foreground: #1E0F2B;
  --sidebar-accent: #3A2052;
  --sidebar-accent-foreground: #FFF5EA;
  --sidebar-border: #4A2B63;
  --sidebar-ring: #FF7A3D;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Dopamine Design (dopamine-design) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Figtree:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #FFF5EA;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE6F1;
  --color-text: #2A1238;
  --color-text-muted: #654A73;
  --color-primary: #FF5A1F;
  --color-on-primary: #2A1238;
  --color-secondary: #FF3D8B;
  --color-on-secondary: #2A1238;
  --color-accent: #B6F03C;
  --color-border: #F2D3E4;
  --color-success: #12A150;
  --color-warning: #D97A00;
  --color-danger: #E5294B;
  --color-chart-1: #FF5A1F;
  --color-chart-2: #FF3D8B;
  --color-chart-3: #7B5CFF;
  --color-chart-4: #9BD62A;
  --color-chart-5: #FFC21A;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --radius-pill: 999px;
  --shadow-sm: 0 6px 16px -8px rgba(255, 61, 139, 0.35);
  --shadow-md: 0 16px 32px -14px rgba(255, 90, 31, 0.4);
  --shadow-lg: 0 28px 50px -20px rgba(123, 92, 255, 0.45);
  --font-heading: "Bricolage Grotesque", "Mitr", system-ui, sans-serif;
  --font-body: "Figtree", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai Looped", monospace;
}

.dark {
  --color-bg: #1E0F2B;
  --color-surface: #2B1740;
  --color-surface-2: #3A2052;
  --color-text: #FFF5EA;
  --color-text-muted: #D3BEDD;
  --color-primary: #FF7A3D;
  --color-on-primary: #1E0F2B;
  --color-secondary: #FF5C9E;
  --color-on-secondary: #1E0F2B;
  --color-accent: #C6FF4D;
  --color-border: #4A2B63;
  --color-success: #3DDC84;
  --color-warning: #FFC145;
  --color-danger: #FF5C7A;
  --color-chart-1: #FF7A3D;
  --color-chart-2: #FF5C9E;
  --color-chart-3: #9D86FF;
  --color-chart-4: #C6FF4D;
  --color-chart-5: #FFD84D;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Dopamine Design (dopamine-design). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Figtree:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9608,
            0.9176
          ],
          "hex": "#fff5ea"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.902,
            0.9451
          ],
          "hex": "#ffe6f1"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0706,
            0.2196
          ],
          "hex": "#2a1238"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3961,
            0.2902,
            0.451
          ],
          "hex": "#654a73"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.1216
          ],
          "hex": "#ff5a1f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0706,
            0.2196
          ],
          "hex": "#2a1238"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2392,
            0.5451
          ],
          "hex": "#ff3d8b"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0706,
            0.2196
          ],
          "hex": "#2a1238"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.9412,
            0.2353
          ],
          "hex": "#b6f03c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.8275,
            0.8941
          ],
          "hex": "#f2d3e4"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.6314,
            0.3137
          ],
          "hex": "#12a150"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.4784,
            0
          ],
          "hex": "#d97a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.1608,
            0.2941
          ],
          "hex": "#e5294b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.1216
          ],
          "hex": "#ff5a1f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2392,
            0.5451
          ],
          "hex": "#ff3d8b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.3608,
            1
          ],
          "hex": "#7b5cff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.8392,
            0.1647
          ],
          "hex": "#9bd62a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7608,
            0.102
          ],
          "hex": "#ffc21a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0588,
            0.1686
          ],
          "hex": "#1e0f2b"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.0902,
            0.251
          ],
          "hex": "#2b1740"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.1255,
            0.3216
          ],
          "hex": "#3a2052"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9608,
            0.9176
          ],
          "hex": "#fff5ea"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.7451,
            0.8667
          ],
          "hex": "#d3bedd"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.2392
          ],
          "hex": "#ff7a3d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0588,
            0.1686
          ],
          "hex": "#1e0f2b"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.6196
          ],
          "hex": "#ff5c9e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0588,
            0.1686
          ],
          "hex": "#1e0f2b"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            1,
            0.302
          ],
          "hex": "#c6ff4d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.1686,
            0.3882
          ],
          "hex": "#4a2b63"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.8627,
            0.5176
          ],
          "hex": "#3ddc84"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.2706
          ],
          "hex": "#ffc145"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.4784
          ],
          "hex": "#ff5c7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.2392
          ],
          "hex": "#ff7a3d"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.6196
          ],
          "hex": "#ff5c9e"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.5255,
            1
          ],
          "hex": "#9d86ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            1,
            0.302
          ],
          "hex": "#c6ff4d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8471,
            0.302
          ],
          "hex": "#ffd84d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 44,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.2392,
              0.5451
            ],
            "hex": "#ff3d8b",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 16,
            "unit": "px"
          },
          "spread": {
            "value": -8,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.3529,
              0.1216
            ],
            "hex": "#ff5a1f",
            "alpha": 0.4
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.4824,
              0.3608,
              1
            ],
            "hex": "#7b5cff",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 28,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": -20,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Bricolage Grotesque",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Noto Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 380,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!