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

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.

Layout & Structure

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).

Floating glass sticky nav

Hero (centered, pastel)

Fanned floating glass cards

Trust logo strip

Bento work grid

Glass services panel

Testimonials / clients row

Closing contact CTA

Footer (glass-divided)

Components

Frosted-glass surface system (.glass / .glass-deep)

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.

Pastel mesh-gradient canvas (.mesh / .mesh-band)

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.

Fanned, overlapping translucent UI cards (hero)

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.

Dark accent card on glass (.btn-dark / near-black ink #15161b)

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 visual hierarchy.

Special Notes

Frameless, fully responsive light glassmorphism agency homepage (no browser chrome / device frame around the page itself; the only 'browser' is the decorative center hero mock card): every section centers in mx-auto max-w-6xl with px-5 and the nav floats as a rounded-full glass bar inset by px-5 pt-4. Built with Tailwind via CDN plus a small tailwind.config registering the exact custom colors (ink #15161b, slate2 #5c606e, peach #ffd8c2, sky #cfe3ff, mint #d3f5e3), the Inter font family, and letterSpacing.tightest -0.045em; Google Fonts loads Inter 400-900; icons are Iconify Phosphor (ph:) fill glyphs. Reflow: the nav center links hide below md; the hero <br> drops below sm; the floating-card band is h-300/sm:380/md:440 and the side cards shift to 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; services + testimonials are grid-cols-1 -> md:grid-cols-3; the footer is flex-col -> md:flex-row with a 2 -> sm:3 col link grid; body has overflow-x-hidden so nothing scrolls sideways on mobile. All copy and the 'Prism' brand are placeholders meant to be swapped: the transferable value is the soft-pastel glassmorphism SYSTEM (a #fbfcff mesh-gradient canvas blooming peach #ffd8c2 / sky #cfe3ff / mint #d3f5e3, frosted .glass rgba(255,255,255,0.55)+blur(22px) and .glass-deep rgba(255,255,255,0.42)+blur(28px) surfaces with 1px white borders, soft colored drop-shadows, faint grain, and near-black #15161b ink as the single accent on CTAs/stat/feature cards) plus the full agency-site LAYOUT (floating pill glass nav -> centered black-on-pastel hero over fanned translucent UI cards -> faded logo strip -> frosted bento work grid with a dark stat tile -> big glass services panel with a dark featured card -> three-up testimonial row with a dark feature quote -> frosted closing CTA -> glass-divided footer), NOT the specific studio. Keep the palette light and pastel; the ONLY dark surface is the #15161b ink used sparingly for contrast.