Let's build your next interface — Cobalt Contact

Summary

A warm, full-bleed contact page for an AI product-design tool (Lumen / Superdesign), built on the classic single-centered-card pattern: the whole page is one white sheet with a soft cobalt glow up top, and a centered card holds the message form. The page opens with a sticky translucent nav, then a centered eyebrow + headline ('Let's build your next interface.') with a three-item trust line, then ONE centered white card carrying a top cobalt gradient hairline and a 'Send us a message' header strip over a form: a first/last name row, a work-email + team-size select row, a 'What are you working on?' textarea, a topic chip row, a full-width cobalt 'Send message' CTA and a reassurance line. Below the card a labelled divider ('Other ways to reach us') leads into a three-up row of hoverable info cards (Help center / Community / Developer API), and a slim footer closes the page. The mood is clean, confident and reassuring: a single cobalt accent on a near-white slate canvas, Inter type, soft layered shadows, a faint dot-grain texture and a cobalt glow behind the hero.

Style

Clean, modern SaaS contact aesthetic on a near-white slate canvas (#f8fafc) with near-black slate-ink text (#0f172a). The single accent family is a cobalt ramp (cobalt #2563eb / cobalt-dark #1d4ed8 / cobalt-soft #eff4ff / cobalt-ring #bfdbfe) plus a neutral slate scale (slate2 #475569 for nav/labels, muted #64748b for body, line #e2e8f0 for borders, placeholder #94a3b8). Type is Inter (weights 400/450/500/600/700/800) via Google Fonts with a tight -0.011em body letter-spacing and antialiased rendering: the hero H1 is font-extrabold (800) ~42px (52px on sm+) with tight tracking and leading 1.04, card headings font-bold (700) ~17px, field labels font-semibold (600) 13.5px, body muted ~15-17px. Radii are generous: rounded-2xl (16px) on the main card and the info cards, rounded-xl (12px) inputs/buttons/icon-tiles, rounded-lg (8px) logo tiles and the 'Start free' pill, rounded-full chips/pills. Depth is soft and layered: a 'card' shadow (0 1px 2px rgba(15,23,42,0.04), 0 12px 32px -12px rgba(15,23,42,0.12)) on the main card, a 'btn' cobalt glow (0 8px 20px -6px rgba(37,99,235,0.55)) on the CTA and logo tile, a 'nav' hairline shadow (0 1px 0 rgba(15,23,42,0.05)) on the sticky header, and soft shadows on the chips and info cards. Texture: a '.grain' dot layer (radial-gradient circle at 1px 1px rgba(15,23,42,0.045) on a 22px cell) over the main, and a soft cobalt glow (a 420px gradient from cobalt-soft/70 to transparent) up top. Inputs are canvas-fill (#f8fafc) with a 1px line (#e2e8f0) border that on focus turns cobalt #2563eb with a 4px rgba(37,99,235,0.14) ring and a white fill. Micro-interactions: a CTA that lifts 1px on hover (and settles on press), info cards that lift 3px with a cobalt-ring (#c7d2fe) border + a deeper shadow on hover, nav links with a grow-on-hover 2px cobalt underline, and the 'Start free' pill that flips ink->cobalt on hover. Icons are Iconify Phosphor (ph:*). Mood: clean, confident, friendly, reassuring, premium-but-approachable.

Layout & Structure

A full-bleed one-screen contact page on a slate-canvas (#f8fafc) ground: a slim sticky translucent nav on top; a hero/contact main (with a faint dot-grain texture and a top cobalt glow) holding a centered eyebrow + headline + sub-line + trust line, then ONE centered white card form; a labelled 'Other ways to reach us' divider; a three-up row of hoverable info cards; and a slim footer. The defining structural moves are the single centered card with a cobalt gradient top-hairline and a header strip, the focus-reactive canvas inputs + the topic chip row, and the three hover-lift info cards under a labelled divider.

Sticky translucent nav

Hero ground + eyebrow + headline + trust line

Centered card shell + header strip

Form body

Labelled divider

Info card trio

Footer

Special Notes

Keep the single-accent cobalt-on-canvas system: a near-white slate canvas (#f8fafc) page with near-black slate-ink text (#0f172a), one cobalt accent ramp (cobalt #2563eb brand, cobalt-dark #1d4ed8 hover, cobalt-soft #eff4ff tint, cobalt-ring #bfdbfe ring) and a neutral slate scale for body/borders (slate2 #475569, muted #64748b, line #e2e8f0, #94a3b8 placeholders); no second hue. Use Inter throughout (weights 400-800) with a tight -0.011em body letter-spacing: the hero H1 is font-extrabold ~42px (52px sm+) tight-tracked leading-[1.04], card headings font-bold ~17px, labels font-semibold 13.5px, body muted ~15-17px. Radii are generous: rounded-2xl (16px) main card + info cards, rounded-xl (12px) inputs/buttons/icon-tiles, rounded-lg (8px) logo tiles + the 'Start free' pill, rounded-full chips/pills. Depth is soft and layered: the 'card' shadow (0 1px 2px rgba(15,23,42,0.04) + 0 12px 32px -12px rgba(15,23,42,0.12)) on the main card, a 'btn' cobalt glow (0 8px 20px -6px rgba(37,99,235,0.55)) on the CTA and logo tile, and a 'nav' hairline shadow on the sticky header. The signature is the SINGLE centered card: ONE white max-w-[660px] card with a cobalt gradient top-hairline and a 'Send us a message' header strip over a form (a first/last name row, a work-email + team-size select row, a 'What are you working on?' textarea, a topic chip row, the cobalt 'Send message' CTA and a reassurance line), backed by focus-reactive canvas inputs that turn cobalt on focus (4px cobalt/14 ring + white fill). Below the card, a labelled 'Other ways to reach us' divider leads into three hover-lift info cards (Help center / Community / Developer API), each lifting 3px with a cobalt-ring border on hover. Add ambient texture: a faint '.grain' dot layer over the page plus a soft 420px cobalt glow behind the top of the hero. Micro-interactions: the CTA lifts on hover, info cards lift with a cobalt-ring border + deeper shadow, nav links grow a cobalt underline on hover, and the ink 'Start free' pill flips to cobalt on hover. Top it with a sticky translucent (canvas/85 + backdrop-blur) nav (a cobalt ph:sparkle-fill logo tile + a 'Lumen' wordmark, Library/Canvas/Pricing/Contact links with 'Contact' active in cobalt, a 'Sign in' link + an ink rounded-lg 'Start free' pill) and close with a slim footer ('Lumen - design at the speed of prompt.', Privacy / Terms / Status links). Everything must reflow cleanly: the name fields and the work-email/team-size fields go single-column below sm and 2-col on sm+, the info-card trio goes 1-col / 2-col (sm) / 3-col (lg), the nav center links hide below md and 'Sign in' below sm, and there is no horizontal overflow at 390px. Copy is warm, human and reassuring with zero em-dashes. Use Iconify Phosphor icons (ph:*).