Modal Design · success-celebration (pastel) — legibility fixed

{"summary": "A joyful pastel success-state product page built around a single success-celebration modal as the live hero centerpiece. On a soft sky-and-cream gradient field full of gently floating + falling multicolor confetti, a sticky frosted-glass nav sits over a hero where the dialog itself is the moment: a rounded-5xl cream (#fdf9f3) card carrying a deep-sky gradient checkmark badge (with an animated drawn check + two pulsing rings), a 'You're all set! 🎉' headline, a soft slate body line, a deep-sky gradient primary CTA and a quiet ghost secondary. Below: a 3-up 'pattern library' card grid (Success & celebration / Confirm & destructive / Onboarding & upsell), a split 'starter kit' band with a stacked mini upgrade-dialog preview, a full-bleed dark ink (#1f2433) CTA section with blurred color glows, and a cream footer. The whole system is a legibility-fixed pastel palette: bright sky #38bdf8 / coral #fb7185 are kept to DECORATIVE fills only, while all sky/coral TEXT and the CTA gradients use the deepened, >=4.5:1 variants (skyText/skyDeep #0369a1, skyDeep2 #075985, coralText/coralDeep #be123c) over light fields. Built entirely on Poppins (400-800), Phosphor icons via Iconify.", "style": {"description": "A warm, playful, premium-pastel aesthetic that turns a 'success' state into a designed payoff moment, with legibility engineered into the palette. The mood is soft and celebratory: a pale sky-to-cream gradient field (radial sky + radial blush washes over a vertical #eaf6fd -> #f3fbff -> #fdf9f3 ramp) carpeted with small multicolor confetti rectangles and dots that both fall (CSS keyframe) and gently float (floaty keyframe), so the page feels alive without motion clutter. The key discipline is a two-tier color system: the bright candy tones (sky #38bdf8, coral #fb7185, plus accent #fbbf24 amber, #34d399 emerald, #a78bfa violet) are used ONLY as decorative fills (confetti, badge ring pulses, soft icon-tile backgrounds at ~15-20% opacity, blurred glows); every place a brand color becomes TEXT or a CTA fill on a light field, it switches to a deepened variant that clears 4.5:1 contrast (skyText/skyDeep #0369a1, skyDeep2 #075985, coralText/coralDeep #be123c). Surfaces are cream (#fdf9f3) and white with generous rounding (rounded-4xl 2rem, rounded-5xl 2.75rem) and soft, colored, deeply-offset shadows (a 'dialog' shadow tinted with sky, a plain 'soft' shadow, a sky-tinted 'pill' shadow on CTAs). Type is all Poppins, leaning extrabold (800) for headlines with tight tracking and a friendly mid-slate (#5b6172) for body. The one dark moment is the closing ink (#1f2433) CTA band, where the bright sky/coral return as text and blurred glows because the field is finally dark enough to carry them.", "prompt": "Use a joyful pastel design system on a soft sky-to-cream field. Body base #eaf6fd; the hero/showcase field is layered gradients: radial-gradient(120% 80% at 12% 0%, #e9f7ff 0%, transparent 55%) + radial-gradient(120% 90% at 90% 8%, #fdeef0 0%, transparent 50%) over linear-gradient(180deg, #eaf6fd 0%, #f3fbff 45%, #fdf9f3 100%). CRITICAL two-tier color rule for legibility: the bright tones sky #38bdf8 and coral #fb7185 (plus accents amber #fbbf24, emerald #34d399, violet #a78bfa) are DECORATIVE fills ONLY (confetti, ring pulses, soft 15-20% icon-tile backgrounds, blurred glows); any sky/coral used as TEXT or a CTA gradient on a light surface MUST use the deepened >=4.5:1 variants instead — skyText #0369a1, skyDeep #0369a1, skyDeep2 #075985, coralText #be123c, coralDeep #be123c. Neutrals: surface cream #fdf9f3, white panels, ink text #1f2433, body/muted slate #5b6172. Fonts: Poppins via Google Fonts, weights 400/500/600/700/800, as the only family (font-sans). Radii: rounded-2xl on small tiles, rounded-4xl (2rem) on pattern cards, rounded-5xl (2.75rem) on the dialog and mini-preview. Shadows: shadow-dialog = 0 40px 90px -30px rgba(31,36,51,0.35), 0 18px 40px -24px rgba(56,189,248,0.35) (a deep, sky-tinted dialog lift); shadow-soft = 0 18px 50px -24px rgba(31,36,51,0.30); shadow-pill = 0 14px 30px -10px rgba(56,189,248,0.55) (a sky-tinted glow under CTAs). Primary CTAs are full pills with a left-to-right deep-sky gradient (from-skyDeep #0369a1 to-skyDeep2 #075985) and white text, lifting -translate-y-0.5 on hover; the dark-band hero CTA uses from-skyDeep to-coralDeep. The headline checkmark badge is a circle with a bg-gradient-to-br from-skyDeep to-skyDeep2 fill and shadow-pill. Frosted glass utility .glass = background rgba(253,249,243,0.72) + backdrop-filter saturate(160%) blur(14px) for the sticky nav. Motion (all decorative, reduced-motion-safe in spirit): a badge 'pop' scale-in, an SVG check 'draw' (stroke-dashoffset 60 -> 0), two staggered 'ring' pulse halos behind the badge (sky/25 then coral/20), a 'fall' confetti keyframe and a slow 'floaty' bob. Icons are Phosphor via Iconify, colored with the deepened text tokens (coralText/skyText/violet #7c3aed) on light, bright on dark."}, "layout_and_structure": {"description": "A single vertically-scrolling product page made of five full-bleed bands on a shared max-w-6xl mx-auto px-6 container, with the success modal as the hero centerpiece rather than an overlay on a blank artboard. Order: (1) a sticky top-0 z-50 frosted-glass nav; (2) a tall (min-h-[86vh]) hero/showcase band on the pastel confetti field that centers a small uppercase eyebrow chip, THE success dialog card, and a caption line; (3) a full-bleed cream 'pattern library' band with a centered intro and a 3-up responsive card grid; (4) a split 'starter kit' band (sky-tinted gradient) with a left copy column (eyebrow + H2 + checklist of three icon-bullets + ink CTA) and a right stacked mini upgrade-dialog preview; (5) a full-bleed dark ink CTA/'start' band with two blurred color glows, an eyebrow chip, a big two-line headline, two CTAs and a trust line; then a cream footer. It reflows cleanly to mobile: the nav center links and 'Sign in' hide (only the 'Get the kit' pill persists), the dialog and grids collapse to one column (grid sm:grid-cols-2 lg:grid-cols-3 -> 1), the starter-kit split stacks (lg:grid-cols-2 -> 1) and its decorative offset backdrop hides (lg:block), the dark-band CTA pair stacks (sm:flex-row -> column) and the footer goes column.", "prompts": [{"part": "Sticky frosted-glass nav", "prompt": "A `<header class=\"sticky top-0 z-50\">` wrapping a `.glass border-b border-white/60` bar (background rgba(253,249,243,0.72) + backdrop-filter saturate(160%) blur(14px)). Inside, a `mx-auto flex max-w-6xl items-center justify-between px-6 py-4` row. Left: a brand lockup = a 36px (h-9 w-9) rounded-2xl tile with a bg-gradient-to-br from-skyDeep (#0369a1) to-coralDeep (#be123c) fill and shadow-pill, holding a white Phosphor ph:sparkle-fill (18px), beside an 18px font-extrabold 'Modal' + a skyText (#0369a1) '.' + 'Design' wordmark. Center (hidden below md): four 14px font-medium slate (#5b6172) links (Showcase, Patterns, Starter kit, Pricing) that hover to ink. Right: a ghost 14px font-semibold slate 'Sign in' link (hidden below sm) and a primary pill — a rounded-full bg-ink (#1f2433) px-5 py-2.5 text-sm font-semibold white 'Get the kit' button with shadow-soft, lifting -translate-y-0.5 on hover."}, {"part": "Hero / showcase band (the confetti field + dialog)", "prompt": "A `section#showcase` with class `field relative overflow-hidden` (the layered sky-to-cream gradient). Two pointer-events-none absolute inset-0 confetti layers sit behind the content: (a) a `.confetti` layer of ~15 `<span>` chips that fall (each absolutely positioned by left/top with a width/height, a bright background from {#38bdf8,#fb7185,#fbbf24,#34d399,#a78bfa}, some border-radius:50%, and CSS vars --drop/--spin/--dur/--del feeding the 'fall' keyframe); (b) a static all-over scatter of ~12 `.float` chips that gently bob via the 'floaty' keyframe (vars --r rotation, --fd duration). The content is a `relative mx-auto flex min-h-[86vh] max-w-6xl flex-col items-center justify-center px-6 py-20`: an eyebrow chip (rounded-full border-white/70 bg-white/70 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] slate + shadow-soft, with a coralText ph:confetti-fill icon and 'The success moment, designed'), THE dialog card (next part), and a closing `mt-10 max-w-lg text-center text-sm slate` caption: 'A real, copy-pasteable success state from the Modal.Design library. Pixel-deliberate, fully responsive, joyful by default.' (with 'Modal.Design' bolded in ink)."}, {"part": "The success dialog card (the centerpiece)", "prompt": "A `relative w-full max-w-md rounded-5xl bg-cream (#fdf9f3) p-9 sm:p-11 text-center shadow-dialog ring-1 ring-white` card. Top-right: a close affordance — a 36px (h-9 w-9) rounded-full grid-place-items-center button, text-slate/45, hover bg-black/5 + text-ink, holding a Phosphor ph:x-bold (15px). Centerpiece badge: a `relative mx-auto mb-7 grid h-28 w-28 place-items-center` stack = two absolute-inset-0 rounded-full ring-pulse halos (first bg-sky/25, second '.delay' bg-coral/20, each animating the 'ring' keyframe scale 0.8->1.55 fade-out, the second delayed 1.3s) UNDER a `.badge-pop relative grid h-28 w-28 place-items-center rounded-full bg-gradient-to-br from-skyDeep (#0369a1) to-skyDeep2 (#075985) shadow-pill` disc that 'pop' scales in, holding a 56px (h-14 w-14) SVG with a single white check path (d='M14 27 L23 36 L39 18', stroke-width 5.5, round caps) animated by the '.check-path' draw (stroke-dasharray 60, dashoffset 60 -> 0). Then an `h1 text-3xl sm:text-[2.1rem] font-extrabold tracking-tight` 'You're all set! 🎉', a `mx-auto mt-3 max-w-xs text-[15px] leading-relaxed slate` body 'Your design system is live. We saved every token, component, and that one modal you obsessed over.', a primary CTA pill (a `group mt-7 flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-skyDeep to-skyDeep2 py-4 text-base font-semibold text-white shadow-pill` 'Continue to dashboard' with a trailing ph:arrow-right-bold that translates-x on group-hover, lifting -translate-y-0.5), and a ghost secondary (a `mt-3 w-full rounded-full py-3 text-sm font-semibold text-slate hover:text-ink` 'Share the win with your team')."}, {"part": "Pattern library card grid", "prompt": "A full-bleed `section#patterns bg-cream py-24`, inner `mx-auto max-w-6xl px-6`. A centered `max-w-2xl` intro: a 12px font-bold uppercase tracking-[0.2em] skyText (#0369a1) eyebrow 'The pattern library', an `mt-3 text-3xl sm:text-4xl font-extrabold tracking-tight` H2 'Every modal moment, already designed', and a slate lead 'Stop reinventing dialogs at 2am. Drop in states that already feel finished, from the quiet confirm to the full confetti payoff.' Then a `mt-14 grid items-stretch gap-6 sm:grid-cols-2 lg:grid-cols-3` of three `group rounded-4xl bg-white p-7 shadow-soft ring-1 ring-black/5` cards that lift (-translate-y-1.5) and deepen to shadow-dialog on hover. Each card = a 48px (h-12 w-12) rounded-2xl soft-tinted icon tile that scales 110% on group-hover + a 20px font-bold title + a small slate body. Cards: (1) bg-sky/15 + skyText ph:check-circle-fill, 'Success & celebration', 'Payoff moments with tasteful confetti, animated checkmarks, and a single confident CTA.'; (2) bg-coral/15 + coralText ph:warning-fill, 'Confirm & destructive', 'Clear stakes, calm copy, and a focus order that protects users from the irreversible.'; (3) bg-[#a78bfa]/15 + text-[#7c3aed] ph:sparkle-fill, 'Onboarding & upsell', 'Welcome flows and plan nudges that feel like a gift, not a gate. Friendly, never pushy.'"}, {"part": "Starter-kit split band + stacked mini dialog", "prompt": "A full-bleed `section#kit bg-gradient-to-b from-[#f3fbff] to-cream py-24`, inner `mx-auto grid max-w-6xl items-center gap-14 px-6 lg:grid-cols-2`. LEFT column: a 12px font-bold uppercase tracking-[0.2em] coralText (#be123c) eyebrow 'Built for shipping', an `mt-3 text-3xl sm:text-4xl font-extrabold` H2 'Tokens in, joy out', a slate lead, then an `mt-7 space-y-4` checklist of three flex bullets — each a 24px (h-6 w-6) rounded-full soft-tinted tile holding a Phosphor ph:check-bold over a slate line with an ink-bold lead phrase: (sky/20 + skyText) 'Accessible by default: focus traps, ARIA roles, reduced-motion fallbacks.', (coral/20 + coralText) 'Animation that respects intent: pops, draws, and confetti you can tune or kill.', ([#a78bfa]/20 + #7c3aed) 'Framework-friendly: paste into React, Vue, or plain HTML in minutes.' — closed by an `mt-9 inline-flex items-center gap-2 rounded-full bg-ink px-6 py-3.5 text-sm font-semibold text-white shadow-soft` 'Browse all 40 modals' CTA with a ph:arrow-right-bold. RIGHT column: a `relative` stack = a decorative `absolute -left-3 top-6 hidden h-full w-full rounded-5xl bg-coral/15 lg:block` offset backdrop UNDER a `relative rounded-5xl bg-cream p-8 text-center shadow-dialog ring-1 ring-white` mini upgrade-dialog: a 64px (h-16 w-16) rounded-full bg-gradient-to-br from-[#f43f5e] to-coralDeep shadow-pill tile with a white ph:heart-fill, a 20px font-extrabold 'Thanks for upgrading!', a slate body, and a row of two buttons — a flex-1 rounded-full from-skyDeep to-skyDeep2 gradient 'Explore Pro' + a bordered (border-slate/20) ghost 'Later'."}, {"part": "Dark ink CTA / start band", "prompt": "A full-bleed `section#start relative overflow-hidden bg-ink (#1f2433) py-24 text-center text-white`. Behind: a pointer-events-none absolute inset-0 layer with two blurred glows — `-left-10 top-8 h-40 w-40 rounded-full bg-sky/20 blur-3xl` and `right-0 bottom-0 h-48 w-48 rounded-full bg-coral/20 blur-3xl` (on the dark field the bright sky/coral are allowed). Content `relative mx-auto max-w-2xl px-6`: an eyebrow chip (rounded-full border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-sky, with a ph:rocket-launch-fill and 'Ship today'), an `mt-5 text-4xl sm:text-5xl font-extrabold tracking-tight` two-line H2 'Make your users smile / on the way out the door' (the break hidden below sm), a `mx-auto mt-5 max-w-lg text-white/70` lead, then an `mt-9 flex flex-col sm:flex-row items-center justify-center gap-3` CTA pair — a primary `rounded-full bg-gradient-to-r from-skyDeep to-coralDeep px-8 py-4 text-base font-semibold text-white shadow-pill` 'Get Modal.Design $49' + a bordered (border-white/20) ghost 'See the live demo' — and an `mt-5 text-xs text-white/45` trust line 'Loved by 12,000+ designers · 30-day no-questions refund'."}, {"part": "Footer", "prompt": "A `footer bg-cream py-10`, inner `mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 text-sm text-slate sm:flex-row`. Left: a brand lockup = a 32px (h-8 w-8) rounded-xl bg-gradient-to-br from-skyDeep to-coralDeep tile with a white ph:sparkle-fill (15px) beside a font-bold ink 'Modal' + skyText '.' + 'Design'. Center: a tagline 'Designed with care, shipped with confetti. © 2026'. Right: three hover-to-ink links (Twitter, GitHub, Figma) in a gap-5 row."}]}, "special_ui_components": [{"name": "Success-celebration dialog (the centerpiece)", "prompt": "The signature component: a `max-w-md rounded-5xl bg-cream p-9 sm:p-11 text-center shadow-dialog ring-1 ring-white` card presented as the live hero centerpiece (not floated on a blank artboard) over a confetti field. It carries a top-right close button, a 112px (h-28 w-28) checkmark badge stack (two staggered ring-pulse halos in sky/25 + coral/20 behind a .badge-pop deep-sky gradient disc from-skyDeep #0369a1 to-skyDeep2 #075985 with shadow-pill, holding a white SVG check that draws in via stroke-dashoffset), a 'You're all set! 🎉' extrabold headline, a friendly slate body, a full-width deep-sky gradient primary CTA with an arrow that nudges on hover, and a quiet ghost secondary. The legibility fix is intrinsic: the bright sky badge of the reference is replaced by the deepened skyDeep gradient so white text/icon on it clears contrast, and confetti stays bright but only as decoration."}, {"name": "Animated checkmark badge", "prompt": "A reusable celebratory badge: a `relative grid h-28 w-28 place-items-center` stack of two absolute-inset-0 rounded-full halos that pulse outward (.ring-pulse = 'ring' keyframe scale 0.8 opacity .55 -> scale 1.55 opacity 0 over 2.6s infinite; the second '.delay' is bg-coral/20 delayed 1.3s, the first bg-sky/25) sitting under a .badge-pop disc (rounded-full bg-gradient-to-br from-skyDeep to-skyDeep2 shadow-pill, animating the 'pop' keyframe scale 0.4 opacity 0 -> 1.08 -> 1) that holds an h-14 w-14 SVG with one white check path (d='M14 27 L23 36 L39 18', stroke-width 5.5, round linecap/linejoin) animated by .check-path (stroke-dasharray 60, stroke-dashoffset 60 -> 0 via the 'draw' keyframe, 0.35s delay). A smaller heart variant (h-16 w-16 rounded-full bg-gradient-to-br from-[#f43f5e] to-coralDeep with a white ph:heart-fill) is reused in the upgrade mini-dialog."}, {"name": "Confetti field", "prompt": "A full-bleed celebration backdrop made of two pointer-events-none absolute inset-0 layers behind the hero content: (a) a `.confetti` layer of ~15 small absolutely-positioned `<span>` chips (8-16px, some rounded-full) colored from a bright set {#38bdf8 sky, #fb7185 coral, #fbbf24 amber, #34d399 emerald, #a78bfa violet}, each falling via the 'fall' keyframe driven by per-span CSS vars --drop (travel), --spin (rotation), --dur, --del; (b) a static all-over scatter of ~12 `.float` chips that gently bob via the 'floaty' keyframe (vars --r base rotation, --fd duration). The colors are intentionally kept bright here because confetti is purely decorative; no text ever sits on these chips."}, {"name": "Pattern-library hover card", "prompt": "A `group rounded-4xl bg-white p-7 shadow-soft ring-1 ring-black/5` card that lifts (-translate-y-1.5) and deepens to shadow-dialog on hover. Top: a 48px rounded-2xl icon tile with a soft 15%-opacity brand fill and a deepened-tone Phosphor icon (sky/15 + skyText, coral/15 + coralText, or [#a78bfa]/15 + #7c3aed) that scales 110% on group-hover. Below: a 20px font-bold ink title and a small slate body. Used three-up for the Success / Confirm / Onboarding patterns."}, {"name": "Deep-sky gradient CTA pill", "prompt": "The primary action style across the page: a full rounded-full pill with a left-to-right deep-sky gradient (bg-gradient-to-r from-skyDeep #0369a1 to-skyDeep2 #075985), white semibold text, shadow-pill (a sky-tinted glow 0 14px 30px -10px rgba(56,189,248,0.55)), lifting -translate-y-0.5 on hover; the in-dialog variant adds a trailing ph:arrow-right-bold that translate-x-0.5 on group-hover. The closing dark-band hero CTA swaps to from-skyDeep to-coralDeep. These deepened gradients are the legibility fix: the reference's bright candy CTA is replaced so white text always clears 4.5:1."}], "special_notes": "Single Google Font: Poppins (weights 400/500/600/700/800) as the only family — headlines extrabold (800) with tight tracking, body in mid-slate. Icons are Phosphor via Iconify (ph:sparkle-fill, ph:confetti-fill, ph:x-bold, ph:arrow-right-bold, ph:check-circle-fill, ph:warning-fill, ph:check-bold, ph:heart-fill, ph:rocket-launch-fill). EXACT tokens — cream #fdf9f3, ink #1f2433, slate #5b6172, page base #eaf6fd; DECORATIVE-ONLY bright tones sky #38bdf8 + coral #fb7185 (+ amber #fbbf24, emerald #34d399, violet #a78bfa); LEGIBILITY-FIXED text/CTA tones skyText=skyDeep #0369a1, skyDeep2 #075985, coralText=coralDeep #be123c, plus violet text #7c3aed. THE CORE LEGIBILITY RULE (the point of this item): bright sky/coral are used ONLY as decorative fills (confetti, ring-pulse halos, ~15-20% soft icon-tile backgrounds, blurred dark-band glows); wherever a brand color becomes TEXT or a CTA gradient on a light field it switches to the deepened >=4.5:1 variant, so contrast is never sacrificed for the pastel mood. Radii: rounded-2xl tiles, rounded-4xl (2rem) pattern cards, rounded-5xl (2.75rem) dialog + mini-preview. Shadows: shadow-dialog 0 40px 90px -30px rgba(31,36,51,0.35) + 0 18px 40px -24px…

---
"Modal Design · success-celebration (pastel) — legibility fixed" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Modal Design · success-celebration (pastel) — legibility fixed. \"Modal Design · success-celebration (pastel) — legibility fixed\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-modal-design-success-celebration-pastel-legibility-fixed-9fbd65",
      "license": "CC0-1.0",
      "attribution": "\"Modal Design · success-celebration (pastel) — legibility fixed\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1f2433"
    },
    "card": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1f2433"
    },
    "primary": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#1f2433"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1f2433"
    },
    "accent": {
      "$type": "color",
      "$value": "#1f2433"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#eeeae4"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6d717a"
    },
    "border": {
      "$type": "color",
      "$value": "#dad6d1"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#fdf9f3"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Modal Design · success-celebration (pastel) — legibility fixed" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520. */
:root {
  --background: #fdf9f3;
  --foreground: #1f2433;
  --card: #fdf9f3;
  --card-foreground: #1f2433;
  --primary: #fdf9f3;
  --primary-foreground: #1c1917;
  --secondary: #1f2433;
  --secondary-foreground: #1f2433;
  --accent: #1f2433;
  --accent-foreground: #fafaf9;
  --muted: #eeeae4;
  --muted-foreground: #6d717a;
  --border: #dad6d1;
  --destructive: #dc2626;
  --ring: #fdf9f3;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Modal Design · success-celebration (pastel) — legibility fixed" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520. */
/** Tailwind theme extend for Modal Design · success-celebration (pastel) — legibility fixed (superdesign-modal-design-success-celebration-pastel-legibility-fixed-9fbd65) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fdf9f3",
        "foreground": "#1f2433",
        "card": "#fdf9f3",
        "primary": "#fdf9f3",
        "primary-foreground": "#1c1917",
        "secondary": "#1f2433",
        "accent": "#1f2433",
        "muted": "#eeeae4",
        "border": "#dad6d1",
        "destructive": "#dc2626",
        "ring": "#fdf9f3"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Modal Design · success-celebration (pastel) — legibility fixed" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/modal-design-success-celebration-pastel-legibility-fixed-9fbd65 @ 6c6090694520. */
@layer base {
:root {
  --background: #fdf9f3;
  --foreground: #1f2433;
  --card: #fdf9f3;
  --card-foreground: #1f2433;
  --primary: #fdf9f3;
  --primary-foreground: #1c1917;
  --secondary: #1f2433;
  --secondary-foreground: #1f2433;
  --accent: #1f2433;
  --accent-foreground: #fafaf9;
  --muted: #eeeae4;
  --muted-foreground: #6d717a;
  --border: #dad6d1;
  --destructive: #dc2626;
  --ring: #fdf9f3;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}