Say Hello Through Glass — Aurora Contact

Summary

A dark, glassmorphism contact page for a friendly design tool (Aurelia), built on a single moody 'aurora' aesthetic: a near-black ink canvas (#0b0f14) lit by drifting aqua/magenta aurora blobs behind frosted-glass panels. The page opens with a sticky translucent nav, then a centered eyebrow + gradient headline ('Say hello through glass') with a sub-line, then a two-column hero: a large frosted-glass contact card on the left (a 'Get in touch' header, a name/email row, a subject field with a tag icon, a message textarea, an intent chip row, a gradient 'Send message' CTA and a reassurance line) and a narrower right column of two soft-glass cards (an 'Other ways to reach us' contact list and a customer quote). Below the hero, a hairline trust strip of logos, a three-up feature grid ('Why the glass form'), a glass CTA banner and a slim footer close the page. The signature is the frosted-glass-over-aurora treatment: blurred aqua/magenta/sky blobs drifting behind translucent cards, inputs that glow aqua (or magenta) on focus, and an aqua-to-magenta gradient on the headline and primary button. The mood is premium, atmospheric, calm and a little magical.

Style

Dark glassmorphism / 'aurora' aesthetic on a near-black ink canvas (#0b0f14) with soft off-white text (#e6edf3). The accent system is a two-stop aqua->magenta gradient: aqua #2dd4bf (teal/cyan) and magenta #e879f9 (orchid/pink), with a sky #38bdf8 mid-tone used only in the ambient blobs. Behind everything, an 'aurora' field of large blurred radial blobs slowly drifts: a 680px aqua blob top-left, a 740px magenta blob bottom-right, a 620px sky (#38bdf8) blob mid-page and a 560x360 aqua->magenta ellipse glow directly behind the form, all heavily blurred (filter blur 70-96px) at ~0.5-0.9 opacity, plus a faint SVG fractal-noise 'grain' layer (opacity 0.04) and a radial 'vignette' that darkens the edges to ink/0.78. The frosted-glass panels are the core material: a primary '.glass' card is a 155deg linear gradient from rgba(255,255,255,0.07) to 0.02 with backdrop-filter blur(22px) saturate(140%), a 1px rgba(255,255,255,0.12) border and a layered shadow (0 30px 80px -20px rgba(0,0,0,0.6) plus an inset 0 1px 0 rgba(255,255,255,0.14)); a lighter '.glass-soft' is rgba(255,255,255,0.04) with blur(14px) and a 1px rgba(255,255,255,0.09) border; the sticky '.nav-glass' is rgba(11,15,20,0.6) with blur(16px) and a 1px rgba(255,255,255,0.07) bottom border. Type pairs Inter (sans/body) with Space Grotesk (display/headings) via Google Fonts: the hero H1 is Space Grotesk font-bold ~48px (60px on md+) tight-tracked leading-[1.05] with an aqua->sky->magenta '.gradient-text' clip on 'through glass'; section H2s are Space Grotesk bold ~30-36px; card titles are Space Grotesk semibold; field labels are tiny uppercase 'kicker' labels with 0.28em letter-spacing in white/55; body copy is Inter in white/50-70 at ~14-18px. Radii are generous: rounded-3xl (24px) on the glass cards/CTA banner, rounded-2xl (16px) on the feature cards, rounded-xl (12px) inputs/buttons/icon-tiles, rounded-lg (8px) logo tiles + the 'Start free' pill, rounded-full chips/pills/dots. Inputs ('.field') are translucent (rgba(255,255,255,0.04)) with a 1px rgba(255,255,255,0.12) border and white/42 placeholders; on focus they glow aqua (border rgba(45,212,191,0.6) + a 1px aqua ring + a 26px aqua bloom + a faint aqua fill), and '.field.alt' fields glow magenta instead. The primary '.btn-glow' is a 100deg aqua->magenta gradient with ink (#0b0f14) text and a dual aqua+magenta drop shadow, lifting 2px and brightening on hover. Micro-interactions: drifting aurora blobs (drift1/2/3 keyframes, 18-26s), focus-glow inputs, the lift-and-brighten CTA, hover-lighten glass-soft feature cards and nav links that fade from white/60 to white. Icons are Iconify Phosphor (ph:* duotone/fill). Mood: premium, atmospheric, dark, calm, a little magical.

Layout & Structure

A full-bleed dark one-screen contact page on an ink canvas (#0b0f14) lit by a drifting aurora field: a slim sticky translucent nav on top; a hero/contact <header id='contact'> holding the aurora blob field + grain + vignette behind a centered eyebrow + gradient headline + sub-line, then a two-column block (a large frosted-glass contact-form card on the left, a narrower right column of two soft-glass cards: a contact-methods list and a customer quote); a hairline logo trust strip; a three-up 'Why the glass form' feature grid; a glass CTA banner; and a slim footer. The defining structural moves are the aurora-blobs-behind-glass treatment, the asymmetric 1.15fr / 0.85fr two-column hero (form + side cards), the focus-glow inputs alternating aqua/magenta, and the aqua->magenta gradient on the headline and primary CTA.

Sticky translucent nav

Aurora field + grain + vignette (hero background)

Hero heading block

Two-column hero: glass form card + side cards

Logo trust strip

Feature grid ('Why the glass form')

Glass CTA banner

Footer

Special Notes

Keep the dark glassmorphism 'aurora' system: a near-black ink canvas (#0b0f14) with soft off-white text (#e6edf3), a TWO-stop aqua->magenta accent (aqua #2dd4bf + magenta #e879f9; sky #38bdf8 lives only in the ambient blobs) and frosted glass as the core material. The ambient light source is the aurora field: four large blurred radial blobs (a 680px aqua top-left, a 740px magenta bottom-right, a 620px sky mid-page and a 560x360 aqua->magenta ellipse directly behind the form) drifting slowly (18-26s loops) at 0.5-0.9 opacity with 70-96px blur, under a faint SVG fractal-noise grain (opacity 0.04) and a radial vignette darkening the edges to ink/0.78. Use three glass materials: a primary '.glass' (a 155deg rgba(255,255,255,0.07->0.02) gradient, backdrop-filter blur(22px) saturate(140%), a 1px rgba(255,255,255,0.12) border, a layered 0 30px 80px -20px rgba(0,0,0,0.6) + inset 0 1px 0 rgba(255,255,255,0.14) shadow) for the form card + CTA banner; a lighter '.glass-soft' (rgba(255,255,255,0.04) + blur(14px) + a 1px rgba(255,255,255,0.09) border) for the side/feature cards + pills; and a sticky '.nav-glass' (rgba(11,15,20,0.6) + blur(16px)). Pair Inter (body/UI) with Space Grotesk (display headings, card titles, the primary button label) via Google Fonts: a Space Grotesk font-bold hero H1 ~48px (60px md+) tight-tracked leading-[1.05] with an aqua->sky->magenta '.gradient-text' clip on the highlight words, Space Grotesk bold section H2s, semibold card titles, tiny UPPERCASE 'kicker' labels (0.28em letter-spacing) on fields/eyebrows, and Inter white/50-70 body. Radii are generous: rounded-3xl (24px) glass cards + CTA banner, rounded-2xl (16px) feature cards, rounded-xl (12px) inputs/buttons/icon-tiles, rounded-lg (8px) logo tiles + the 'Start free' pill, rounded-full chips/pills/dots. The signature is the two-column hero: a large frosted-glass contact-form card (asymmetric lg:grid-cols-[1.15fr_0.85fr]) with focus-glow inputs that ALTERNATE aqua/magenta (a '.field' glows aqua on focus, a '.field.alt' glows magenta -- border rgba(accent,0.6) + a 1px ring + a 26px bloom + a faint fill), an intent chip row and an aqua->magenta gradient '.btn-glow' CTA in ink text that lifts 2px and brightens on hover, beside a narrower right column of two '.glass-soft' cards (a tinted-icon-tile contact list + a customer quote with a gradient avatar). Frame it with a sticky translucent '.nav-glass' (a gradient diamond logo tile + an 'Aurelia' wordmark, Product/Templates/Pricing/Docs links, a 'Sign in' link + a glass 'Start free' pill) and follow the hero with a hairline logo trust strip, a three-up 'Why the glass form' feature grid (tinted-icon-tile glass-soft cards), a '.glass' CTA banner (two corner radial glows + a gradient 'Use this template' + a glass 'See it live') and a slim footer (a gradient logo + social icon links). Everything must reflow cleanly: the two-column hero collapses to one column below lg (the form stacks over the side cards), the name/email row goes single-column below sm, the feature grid goes 1-col / 3-col (md), the nav center links hide below md and 'Sign in' below sm, the CTA buttons stack below sm, and there is no horizontal overflow at 390px. Copy is warm, human and reassuring with zero em-dashes ('Say hello through glass', 'Ship a contact experience that feels designed, not bolted on.', 'No captcha. Spam filtered quietly, every message read by a human.'). Use Iconify Phosphor icons (ph:diamonds-four-fill, ph:paper-plane-tilt-duotone, ph:tag, ph:arrow-right-bold, ph:envelope-simple, ph:chat-circle-dots, ph:map-pin-line, ph:quotes-fill, ph:sparkle, ph:lightning, ph:shield-check, ph:twitter-logo, ph:github-logo, ph:dribbble-logo).