Loop · Say hello, we don't bite (friendly illustrated sky)

{"summary": "A warm, playful, illustrated LIGHT contact page for a friendly maker brand (Loop), built around one signature pairing: a left COPY + HAND-DRAWN ILLUSTRATION column beside a right multi-field CONTACT FORM, all wrapped inside one giant rounded-5xl white card that floats on a soft sky-and-coral cloud background. The page stacks as a sticky blurred cloud-tinted nav, then a full-bleed centered HERO band (a pulsing 'reply within a few hours' status pill + a big two-tone display headline 'Let's chat about anything you're building' + a one-line sub), then THE CONTACT CARD section (a single huge rounded-5xl bg-white shadow-card ring-1 ring-sky-soft card, topped by a thin sky->cyan->coral gradient seam, split into a left copy/illustration column and a right form via grid lg:grid-cols-2 gap-16 p-16), then a full-row of three alt-contact cards (Email us / Live chat / Community), then a full-bleed sky-ink footer. The reusable signature is the FRIENDLY-ILLUSTRATED-SKY contact system: a soft sky-blue cloud canvas (#f0f9ff) dotted with blurred sky/coral orbs + a faint sky polka grain, a sky (#38bdf8) + coral (#fb7185) two-accent palette over deep sky-ink (#0c4a6e) text, a heavy rounded Nunito type ramp (weights up to 900/black), a hand-built CSS+SVG illustration panel (a coral sun, floating white clouds, three channel bubbles compass/envelope/phone, a row of grass blades and a horizon line, all gently float-animated), pill-shaped chips and rounded-2xl inputs with a sky focus ring, and a gradient sky-ink 'Send message' button with a paper-plane glyph. Nunito throughout (rounded, friendly, black weights), inline hand-coded SVG icons, mood cheerful/approachable/human/2am-friendly, never a cold corporate form.", "style": {"description": "A warm, playful, friendly LIGHT aesthetic on a soft sky-blue cloud canvas (cloud #f0f9ff) decorated with big blurred orbs (sky-soft #bae6fd at /40-/60 and coral-soft #fecdd3 at /50) and a faint .grain polka wash (radial-gradient rgba(56,189,248,0.16) 1px dots on a 22px grid). The palette is a friendly two-accent system over a deep sea-ink: register a custom Tailwind theme of sky DEFAULT #38bdf8 / sky.soft #bae6fd / sky.deep #0ea5e9 / sky.ink #0c4a6e, coral DEFAULT #fb7185 / coral.soft #fecdd3 / coral.deep #f43f5e / coral.ink #be123c, cloud #f0f9ff and slatey #475569, plus borderRadius tokens 4xl = 2.25rem and 5xl = 3rem, plus three named boxShadows: card (0 30px 80px -30px rgba(56,189,248,0.45), 0 10px 30px -20px rgba(15,23,42,0.22)), soft (0 12px 30px -12px rgba(2,132,199,0.35)) and pill (0 12px 24px -8px rgba(251,113,133,0.55)). sky-ink #0c4a6e carries headings + primary text + the footer band; sky #38bdf8 / sky-deep #0ea5e9 / a mid #0369a1 do the cool accents (logo gradient, input icons, hovers, one headline word); coral #fb7185 / coral-deep #f43f5e / coral-ink #be123c do the warm accents (the pulsing status dot, one headline word, the inline 'say hi on email' link underline, the bug-report chip, hearts); slatey #475569 carries body + labels + placeholders. The signature DECORATION is a hand-built CSS+SVG illustration panel inside a rounded-4xl bg-gradient-to-br from-cloud to-sky-soft/40 box: a coral gradient sun (from-coral to-coral-deep) in the top-right, two white cloud SVG puffs, a center row of three circular channel bubbles (a sky compass, a big sky-ink envelope ringed in white, a coral phone), a row of six rounded grass blades in alternating sky/coral, and a white horizon bar; the sun + clouds + bubbles all drift on float-a/float-b/float-c keyframe animations (translateY -9..-16px over 6-8s ease-in-out infinite). Form .field controls are rounded-2xl bg-cloud with a 2px border-sky-soft/70 and a slatey placeholder, that on :focus drop outline, turn the border sky #38bdf8, go bg-white and punch a soft 4px sky ring (box-shadow 0 0 0 4px rgba(56,189,248,0.18)), eased .2s. The primary button is a gradient bg-gradient-to-r from-[#0369a1] to-sky-ink rounded-2xl with shadow-soft that on :hover gains shadow-pill and lifts -translate-y-0.5. Topic chips are rounded-full pills (sky-soft/60 sky-ink, the coral one coral-soft coral-ink) that fill solid sky/coral with white text on hover. The sticky nav uses bg-cloud/80 backdrop-blur-md over a border-b border-sky-soft/60, and the nav CTA is a rounded-full bg-sky-ink pill ringed in coral/50 (ring-2). Type is Nunito only (Google Fonts, weights 400/600/700/800/900 + italic 700, mapped to fontFamily.sans), rendered -webkit-font-smoothing antialiased, leaning hard on the black 900 weight for the wordmark + headlines and extrabold/bold for nav, labels and chips. Corners are soft and bubbly throughout (rounded-2xl logo tile + inputs + button, rounded-4xl illustration panel + alt cards, rounded-5xl the main card, rounded-full pills + bubbles + status pill + chips). Mood: cheerful, approachable, hand-made, human and a little playful (the '2am idea', 'we don't bite', 'No spam, ever. We hate it too.'), never a cold corporate contact form.", "prompt": "Design a warm, playful, friendly LIGHT contact page for a maker brand on a soft sky-blue cloud canvas (cloud #f0f9ff) decorated with big blurred orbs (sky-soft #bae6fd at /40-/60 and coral-soft #fecdd3 at /50) and a faint .grain polka wash (radial-gradient rgba(56,189,248,0.16) 1px dots on a 22px grid). Register a friendly two-accent Tailwind theme over a deep sea-ink: sky DEFAULT #38bdf8 / sky.soft #bae6fd / sky.deep #0ea5e9 / sky.ink #0c4a6e, coral DEFAULT #fb7185 / coral.soft #fecdd3 / coral.deep #f43f5e / coral.ink #be123c, cloud #f0f9ff, slatey #475569, plus borderRadius 4xl = 2.25rem and 5xl = 3rem, and three boxShadows card (0 30px 80px -30px rgba(56,189,248,0.45), 0 10px 30px -20px rgba(15,23,42,0.22)), soft (0 12px 30px -12px rgba(2,132,199,0.35)) and pill (0 12px 24px -8px rgba(251,113,133,0.55)). Use Nunito only (Google Fonts, weights 400/600/700/800/900 + italic 700, mapped to fontFamily.sans, rendered antialiased) and inline hand-coded SVG icons. The whole point is WARMTH + a hand-made illustration: a left copy + illustration column beside a right multi-field form, all inside one giant rounded-5xl white card (shadow-card, ring-1 ring-sky-soft/70) that floats over the cloud background and is topped by a thin h-1.5 sky->cyan-300->coral gradient seam. Hand-build the illustration panel in CSS + SVG (no real imagery) inside a rounded-4xl bg-gradient-to-br from-cloud to-sky-soft/40 ring-1 ring-sky-soft/70 box: a coral gradient sun (from-coral to-coral-deep, opacity-90) top-right, two white cloud SVG puffs, a center row of three circular channel bubbles (a sky compass, a big w-24 h-24 sky-ink envelope ringed ring-4 ring-white, a coral phone), a row of six rounded grass blades in alternating sky/coral heights, and a white horizon bar; animate the sun, clouds and bubbles on float-a/float-b/float-c keyframes (translateY -9..-16px over 6-8s ease-in-out infinite, float-c also rotating 4deg). Use sky-ink #0c4a6e for headings + primary text + the footer; sky / sky-deep / a mid #0369a1 for cool accents (logo gradient, input icons, hovers, one headline word); coral / coral-deep / coral-ink for warm accents (the pulsing status dot, one headline word, the 'say hi on email' coral-underlined link, the bug-report chip, hearts); slatey #475569 for body + labels + placeholders. Style form .field controls as rounded-2xl bg-cloud with a 2px border-sky-soft/70 + a slatey placeholder, that on :focus drop outline, turn the border sky #38bdf8, go bg-white and add a soft 4px sky ring (box-shadow 0 0 0 4px rgba(56,189,248,0.18)), eased .2s; prefix the name + email inputs with an absolutely-positioned sky SVG icon (pl-12). Make the submit a gradient bg-gradient-to-r from-[#0369a1] to-sky-ink rounded-2xl shadow-soft button that on :hover gains shadow-pill and lifts -translate-y-0.5, with a trailing paper-plane glyph. Add a row of rounded-full topic chips (sky-soft/60 sky-ink, the bug one coral-soft coral-ink) that fill solid sky/coral white-text on hover. Make the sticky nav bg-cloud/80 backdrop-blur-md border-b border-sky-soft/60 with a rounded-full bg-sky-ink CTA ringed ring-2 ring-coral/50. Lean hard on Nunito black 900 for the wordmark + headlines and extrabold/bold for nav, labels and chips. Keep corners soft and bubbly (rounded-2xl inputs/button/logo tile, rounded-4xl panel/alt-cards, rounded-5xl main card, rounded-full pills/bubbles/chips). Mood: cheerful, approachable, hand-made, human and a little playful ('a half-baked idea at 2am', 'we don't bite', 'No spam, ever. We hate it too.'), never a cold corporate contact form. Zero em-dashes anywhere.", "fonts": "Nunito only (Google Fonts, family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700, mapped as Tailwind fontFamily.sans with fallbacks ui-sans-serif, system-ui, sans-serif, rendered -webkit-font-smoothing:antialiased), a rounded humanist sans used at its full weight range. The HERO DISPLAY HEADLINE is the anchor: font-black (900) tracking-tight leading-[1.05] at a responsive clamp text-[40px] -> sm:text-[52px], two-tone ('Let's chat about ' in sky-ink, 'anything' in #0369a1, 'you're building' in coral-deep). The contact-card sub-headline is font-black (900) tracking-tight leading-[1.08] text-[34px] -> sm:text-[42px] ('Say hello, we don't bite' on two lines via <br>). The 'Loop' wordmark is text-[22px] font-black (900) tracking-tight in the nav and text-[18px] font-black in the footer. Body + lead copy is font-semibold (600) text-[17px] in slatey (the hero sub max-w-xl and the card lead text-[17px] leading-relaxed max-w-md). Field LABELS are text-[13px] font-black (900) uppercase tracking-[0.12em] in slatey; input + textarea text is text-[16px] font-bold (700) sky-ink with a font-semibold slatey placeholder. Nav links are text-[15px] font-bold slatey (the active 'Contact' sky-ink); the 'Log in' link + nav CTA are text-[15px] font-extrabold (800). The status pill is text-[13px] font-extrabold sky-ink; topic chips are text-[13px] font-extrabold; trust chips are text-[14px] font-extrabold sky-ink; the submit button is text-[17px] font-black; the privacy line + footer copyright are text-[13px] font-bold/semibold slatey/sky-soft; alt-card titles are text-[17px] font-black sky-ink over text-[14px] font-semibold slatey detail. All UI runs in Nunito, no second family.", "palette": "cloud #f0f9ff (the page body background + the nav at /80 + the input fill + the illustration-panel gradient start), white #ffffff (the giant main contact card, the alt-contact cards, the focused field fill, the envelope-bubble ring, the horizon bar, the status pill). sky-ink #0c4a6e is the deep base (all headings, primary text, the envelope channel bubble, the nav CTA pill + its hover #08344d, the active nav link, the submit-gradient end, the footer band, the footer logo tile bg-white/10). The COOL accent ramp: sky #38bdf8 (the logo-tile gradient start, the input prefix icons, the grass blades, a chip-hover fill, the compass bubble), sky-soft #bae6fd (the orbs, all ring/border hairlines at /60-/70, the chips bg at /60, the trust-chip + alt-card icon tiles), sky-deep #0ea5e9 (the logo-gradient end, link hovers, the 'Fast replies' bolt icon), plus a mid #0369a1 (one headline word + the submit-gradient start). The WARM accent ramp: coral #fb7185 (the pulsing status dot + its animate-ping, a grass blade, the heart icons, the phone bubble, the 'say hi' link underline decoration), coral-soft #fecdd3 (the bug-report chip bg + the alt-card phone tile at /70), coral-deep #f43f5e (the sun gradient end, the 'you're building' headline word, link hovers), coral-ink #be123c (the inline 'say hi on email' link text + the bug-chip text). slatey #475569 carries body + lead + labels + placeholders + footer detail. The seam atop the card is a bg-gradient-to-r from-sky via-cyan-300 (#67e8f9) to-coral. The gradient orbs are sky-soft/40-/60 and coral-soft/50 blurred 3xl; the polka grain is rgba(56,189,248,0.16). It is a friendly, sunny two-accent light scheme: sky + coral over sea-ink on cloud-white, no dark mode, no muted greys beyond slatey."}, "layout_and_structure": {"description": "A full-bleed light contact page, content centered inside a mx-auto max-w-6xl px-6 (lg:px-8) container, stacked top to bottom as: (1) a sticky blurred cloud-tinted nav, (2) a full-bleed centered HERO band over a .grain polka wash + three blurred orbs, (3) THE CONTACT CARD section (the centerpiece), (4) a full-width row of three alt-contact cards, and (5) a full-bleed sky-ink footer. The defining structural move is THE CONTACT CARD: a single huge relative rounded-5xl bg-white shadow-card ring-1 ring-sky-soft/70 overflow-hidden card (pulled up -mt-1 to overlap the hero) topped by a h-1.5 w-full bg-gradient-to-r from-sky via-cyan-300 to-coral seam, whose body is a grid lg:grid-cols-2 gap-10 (lg:gap-16) p-8 (sm:p-12 lg:p-16) split into a LEFT copy + illustration column and a RIGHT form. The LEFT column (flex flex-col) stacks a font-black sub-headline ('Say hello, we don't bite'), a font-semibold lead with an inline coral-underlined 'say hi on email' link, a hand-built rounded-4xl illustration panel (pinned toward the bottom with lg:mt-auto), and a row of two trust chips. The RIGHT column is a flex flex-col gap-6 <form>: a Full name input (with a sky user-icon prefix), an Email input (with a sky envelope-icon prefix), a What's-on-your-mind textarea, a flex-wrap row of four topic chips, a full-width gradient submit button, and a centered lock-icon 'No spam, ever' privacy line. Below the card, a mt-8 grid sm:grid-cols-3 items-stretch gap-5 of three equal-height alt-contact cards (Email us / Live chat / Community), each a rounded-4xl bg-white p-6 ring-1 ring-sky-soft/70 shadow-soft card with a rounded-2xl icon tile, a font-black title and a slatey detail line, that lift -translate-y-1 on hover. Everything reflows to a single column below lg (the form drops below the copy/illustration column; the LEFT panel loses its mt-auto pin); the alt cards go 1-up below sm; the nav center links hide below md and the Log in link below sm; the trust chips + headline reflow cleanly; no horizontal overflow at 390px.", "prompts": [{"part": "Sticky blurred cloud nav", "prompt": "A sticky top-0 z-50 <header> with a bg-cloud/80 backdrop-blur-md fill and a border-b border-sky-soft/60 bottom hairline. Inner nav mx-auto flex h-[72px] max-w-6xl items-center justify-between px-6 (lg:px-8). LEFT: a logo link (flex items-center gap-2.5 group) = a grid h-10 w-10 place-items-center rounded-2xl bg-gradient-to-br from-sky to-sky-deep text-white shadow-soft tile holding an inline 'loop/infinity' SVG mark (a single stroke-2.4 round-cap path that draws a sideways figure-eight) which rotates 6deg on group-hover, beside a text-[22px] font-black tracking-tight text-sky-ink 'Loop' wordmark. CENTER (hidden below md, md:flex, gap-8, text-[15px] font-bold text-slatey): four links 'Features' / 'Templates' / 'Pricing' / 'Contact', the first three hover:text-sky-deep and the current 'Contact' set to full text-sky-ink. RIGHT (flex items-center gap-3): a 'Log in' text link (hidden below sm, text-[15px] font-extrabold text-sky-ink hover:text-sky-deep) and a 'Start free' primary pill (inline-flex items-center gap-1.5 rounded-full bg-sky-ink px-5 py-2.5 text-[15px] font-extrabold text-white shadow-pill ring-2 ring-coral/50 hover:bg-[#08344d] hover:-translate-y-0.5 transition-all) with a trailing arrow SVG."}, {"part": "Full-bleed hero band + orbs", "prompt": "A relative overflow-hidden .grain <section> (the polka wash) holding three pointer-events-none absolute blurred decorative ORBS: a -top-24 -left-24 h-80 w-80 rounded-full bg-sky-soft/60 blur-3xl, a -top-10 right-0 h-72 w-72 rounded-full bg-coral-soft/50 blur-3xl, and a bottom-0 left-1/3 h-96 w-96 rounded-full bg-sky-soft/40 blur-3xl. Over them, a relative mx-auto max-w-6xl px-6 (lg:px-8) pt-16 pb-7 text-center stack: first a STATUS PILL (inline-flex items-center gap-2 rounded-full bg-white px-4 py-1.5 text-[13px] font-extrabold text-sky-ink shadow-soft ring-1 ring-sky-soft) reading 'We usually reply within a few hours', led by a pulsing dot = a relative flex h-2 w-2 with an animate-ping absolute coral/75 ring over a solid coral dot. Then the HERO HEADLINE h1 (mt-6 text-[40px] font-black leading-[1.05] tracking-tight text-sky-ink sm:text-[52px]) reading 'Let's chat about ' + a text-[#0369a1] 'anything' + ' ' + a text-coral-deep 'you're building'. Then a mt-4 mx-auto max-w-xl text-[17px] font-semibold text-slatey SUB reading 'Questions, feedback, a half-baked idea at 2am. We're all ears.'"}, {"part": "Contact card shell + gradient seam", "prompt": "An <section id='contact' class='relative -mt-1 pb-24'> (pulled up 1px to kiss the hero). Inside the mx-auto max-w-6xl px-6 (lg:px-8) container, a single huge CARD: a relative rounded-5xl bg-white shadow-card ring-1 ring-sky-soft/70 overflow-hidden box. Its first child is a h-1.5 w-full bg-gradient-to-r from-sky via-cyan-300 to-coral SEAM stripe. Below the seam, the card body is a grid gap-10 p-8 (sm:p-12 lg:grid-cols-2 lg:gap-16 lg:p-16) that splits into the LEFT copy/illustration column and the RIGHT form."}, {"part": "Left column: copy + illustration panel", "prompt": "The LEFT cell is a flex flex-col. Top: a SUB-HEADLINE h2 (text-[34px] font-black leading-[1.08] tracking-tight text-sky-ink sm:text-[42px]) reading 'Say hello,' + <br> + 'we don't bite'. Then a mt-4 max-w-md text-[17px] font-semibold leading-relaxed text-slatey LEAD: 'Stuck on a design? Got a wild idea? Just want to nerd out about UI? Drop us a line, or ' + an inline coral-ink 'say hi on email' link (font-extrabold underline decoration-coral decoration-2 underline-offset-4 hover:text-coral-deep) + ' instead. Real humans, promise.' Then, pinned toward the bottom with mt-8 (lg:mt-auto), the ILLUSTRATION PANEL: a relative rounded-4xl bg-gradient-to-br from-cloud to-sky-soft/40 ring-1 ring-sky-soft/70 px-7 pt-7 pb-6 overflow-hidden box hand-built from CSS + SVG: (a) a coral SUN = an absolute top-5 right-6 h-14 w-14 rounded-full bg-gradient-to-br from-coral to-coral-deep opacity-90 .float-a; (b) two white cloud SVG puffs (.float-b, .float-c) at low opacity; (c) a center flex items-end justify-center gap-4 row of three CHANNEL BUBBLES, each a grid place-items-center rounded-full shadow: a w-16 h-16 bg-sky text-white compass bubble (.float-c, -translate-y-3), a big w-24 h-24 bg-sky-ink text-white envelope bubble ringed ring-4 ring-white (.float-a), and a w-16 h-16 bg-coral text-white phone bubble (.float-b, -translate-y-3); (d) a flex items-end justify-center gap-1.5 row of six rounded-full GRASS blades in alternating sky/coral at heights h-5..h-10; (e) a mt-2 h-2 rounded-full bg-white/70 HORIZON bar. Animate the sun, clouds and bubbles via .float-a/.float-b/.float-c keyframes (translateY -9..-16px over 6/7/8s ease-in-out infinite, float-c also rotating 4deg)."}, {"part": "Left column: trust chips", "prompt": "Below the illustration panel, a mt-6 flex flex-wrap gap-x-6 gap-y-3 text-[14px] font-extrabold text-sky-ink row of two TRUST CHIPS, each an inline-flex items-center gap-2: chip 1 = a coral heart SVG (text-coral, fill currentColor) + 'Loved by 57k makers'; chip 2 = a sky-deep lightning-bolt SVG (text-sky-deep, fill currentColor) + 'Fast, friendly replies'."}, {"part": "Right column: form field stack", "prompt": "The RIGHT cell is a <form class='flex flex-col gap-6'> with three field GROUPS. Each group = a block text-[13px] font-black uppercase tracking-[0.12em] text-slatey mb-2 LABEL over a relative wrapper. Group 1 (Full name): an absolute left-4 top-1/2 -translate-y-1/2 sky USER SVG icon over a text input (.field w-full rounded-2xl bg-cloud border-2 border-sky-soft/70 pl-12 pr-4 py-4 text-[16px] font-bold text-sky-ink placeholder:text-slatey placeholder:font-semibold, placeholder 'Sky Walker'). Group 2 (Email): same pattern with a sky ENVELOPE SVG prefix and an email input (placeholder 'hello@you.com'). Group 3 (What's on your…

---
"Loop · Say hello, we don't bite (friendly illustrated sky)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Loop · Say hello, we don't bite (friendly illustrated sky). \"Loop · Say hello, we don't bite (friendly illustrated sky)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-loop-say-hello-we-dont-bite-friendly-illustrated-sky",
      "license": "CC0-1.0",
      "attribution": "\"Loop · Say hello, we don't bite (friendly illustrated sky)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f0f9ff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0c4a6e"
    },
    "card": {
      "$type": "color",
      "$value": "#f0f9ff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0c4a6e"
    },
    "primary": {
      "$type": "color",
      "$value": "#f0f9ff"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#38bdf8"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0c4a6e"
    },
    "accent": {
      "$type": "color",
      "$value": "#38bdf8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e2eaf0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6189a1"
    },
    "border": {
      "$type": "color",
      "$value": "#ced6db"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f0f9ff"
    }
  },
  "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 */
/* "Loop · Say hello, we don't bite (friendly illustrated sky)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520. */
:root {
  --background: #f0f9ff;
  --foreground: #0c4a6e;
  --card: #f0f9ff;
  --card-foreground: #0c4a6e;
  --primary: #f0f9ff;
  --primary-foreground: #1c1917;
  --secondary: #38bdf8;
  --secondary-foreground: #0c4a6e;
  --accent: #38bdf8;
  --accent-foreground: #fafaf9;
  --muted: #e2eaf0;
  --muted-foreground: #6189a1;
  --border: #ced6db;
  --destructive: #dc2626;
  --ring: #f0f9ff;
  --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 */
/* "Loop · Say hello, we don't bite (friendly illustrated sky)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520. */
/** Tailwind theme extend for Loop · Say hello, we don't bite (friendly illustrated sky) (superdesign-loop-say-hello-we-dont-bite-friendly-illustrated-sky) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f0f9ff",
        "foreground": "#0c4a6e",
        "card": "#f0f9ff",
        "primary": "#f0f9ff",
        "primary-foreground": "#1c1917",
        "secondary": "#38bdf8",
        "accent": "#38bdf8",
        "muted": "#e2eaf0",
        "border": "#ced6db",
        "destructive": "#dc2626",
        "ring": "#f0f9ff"
      },
      "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 */
/* "Loop · Say hello, we don't bite (friendly illustrated sky)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loop-say-hello-we-dont-bite-friendly-illustrated-sky @ 6c6090694520. */
@layer base {
:root {
  --background: #f0f9ff;
  --foreground: #0c4a6e;
  --card: #f0f9ff;
  --card-foreground: #0c4a6e;
  --primary: #f0f9ff;
  --primary-foreground: #1c1917;
  --secondary: #38bdf8;
  --secondary-foreground: #0c4a6e;
  --accent: #38bdf8;
  --accent-foreground: #fafaf9;
  --muted: #e2eaf0;
  --muted-foreground: #6189a1;
  --border: #ced6db;
  --destructive: #dc2626;
  --ring: #f0f9ff;
  --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);
}
}