Prism — Frosted-Glass Pastel Agency Studio

{"summary": "A light, airy agency studio homepage built on soft-pastel glassmorphism: a #fbfcff mesh-gradient canvas blooming with peach #ffd8c2, sky #cfe3ff and mint #d3f5e3 radial clouds, layered with frosted-glass surfaces (translucent white sheets, backdrop-blur, 1px white borders, soft colored shadows, faint grain). A floating pill-shaped glass sticky nav sits above a centered hero (three glass pill badges, a huge near-black Inter-black headline 'Websites that make brands look inevitable', a slate lead, a dark pill CTA + a glass secondary pill) staged over a band of three fanned, overlapping translucent UI mock cards (mint -6deg, sky +6deg, and an upright frosted browser card on top). Below: a faded trust logo strip; a frosted bento WORK grid (a 4x2 feature, a dark +240% stat tile, and tinted small/wide cards); a large glass-deep SERVICES panel with three cards (one dark 'Most loved'); a three-up testimonial row with a dark feature quote; a frosted closing CONTACT CTA; and a glass-divided footer. The signature is the contrast of soft pastel frosted glass against a single near-black #15161b ink accent on CTAs and one card per section, all in tight Inter black type.", "style": {"description": "Soft, premium, light-mode glassmorphism. The page floats on a #fbfcff canvas washed by four overlapping pastel radial glows (peach #ffd8c2, sky #cfe3ff, mint #d3f5e3) so the background is always softly colored, never flat white. On top sit translucent frosted-glass surfaces: a lighter .glass (rgba(255,255,255,0.55) + blur(22px) saturate(140%)) for the nav, pills and bento tiles, and a heavier .glass-deep (rgba(255,255,255,0.42) + blur(28px) saturate(150%)) for the big hero cards and services/CTA panels, each ringed by a bright 1px white border. Depth is soft and colored: shadow-soft and shadow-float use blue-violet-tinted, heavily-feathered drop shadows (rgba(60,70,110,..) / rgba(50,60,105,..)), and a faint dotted .grain overlay (mix-blend overlay, opacity .18) gives the glass a frosted, photographic texture. The single high-contrast accent is near-black ink #15161b: it fills the primary pill CTAs, the logo square, and exactly one dark card per section (the +240% stat tile, the 'Most loved' service card, the feature testimonial). Pastel tints (peach/sky/mint) appear only as gentle gradient washes on glass cards, traffic-light dots, status dots, avatars, mini-chart bars and icon chips. Everything is heavily rounded (rounded-full pills + rounded-[26-40px] cards) and the type is tight Inter black, which keeps the whole thing premium, friendly and engineered rather than toy-like.", "prompt": "Light, premium glassmorphism agency site on a soft pastel mesh-gradient canvas. Load Tailwind via CDN and register exact custom colors in tailwind.config theme.extend.colors: ink '#15161b', slate2 '#5c606e', peach '#ffd8c2', sky '#cfe3ff', mint '#d3f5e3'; fontFamily.sans = ['Inter','system-ui','sans-serif']; letterSpacing.tightest '-0.045em'. Body is class 'mesh font-sans text-ink antialiased overflow-x-hidden'. The .mesh background = background-color:#fbfcff with four layered radial-gradients of the pastel tints: radial-gradient(58% 52% at 12% 8%, rgba(255,216,194,0.9) 0%, transparent 60%), radial-gradient(55% 50% at 88% 14%, rgba(207,227,255,0.95) 0%, transparent 62%), radial-gradient(60% 55% at 78% 72%, rgba(211,245,227,0.9) 0%, transparent 60%), radial-gradient(48% 44% at 30% 88%, rgba(255,216,194,0.55) 0%, transparent 60%). A .mesh-band variant (mint-left / sky-right / peach-bottom radials) tints the large panels. The signature surface is frosted glass: .glass = background rgba(255,255,255,0.55) + backdrop-filter blur(22px) saturate(140%) + 1px border rgba(255,255,255,0.75); .glass-deep = rgba(255,255,255,0.42) + blur(28px) saturate(150%) + 1px border rgba(255,255,255,0.7). Depth is soft and colored, never harsh: .shadow-soft = 0 24px 60px -28px rgba(60,70,110,0.35), 0 4px 16px -8px rgba(60,70,110,0.12); .shadow-float = 0 40px 90px -36px rgba(50,60,105,0.45). The one solid control is .btn-dark = background #15161b + box-shadow 0 10px 26px -10px rgba(21,22,27,0.5) with white text. A faint .grain overlay (::after radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px) background-size 4px 4px, opacity .18, mix-blend overlay) sits on glass cards. ::selection is background #ffd8c2 / color #15161b. html { scroll-behavior:smooth }. Icons are Iconify Phosphor (ph:) fill glyphs; accent icon tints are peach-orange #e88a5a/#d9743f, sky-blue #4f8cd6/#3f72c4, mint-green #3fae7a. Everything rounded heavily (rounded-full nav/pills/buttons, rounded-[26px]/[28px]/[36px]/[40px] cards/panels).", "prompt_typography": "Inter only (Google Fonts, weights 400;500;600;700;800;900) as font-sans with system-ui fallback, antialiased + optimizeLegibility. Display headings are Inter black (font-black, 800-900) with tracking-tightest (-0.045em) and tight leading: hero H1 text-[52px] -> sm:text-[68px] -> md:text-[88px] leading-[0.96]; section H2s text-[34px]/[36px] -> md:text-[48px]/[52px] leading-[1.02-1.04]; the closing CTA H2 text-[40px] -> md:text-[64px] leading-[0.98]. Body/lead copy is text-[16-19px] leading-relaxed in slate2 #5c606e, with key phrases bumped to font-semibold text-ink. Eyebrows/labels are text-[12-13px] font-semibold uppercase tracking-[0.14em-0.18em] in slate2. Card titles font-extrabold tracking-tight; pill badges/buttons text-[13.5-15.5px] font-semibold. Big stat number (+240%) text-[46px] font-black tracking-tightest."}, "layout_and_structure": {"description": "A single-column, vertically stacked, frameless responsive marketing page on the pastel mesh canvas. Almost every section centers in mx-auto max-w-6xl with px-5. Order top to bottom: a floating pill-shaped sticky glass nav (header sticky top-0 z-50, the nav itself a rounded-full glass bar inset by px-5 pt-4); a centered hero (three glass pill badges, a huge Inter-black headline, a slate lead paragraph, a dark pill primary CTA + a glass secondary pill) sitting above a band of three fanned, overlapping translucent glass UI cards (a left mint-tinted card rotated -6deg, a right sky-tinted card rotated +6deg, and a centered frosted browser-style card on top); a faded centered trust logo strip (5 Phosphor-glyph wordmarks); a frosted bento WORK grid; a large glass-deep SERVICES panel (mesh-band tinted) holding three service cards; a centered three-up testimonial/clients row; a frosted closing CONTACT CTA panel; and a footer divided by white hairline borders. Reflow: the nav center links hide below md (logo + CTA remain); the hero headline drops its <br> below sm; the floating-card band scales height 300px -> sm:380px -> md:440px and cards shift inward (md:left-[8%]/right-[8%]); the bento grid is grid-cols-1 -> md:grid-cols-6 with md:auto-rows-[230px] and explicit col-span/row-span (a 4x2 feature, a 2-col dark stat, a 2-col small, two 3-col wides); the services grid is grid-cols-1 -> md:grid-cols-3; testimonials grid-cols-1 -> md:grid-cols-3; the footer is a flex-col -> md:flex-row with a 2 -> sm:3 col link grid; everything collapses to one column on mobile with no horizontal overflow (body overflow-x-hidden).", "prompts": [{"part": "Floating glass sticky nav", "prompt": "A header sticky top-0 z-50 w-full with px-5 pt-4 so the bar floats off the top edge. Inside: a nav mx-auto max-w-6xl flex items-center justify-between rounded-full .glass .shadow-soft px-3 py-2.5. Left = brand lockup: a 9x9 rounded-xl .btn-dark square holding a white ph:triangle-fill (15px) rotated 180deg, beside the wordmark 'Prism' (text-[17px] font-extrabold tracking-tightest). Center (hidden md:flex) = a rounded-full bg-white/45 px-1.5 py-1 segmented group of links Work / Services / Clients / Contact, each rounded-full px-4 py-2 text-[14px] font-medium text-slate2 that on hover gets bg-white + text-ink. Right = a .btn-dark rounded-full px-5 py-2.5 text-[14px] font-semibold text-white 'Start a project' pill with a trailing 1.5x1.5 rounded-full bg-mint dot; hover:opacity-90."}, {"part": "Hero (centered, pastel)", "prompt": "A centered section mx-auto max-w-6xl px-5 pt-24 -> md:pt-32 pb-8 text-center. Top: a flex-wrap justify-center gap-2.5 row of three .glass .shadow-soft rounded-full px-4 py-2 text-[13.5px] font-semibold pill badges, each a ph: fill icon + label: ph:sparkle-fill in #e88a5a 'Brand-first', ph:lightning-fill in #4f8cd6 'Ships in weeks', ph:check-circle-fill in #3fae7a 'Conversion-built'. Then an H1 mx-auto max-w-4xl text-[52px] -> sm:text-[68px] -> md:text-[88px] font-black leading-[0.96] tracking-tightest: 'Websites that make' <br hidden sm:block> 'brands look inevitable'. Below (mt-7) a mx-auto max-w-xl text-[17px] -> md:text-[19px] leading-relaxed text-slate2 lead with the phrase 'convert, scale, and feel premium' bumped to font-semibold text-ink. CTA row mt-9 flex-col -> sm:flex-row gap-3 justify-center: a .btn-dark rounded-full px-7 py-3.5 text-[15px] font-semibold text-white 'Book a kickoff call' + ph:arrow-up-right-bold; and a .glass .shadow-soft rounded-full px-7 py-3.5 text-[15px] font-semibold text-ink 'See the work' pill with a trailing 1.5x1.5 bg-ink dot (hover:bg-white)."}, {"part": "Fanned floating glass cards", "prompt": "Directly under the hero copy, a relative mx-auto max-w-6xl px-5 mt-2 band h-[300px] -> sm:h-[380px] -> md:h-[440px] holding three absolutely-positioned translucent UI cards that fan and overlap. Left card: absolute left-[3%] -> md:left-[8%] top-[18%] w-[40%] -rotate-6 rounded-[26px] .glass-deep .shadow-float .grain overflow-hidden, inline style background linear-gradient(160deg, rgba(211,245,227,0.85), rgba(255,255,255,0.35)) (mint tint); inside p-5 -> md:p-7 = skeleton bars (rounded-full bg-white/80,/55,/45) + a 2-col grid of two h-14 rounded-xl white/65,/45 blocks. Right card: mirror it (right-[3%] -> md:right-[8%], +rotate-6, sky tint linear-gradient(200deg, rgba(207,227,255,0.85), rgba(255,255,255,0.35))) with an icon+label header, two skeleton bars, and an h-16 block. Center card (on top): absolute left-1/2 top-0 -translate-x-1/2 w-[46%] max-w-[420px] rounded-[28px] .glass-deep .shadow-float .grain overflow-hidden, faking a browser window: a border-b border-white/50 header row with three traffic-light dots (bg-peach, bg-sky, bg-mint) + a white/70 url bar, then a grid grid-cols-5 gap-4 p-6 with a col-span-2 h-24 white/75 thumb and a col-span-3 stack of skeleton bars ending in an h-7 w-2/5 rounded-full bg-ink/85 faux button."}, {"part": "Trust logo strip", "prompt": "A section mx-auto max-w-6xl px-5 py-12. A centered eyebrow text-[13px] font-semibold uppercase tracking-[0.18em] text-slate2/80 'Trusted by teams shipping fast'. Below, a flex-wrap items-center justify-center gap-x-10 -> md:gap-x-16 gap-y-6 opacity-70 row of five faux company lockups, each text-[20px] font-extrabold tracking-tight = a Phosphor glyph + wordmark: ph:planet-fill Northwind, ph:hexagon-fill Lumen, ph:circles-three-fill Cadence, ph:cube-fill Vellum, ph:flower-lotus-fill Orchid."}, {"part": "Bento work grid", "prompt": "Section id=work, mx-auto max-w-6xl px-5 py-16 -> md:py-24. Header row (mb-12 flex-col -> md:flex-row items-end justify-between): left = a .glass .shadow-soft rounded-full px-4 py-1.5 eyebrow pill (a 1.5x1.5 bg-peach dot + 'Selected work', uppercase tracking-[0.14em] text-slate2) above an H2 text-[36px] -> md:text-[52px] font-black leading-[1.02] tracking-tightest 'Every detail engineered around your goals'; right = a .glass .shadow-soft rounded-full px-5 py-3 'View all projects' + ph:arrow-right-bold pill. Grid = grid-cols-1 -> md:grid-cols-6 gap-5 md:auto-rows-[230px]. Tiles: (1) a md:col-span-4 md:row-span-2 .glass .shadow-soft .grain rounded-[28px] feature card with a sky->white->mint diagonal gradient, a 'Fintech . Full site' white/70 chip + a bg-ink white circle ph:arrow-up-right-bold that rotates 45deg on group-hover, a small mini-browser mock + a 5-bar mini bar chart (peach/sky/mint/ink/peach), and a title 'Northwind, a banking site people trust' + slate caption. (2) a md:col-span-2 dark stat card (gradient #15161b->#2a2c38, .grain, white text) with a mint ph:trend-up-bold and a text-[46px] font-black '+240%' over 'avg. lift in lead conversion across launches'. (3) a md:col-span-2 peach-tinted small card 'SaaS . Brand' / 'Lumen Analytics'. (4) a md:col-span-3 mint-tinted wide card 'E-commerce' / 'Orchid storefront' with a small white/75 product thumbnail. (5) a md:col-span-3 sky-tinted wide card 'Web app' / 'Cadence scheduling' with a small calendar-grid thumbnail. All glass tiles share .glass .shadow-soft .grain rounded-[28px] with white/70 category chips and font-extrabold tracking-tight titles."}, {"part": "Glass services panel", "prompt": "Section id=services, mx-auto max-w-6xl px-5 py-16 -> md:py-24. One big panel: relative overflow-hidden rounded-[36px] .glass-deep .shadow-float .grain .mesh-band p-8 -> md:p-14. Header (mb-12 max-w-2xl): a bg-white/70 rounded-full eyebrow pill (1.5x1.5 bg-sky dot + 'What we do') + an H2 text-[34px] -> md:text-[48px] font-black leading-[1.02] tracking-tightest 'One studio, the whole journey from idea to launch'. Then a grid grid-cols-1 -> md:grid-cols-3 gap-4 of three service cards, each rounded-3xl p-7 transition hover:-translate-y-1. Card 1 & 3 are .glass .shadow-soft: a 12x12 rounded-2xl tinted icon chip (peach bg rgba(255,216,194,0.7) / color #d9743f with ph:compass-tool-fill; sky bg rgba(207,227,255,0.7) / color #3f72c4 with ph:code-fill), an H3 (Brand & identity / Build & ship), a slate paragraph, and a 2-item check list (ph:check-bold in #3fae7a). Card 2 is the highlighted dark card: linear-gradient(165deg,#15161b,#2c2e3b), .grain, white text, an absolute bg-mint px-3 py-1 text-ink 'Most loved' badge top-right, a bg-white/15 icon chip with a text-sky ph:browsers-fill, H3 'Website design', a white/65 paragraph, and a check list with text-mint ph:check-bold."}, {"part": "Testimonials / clients row", "prompt": "Section id=clients, mx-auto max-w-6xl px-5 py-16 -> md:py-24. Centered header: a .glass .shadow-soft rounded-full eyebrow pill (1.5x1.5 bg-mint dot + 'Founders on Prism') + an H2 mx-auto max-w-2xl text-[34px] -> md:text-[48px] font-black leading-[1.04] tracking-tightest 'What teams say after we ship'. Grid grid-cols-1 -> md:grid-cols-3 gap-5 of three cards. Cards 1 & 3 are .glass .shadow-soft rounded-[26px] p-7 figures: a row of five text-peach ph:star-fill, a text-[15.5px] leading-relaxed blockquote, and a figcaption with a 11x11 rounded-full tinted-initials avatar (bg-sky / bg-mint, text-ink font-bold) + name + slate role. Card 2 is the dark feature: rounded-[26px] .grain .shadow-float p-8 white, gradient #15161b->#2a2c38, a text-mint ph:quotes-fill, an text-[18px] font-semibold leading-snug quote, and a bg-mint avatar + white/55 role."}, {"part": "Closing contact CTA", "prompt": "Section id=contact, mx-auto max-w-6xl px-5 pb-20 pt-4. One panel: relative overflow-hidden rounded-[40px] .glass-deep .shadow-float .grain .mesh-band p-10 -> md:p-20 text-center. A bg-white/70 rounded-full eyebrow pill (1.5x1.5 bg-peach dot + 'Booking Q3 now'), an H2 mx-auto max-w-3xl text-[40px] -> md:text-[64px] font-black leading-[0.98] tracking-tightest 'Let’s build something' <br hidden sm:block> 'worth staring at', a mx-auto max-w-lg text-[16px] -> md:text-[18px] leading-relaxed text-slate2 subline, and a CTA row mt-9 flex-col -> sm:flex-row gap-3 justify-center: a .btn-dark rounded-full px-8 py-4 text-[15.5px] font-semibold text-white 'Start a project' + ph:arrow-up-right-bold, plus a .glass .shadow-soft rounded-full px-8 py-4 text-ink secondary pill with ph:envelope-simple-bold + 'hello@prism.studio'."}, {"part": "Footer (glass-divided)", "prompt": "A footer relative border-t border-white/60. Inside mx-auto max-w-6xl px-5 py-14: a flex-col -> md:flex-row items-start justify-between gap-10. Left (max-w-xs): the brand lockup (9x9 rounded-xl .btn-dark square + white rotated ph:triangle-fill, 'Prism' text-[17px] font-extrabold tracking-tightest) + a text-[14px] leading-relaxed text-slate2 blurb. Right: a grid grid-cols-2 -> sm:grid-cols-3 gap-x-14 gap-y-8 of three link columns (Studio / Company / Social), each a text-[12.5px] font-bold uppercase tracking-[0.14em] text-ink heading + a space-y-2.5 text-[14px] text-slate2 list whose links hover:text-ink. Bottom: a mt-12 border-t border-white/60 pt-7 flex-col -> sm:flex-row items-center justify-between text-[13px] text-slate2 row: a copyright line and a 'Crafted with care' line trailed by three 1.5x1.5 rounded-full dots in bg-peach / bg-sky / bg-mint."}]}, "special_ui_components": [{"component": "Frosted-glass surface system (.glass / .glass-deep)", "description": "The signature material: every nav, pill, badge, card and panel is translucent frosted glass that lets the pastel mesh bleed through, with a bright 1px white inner border so each shape reads as a sheet of glass.", "prompt": "Define .glass { background: rgba(255,255,255,0.55); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.75) } and a heavier .glass-deep { background: rgba(255,255,255,0.42); backdrop-filter: blur(28px) saturate(150%); border: 1px solid rgba(255,255,255,0.7) }. Use .glass for the nav, all pill badges/buttons, eyebrow pills, and bento tiles; use .glass-deep for the large hero floating cards and the big services/CTA panels. Always pair with rounded-full (pills/nav) or rounded-[26px]/[28px]/[36px]/[40px] (cards/panels) so the glass edges curve."}, {"component": "Pastel mesh-gradient canvas (.mesh / .mesh-band)", "description": "The whole page floats on a soft off-white canvas blooming with overlapping peach, sky and mint radial-gradient clouds; a tighter .mesh-band variant re-tints the large glass panels so they glow from within.", "prompt": ".mesh { background-color:#fbfcff; background-image: radial-gradient(58% 52% at 12% 8%, rgba(255,216,194,0.9), transparent 60%), radial-gradient(55% 50% at 88% 14%, rgba(207,227,255,0.95), transparent 62%), radial-gradient(60% 55% at 78% 72%, rgba(211,245,227,0.9), transparent 60%), radial-gradient(48% 44% at 30% 88%, rgba(255,216,194,0.55), transparent 60%) }. .mesh-band { background-image: radial-gradient(50% 80% at 8% 50%, rgba(211,245,227,0.85), transparent 60%), radial-gradient(50% 80% at 95% 30%, rgba(207,227,255,0.9), transparent 60%), radial-gradient(45% 70% at 60% 95%, rgba(255,216,194,0.7), transparent 60%) }. Apply .mesh to body and .mesh-band to the services and contact panels."}, {"component": "Fanned, overlapping translucent UI cards (hero)", "description": "In place of a single product hero shot, three frosted UI mock cards fan out and overlap under the headline (a -6deg mint card, a +6deg sky card, and an upright centered browser-style card on top), each a tinted gradient glass-deep sheet with a soft floating shadow and grain.", "prompt": "A relative band whose three children are absolutely positioned: left card left-[3%]/md:left-[8%] top-[18%] w-[40%] -rotate-6, right card right-[3%]/md:right-[8%] top-[18%] w-[40%] rotate-6, center card left-1/2 top-0 -translate-x-1/2 w-[46%] max-w-[420px]. All are rounded-[26px]/[28px] .glass-deep .shadow-float .grain overflow-hidden. The left/right cards carry an inline linear-gradient tint (mint 160deg / sky 200deg into rgba(255,255,255,0.35)); the center card fakes a browser (header with peach/sky/mint traffic-light dots + a 5-col content grid). Fill cards only with rounded skeleton bars/blocks in varying white opacities (bg-white/45..80) so they read as abstract UI."}, {"component": "Dark accent card on glass (.btn-dark / near-black ink #15161b)", "description": "Near-black #15161b is the single high-contrast accent against all the pastel glass: it fills the primary CTA pills, the brand logo square, the bento +240% stat card, the highlighted 'Most loved' service card, and the dark feature testimonial, giving the airy page weight and a clear vis…

---
"Prism — Frosted-Glass Pastel Agency Studio" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Prism — Frosted-Glass Pastel Agency Studio. \"Prism — Frosted-Glass Pastel Agency Studio\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-prism-frosted-glass-pastel-agency-studio",
      "license": "CC0-1.0",
      "attribution": "\"Prism — Frosted-Glass Pastel Agency Studio\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fbfcff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#15161b"
    },
    "card": {
      "$type": "color",
      "$value": "#fbfcff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#15161b"
    },
    "primary": {
      "$type": "color",
      "$value": "#fbfcff"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffd8c2"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#15161b"
    },
    "accent": {
      "$type": "color",
      "$value": "#ffd8c2"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#ecedf0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#67686b"
    },
    "border": {
      "$type": "color",
      "$value": "#d8d9db"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#fbfcff"
    }
  },
  "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 */
/* "Prism — Frosted-Glass Pastel Agency Studio" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520. */
:root {
  --background: #fbfcff;
  --foreground: #15161b;
  --card: #fbfcff;
  --card-foreground: #15161b;
  --primary: #fbfcff;
  --primary-foreground: #1c1917;
  --secondary: #ffd8c2;
  --secondary-foreground: #15161b;
  --accent: #ffd8c2;
  --accent-foreground: #1c1917;
  --muted: #ecedf0;
  --muted-foreground: #67686b;
  --border: #d8d9db;
  --destructive: #dc2626;
  --ring: #fbfcff;
  --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 */
/* "Prism — Frosted-Glass Pastel Agency Studio" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520. */
/** Tailwind theme extend for Prism — Frosted-Glass Pastel Agency Studio (superdesign-prism-frosted-glass-pastel-agency-studio) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fbfcff",
        "foreground": "#15161b",
        "card": "#fbfcff",
        "primary": "#fbfcff",
        "primary-foreground": "#1c1917",
        "secondary": "#ffd8c2",
        "accent": "#ffd8c2",
        "muted": "#ecedf0",
        "border": "#d8d9db",
        "destructive": "#dc2626",
        "ring": "#fbfcff"
      },
      "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 */
/* "Prism — Frosted-Glass Pastel Agency Studio" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/prism-frosted-glass-pastel-agency-studio @ 6c6090694520. */
@layer base {
:root {
  --background: #fbfcff;
  --foreground: #15161b;
  --card: #fbfcff;
  --card-foreground: #15161b;
  --primary: #fbfcff;
  --primary-foreground: #1c1917;
  --secondary: #ffd8c2;
  --secondary-foreground: #15161b;
  --accent: #ffd8c2;
  --accent-foreground: #1c1917;
  --muted: #ecedf0;
  --muted-foreground: #67686b;
  --border: #d8d9db;
  --destructive: #dc2626;
  --ring: #fbfcff;
  --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);
}
}