Take the glass with you.

Build me a complete, responsive business website in the GLASSMORPHISM style: frosted translucent panes floating over blooms of colored light. The soul of the style is luminous depth — every key surface is a pane of glass you look through, lit from behind; hierarchy is physical (the more important, the closer, clearer, and brighter-edged). It should feel premium, calm, and lit from within. Combine this style seed with my brief below. If I don't give you details, invent a plausible business that suits this lit-from-within look — a fintech product, an AI note-taking tool, a music service, a device launch — and build the full, real demo for it, not a placeholder. This style is a FAMILY, not one template. A few dimensions are yours to choose — pick one of each that fits my brand and COMMIT to it everywhere: • PALETTE FAMILY — either a dark aurora (near-black violet/navy ground with 2–4 saturated light blooms glowing behind the glass) or a light pastel wash (lavender/pink/blue field with whiter, milkier glass and dark ink text). Bring my brand hues if I give them; keep saturation in the light layer, never in the text layer. Example fields (not required): violet+cyan on ink; magenta+blue on ink; pink+baby-blue pastel on white. • LIGHT FIELD COMPOSITION — corner blooms, one central beam, scattered small glows, or a single aurora band. Choose one and commit. • LAYOUT ARCHETYPE — a centered column of glass panes; an asymmetric hero pane with a rigid stack of glass chips; a bento grid of panes at varied sizes; or a full-bleed scene with one dominant floating pane. Choose one and commit. • TYPE — one modern geometric or grotesque sans for display (generous size, light-to-medium weight, tight tracking) plus a quiet sans for body. Any faces in that class (e.g. Sora, Space Grotesk, Manrope, Outfit — examples, not requirements), loaded via Google Fonts. INVARIANTS — break one and it stops being glassmorphism: • Key surfaces are translucent panes with a real backdrop blur (backdrop-filter: blur ~16–24px); they borrow color from the light behind them and are never opaque flat cards. • The background always contains visible light for the blur to eat — blooms, gradients, glowing color. Glass over a flat empty ground is dead; equally, the field quiets down directly behind body text. • Every pane carries a thin light edge (≈1px translucent white) and a soft, long lift shadow; corners rounded in one consistent family (12–28px). • Text stays sharp, opaque, and high-contrast on top of the glass — never blurred, never translucent, never placed on a loud bloom without a pane beneath it. • One bright accent color only (drawn from the light field) reserved for primary actions. • Motion is the soft luminous entrance: opacity + a small rise + a glow or blur resolving, slow ease-out (600–900ms), gentle stagger. Roughly one entrance plus one hover/ambient effect per section — never stacks of loud effects. Honor prefers-reduced-motion and keep all content visible without JavaScript. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body and ≥3:1 for large text, measured against the LIGHTEST light the text can sit over. Where a pane crosses a bright bloom, deepen the pane's fill or add a scrim so the text still clears AA. Never light-on-light. MEDIA MODEL: build most visuals from coded glass, gradients, and light. Product screens, dashboards, or app UI belong INSIDE a glass frame as real images; abstract glowing 3D orbs or renders may float behind panes as accents. Where the business needs photography, place it behind or within glass so it reads through the frost. Generate imagery appropriate to MY business — never reuse a demo's. WHAT THIS SITE MUST ACHIEVE (business goal): make it instantly clear who this business helps and what it offers; build trust with real proof (metrics, credentials, integrations, client names — whatever is true); and drive one clear next step. Let my business and brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete usable site, not a hero mock: • Real information architecture driven by MY goal, with working navigation and a footer, both rendered as glass. • Every section carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full glass treatment — the same light field runs the whole page, not just the hero. • Real, tailored copy for MY business — confident, precise, never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the AA contrast invariant enforced on every pane. On mobile keep the frost and the light; simplify the motion if performance demands it.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing website into GLASSMORPHISM — frosted translucent panes floating over blooms of colored light — WITHOUT changing my content, information architecture, or functionality. Keep my copy, my pages, my sections, my images, and my links exactly as they are; change only the visual system. Apply this style system to what I already have: • Ground: choose the family that suits my brand — a dark aurora ground (near-black violet/navy with 2–4 large, saturated light blooms glowing behind content) or a light pastel wash (lavender/pink/blue field with milkier glass and dark ink text) — and commit to it on every page. The light quiets down directly behind body text. • Surfaces: convert my cards, panels, navs, and modals into glass panes — semi-transparent fills (white at roughly 8–18% alpha on dark; higher and milkier on light), real backdrop blur (~16–24px), a thin ≈1px translucent white edge, a soft long lift shadow, and one consistent rounded-corner family (12–28px). Remove hard opaque borders and boxed flat fills. • Text: keep it sharp, opaque, and high-contrast on top of the glass — never blurred, never translucent. WCAG 2.2 AA is non-negotiable: ≥4.5:1 body, ≥3:1 large, measured against the lightest light each text block can sit over; deepen a pane's fill or add a scrim wherever a bloom would push contrast below AA. • Accent: exactly one bright accent color drawn from the light field, used for primary actions and links only. • Media: place my existing images and screenshots inside glass frames (edge light + lift) rather than bare; let blooms pass behind them. • Motion: replace any harsh or bouncy animation with the soft luminous entrance — opacity + a small rise + a glow or blur resolving, slow ease-out, gentle stagger; roughly one entrance plus one hover detail per section. Honor prefers-reduced-motion and never leave content invisible without JavaScript. Depth is the point: the more important an element, the closer, clearer, and brighter-edged it should feel. Apply the system to EVERY page and section — navigation, footer, and forms included — not just the hero.

Paste alongside your existing site/code for an AI coding agent to apply

Build me ONE complete section of a website in the GLASSMORPHISM style — frosted translucent panes floating over blooms of colored light. I'll name the section and its job below (a hero, a pricing table, a signup card, a feature band — anything); if I don't, build a hero for a plausible product this style suits and give it real copy. Rules for the section: • Ground it in visible light: a near-black violet/navy field (or a pastel wash, if that fits my brand) with one or two large, saturated light blooms placed behind the glass — never a flat empty background. The light quiets directly behind body text. • The section's key surface is a real glass pane: semi-transparent fill (white ~8–18% alpha on dark), backdrop-filter blur of 16–24px, a thin ≈1px translucent white edge, a soft long lift shadow, rounded corners (12–28px). • Text stays sharp, opaque, and high-contrast on the pane — never blurred, never translucent — and every text/background pair clears WCAG 2.2 AA (≥4.5:1 body, ≥3:1 large) against the lightest area it can overlap. • One bright accent color, drawn from the light field, for the primary action only. • Motion: one soft luminous entrance (opacity + small rise + a glow resolving, slow ease-out) and at most one hover detail. Honor prefers-reduced-motion; content must be visible without JavaScript. • Fill the section with real, purposeful content for its job — actual headline, supporting copy, and action — never lorem, never a bare box. Deliver it as clean standalone HTML/CSS (or the framework I'm using if I say so), responsive from mobile up.

Good for a focused first pass, or a chat assistant like ChatGPT/Claude