# Dopamine Design > Saturated orange, hot pink and lime on warm cream — squishy blob shapes, pill buttons and bouncy micro-animations that feel like a mood boost. - Nickname: Happy brights - Also called: Dopamine UI, Joycore, Dopamine Dressing - Category: Bold & Expressive - Moods: Playful, Friendly, Bold - Industries: Fitness & Wellness, Kids & Family, Food & Restaurant, E‑commerce, Startup & Tech - Style page: https://uilingo.dev/styles/dopamine-design/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Dopamine Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Saturated orange, hot pink and lime on warm cream — squishy blob shapes, pill buttons and bouncy micro-animations that feel like a mood boost. Design keywords: saturated happy colours, orange pink lime, blob shapes, pill buttons, bouncy spring motion, colour-block cards, deep plum text, optimistic. ## Visual language A mood-boost interface: a warm cream page (#FFF5EA) covered in fully saturated colour blocks — tangerine, bubblegum pink, lime, violet, sunshine yellow and sky — each card one solid colour with deep plum (#2A1238) text instead of black. Everything is soft and squishy: pill buttons, 32–44px card corners, organic blob shapes for icons, avatars and decoration, little four-point sparkles. Cards, tiles and nav have no outlines and there is no grey chrome; depth comes from soft colour-tinted shadows. Motion is springy and happy — things scale, tilt and overshoot slightly when touched. ## Signature details (must be visible) - Card and tile fills are palette tokens (treat them exactly like the token table): --fill-orange #FF8A4C, --fill-pink #FF7EB3, --fill-lime #C9F55B, --fill-violet #9D86FF, --fill-yellow #FFD84D, --fill-sky #6FD3FF. They are card and tile fills only; text on them is always plum #2A1238 - One 6-colour rotation everywhere, always in this order: orange -> pink -> lime -> violet -> yellow -> sky (feature cards, KPI tiles, list icons, avatars) - Deep plum #2A1238 for all text on a warm cream #FFF5EA ground — never pure black on white - Blob geometry: border-radius 58% 42% 55% 45% / 47% 58% 42% 53% on icon wells, logo, step numbers, avatars and art; big SVG blobs bleeding off the page corners - Pill everything: buttons, chips, tabs, segmented controls, nav and the floating tab bar (border-radius 999px). Full radius set: feature/content cards 32px; big blocks (hero bento tiles, art panels) 44px; FAQ items and radio cards 22px; small tiles 22px; chips/buttons/tabs pill; inputs, selects and textareas 18px; checkbox 8px; the CTA block and alternate-section containers 56px; blob border-radius for icon wells, logo, avatars and step numbers - Spring motion: cubic-bezier(.34,1.56,.64,1), 380ms; hover = scale(1.05) rotate(-1.5deg), press = scale(.95), cards lift 6px and tilt -1deg - Hero highlighter: an inline span with background linear-gradient(transparent 70%, rgba(255,126,179,.55) 70% 92%, transparent 92%) and box-decoration-break: clone, so every wrapped line gets its own band. On Thai apply it to each inline phrase span (display:inline, never inline-block); lower vowels dipping into the band is expected - Lime sticker eyebrow: pill, rotate(-2deg), with a small violet sparkle that rotates (12s linear) - Stat numerals in Bricolage Grotesque 700 with -0.035em tracking; Thai unit suffixes (days, hours) set in Mitr at 0.6em with 0 tracking - Soft colour-tinted shadows (0 16px 32px -14px rgba(255,90,31,.4)) instead of grey drop shadows; no borders on cards - Gradients: the orange -> pink -> violet progress fill and the Thai/English hero highlighter band are the only colour-to-colour gradients. Everything else is a solid fill; the only other gradient uses are hard-stop radial blobs on art panels (they read as solid shapes) and the sticky mobile CTA fading into the cream ground ## Design tokens — use these exact values Colours (light mode): - background #FFF5EA - surface #FFFFFF - surface-2 #FFE6F1 - text #2A1238 - text-muted #654A73 - primary #FF5A1F (text on it #2A1238) - secondary #FF3D8B (text on it #2A1238) - accent #B6F03C - border #F2D3E4 - success #12A150 · warning #D97A00 · danger #E5294B - chart series #FF5A1F, #FF3D8B, #7B5CFF, #9BD62A, #FFC21A Radius: sm 14px, md 22px, lg 32px, xl 44px, pill 999px Border width: 2px Shadows: sm `0 6px 16px -8px rgba(255, 61, 139, 0.35)`, md `0 16px 32px -14px rgba(255, 90, 31, 0.4)`, lg `0 28px 50px -20px rgba(123, 92, 255, 0.45)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 380ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 600/700 with Thai fallback Mitr 500/600/700 - Body: Figtree 400/500/700 with Thai fallback Noto Sans Thai Looped 400/500/700 - Google Fonts URL: 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 - CSS stacks: heading `"Bricolage Grotesque", "Mitr", system-ui, sans-serif`; body `"Figtree", "Noto Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 6.6vw, 5.5rem), heading weight 700, heading tracking -0.035em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: orange #FF5A1F pill with plum text and an orange glow shadow; hover bounces to scale 1.05 and tilts; the arrow icon nudges right - Secondary button: white pill with an inset ring (box-shadow: inset 0 0 0 2px #F2D3E4); hover fills bubblegum pink #FF7EB3 and drops the ring - Borders appear only on form controls: inputs, selects, textareas, checkbox/radio boxes and radio cards use 2px #F2D3E4 (a selected radio card turns #FF3D8B on a light-pink fill, bubblegum mixed 22% into white ≈ #FFE6F1). The secondary button and inactive chips use an inset ring (box-shadow: inset 0 0 0 2px #F2D3E4), not a border. Cards, tiles, nav, sidebar and FAQ items never have a border - Cards: borderless, radius 32px, one solid fill from the rotation per card. Icon well: a white 56px blob (border-radius 58% 42% 55% 45% / 47% 58% 42% 53%) holding a 22px plum line icon, stroke 2px, round caps. Never emoji. Hover lifts the card and tilts it with spring easing; the icon scales 1.12 and turns 8deg - Inputs: white, 18px radius, 2px #F2D3E4 border; focus turns the border hot pink #FF3D8B with a 5px rgba(255,61,139,.25) halo - Chips and tabs: pills; active chip hot pink, active tab lime, segmented active orange - Badges: pills with solid fills — lime success, yellow warning, pink danger, orange solid - Switch: orange track with a white knob that springs across; checkbox 8px radius, pink when checked - FAQ: white items with radius 22px, no border, soft pink shadow, 12px apart; a lime round + on the right rotates 45deg into an x when open - Dashboard: floating white rounded sidebar with an orange pill active item; KPI tiles follow the rotation; rounded pill bars, round-capped donut, heatmap as pink dots - Floating tab bar: white pill with a soft plum shadow; the active icon sits inside an orange blob - Progress: thick pill with an orange -> pink -> violet gradient fill ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: pill style. Sections in order: hero → features → stats → steps → testimonials → pricing → faq → cta. Feature section as grid. Bento hero made of colour tiles; there is no separate product shot, because the tiles are the product visual. Hero grid: 4 equal columns, rows at least 190px, gap 22px (2.5 × the 8.8px spacing unit). The white headline tile spans 2 columns × 2 rows (the left half) with a lime blob peeking from its bottom-right corner. The orange stat tile (column 3) and the pink stat tile (column 4) share row 1. The violet mood-chart tile spans columns 3–4 in row 2, the full width of the right column under the two stat tiles. Hero tile corners are 44px except one oversized 90px corner each: the orange tile's bottom-left and the pink tile's top-left. Each stat tile has a white 56px blob well 32px from its top-left holding a plum four-point sparkle, and a big plum numeral at the bottom (Bricolage Grotesque 700, clamp(3rem, 5vw, 4.25rem)) with a one-line caption under it. The violet tile holds a 64px plum line icon top-left, five white pill bars of rising height (28px wide, 14px radius, about 200 × 112px in all) to the right of centre, and its own title + one-line caption bottom-left. A yellow 140px blob bleeds off its top-right corner. On phones the bars are hidden and the tiles stack 2 columns wide. In the headline tile, Thai display is clamp(2.6rem, 4.8vw, 4.2rem) at line-height 1.32. Each phrase is wrapped in a white-space:nowrap span (display:inline) so lines break only between phrases. Below the hero, feature cards sit in a grid following the 6-colour rotation. Every 2nd section after the hero sits in a #FFE6F1 container with radius 56px, inset clamp(8px, 2vw, 28px) from the page edge, with about 104px vertical padding (12 × the spacing unit); the hero has no container. The stats band uses numerals at clamp(3rem, 5vw, 4.5rem) cycling orange, pink, violet and green. The CTA is a hot-pink #FF3D8B block with radius 56px and lime and yellow blobs. Dashboards keep colour in KPI tiles and charts while the chart cards stay white. ## Content Use realistic product copy (fictional brand) suited to: Wellness, habit and mood-tracking apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Black outlines or hard offset shadows (that becomes neubrutalism) - Muted pastels or desaturated tones (that becomes kawaii or soft UI) - Pure black text, grey UI chrome or plain white page backgrounds - Squiggles, confetti, terrazzo or zig-zag patterns (that is Memphis) - Sharp 0–8px corners on cards, tiles or buttons (only the checkbox is 8px) - Inline-block highlighter spans on Thai (the band breaks per phrase box) and ambient looping motion behind paragraph text ## Stack notes One self-contained HTML file with a