Lumen Atlas — Cinematic Websites That Feel Inevitable

Summary

A cinematic, dark-mode agency / design-studio website built on a deep-plum to warm-ember sunset gradient. A glassy sticky nav sits above a full-bleed hero (a pill 'studio' chip, a huge Space Grotesk display headline with an ember-to-violet gradient-clipped word, a lead paragraph beside a 'Book a studio call' ember pill + a circular 'Watch the reel' play button, a 16:7 showreel video panel, and a 4-up stats strip), followed by a selected-work showcase (a 2-col masonry of big rounded image cards with bottom gradient scrims, hover zoom and an ember arrow chip), an auto-scrolling award/recognition marquee on a plum panel, a 3-column capabilities card grid, a two-up studio/process strip (copy beside a 3-step numbered grid), a dramatic centered sunset-wash contact CTA, and a 4-column dark footer. The signature is the cinematic sunset palette (ink #0a0a0f / #0e0d16 surfaces, plum #3b1d5e, ember #ff7a3d, cream #f4efe9 text), the ember-to-violet gradient-clipped display type, the layered radial sun-bloom glows + SVG film grain, and the gradient-scrim imagery cards. Built with generated layered-gradient 'photography' (no external image assets) so it stays self-contained.

Style

A premium, cinematic dark-mode aesthetic that reads like an award-shortlisted (Awwwards/FWA) agency site. The whole page lives on near-black surfaces (page ink #0a0a0f, panels ink2 #0e0d16) lit by a deep-plum (#3b1d5e) to warm-ember (#ff7a3d) sunset wash: a multi-stop radial+linear gradient that pools plum top-left and ember top-right / bottom over the hero and the closing CTA, with big blurred radial 'sun bloom' orbs floating behind. Cream #f4efe9 is the warm off-white text (never pure white), stepped down via opacity (cream/72 lead, cream/65 body, cream/55 captions, cream/45 micro). The single chromatic accent is ember #ff7a3d (CTA pills, eyebrows, icon glyphs, dot bullets, the gradient-clipped display word that runs ember -> coral -> violet -> indigo). Depth and texture come from craft, not extra color: a fine SVG fractal-noise film grain (overlay blend) on the hero/CTA/imagery, hairline borders at rgba(244,239,233,0.10), translucent 'chip' surfaces, gradient scrims over imagery, and a 1px gap-grid that fakes hairline dividers between stat/process cells. Two-typeface system: Space Grotesk (display, 700/600, tight tracking) for every heading and eyebrow, Inter (body, 400-600) for paragraphs and UI. The mood is confident, filmic, nocturnal.

Layout & Structure

A single-column, vertically stacked, frameless responsive marketing site (no browser chrome / no device frame). Almost every section centers inside mx-auto max-w-[1280px] with px-6 -> lg:px-10. Order top to bottom: a fixed glassy nav; a full-bleed .sunset-wash hero (chip row, giant display headline, lead + CTA row, a 16:7 showreel video panel with a play button, and a 2->4-col stats strip); a selected-work showcase (a md:grid-cols-2 set of rounded image cards: two full-width feature cards spanning both columns and two half-width cards, each a generated-gradient image with a bottom from-ink scrim, an uppercase project meta line, a display title, and an ember-on-hover circular arrow); an auto-scrolling recognition marquee on a .panel-plum band with edge fade masks; a capabilities grid (sm:grid-cols-2 lg:grid-cols-3 of six icon-chip cards); a studio/process strip (lg:grid-cols-[0.9fr_1.1fr]: left copy + ghost button, right a sm:grid-cols-3 numbered 01/02/03 process grid with hairline gaps); a dramatic centered .sunset-wash contact CTA (status chip, huge display headline, subline, email pill + book-a-call ghost button); and a 4-column footer (md:grid-cols-[1.4fr_1fr_1fr_1fr]: brand + social, two link columns, a studios/location column) with a hairline bottom legal row. Reflow: nav links hide below lg (the 'Start a project' pill stays); the hero stats strip is grid-cols-2 -> sm:grid-cols-4; the work feature cards keep md:col-span-2 while the two middle cards are half-width on md+; capabilities 1 -> 2 -> 3 cols; the studio strip stacks below lg and the process grid is 1 -> sm:3; the footer stacks to 1 col on mobile; CTA buttons stack on mobile.

Sticky glass nav

Hero (full-bleed cinematic)

Hero showreel panel + stats strip

Selected work showcase

Recognition marquee (auto-scroll)

Capabilities grid

Studio / process strip

Closing contact CTA

Footer (4-column)

Components

Sunset-wash atmospheric gradient (.sunset-wash + sun-bloom orbs)

The signature cinematic backdrop on the hero and the closing CTA: a deep-plum-to-warm-ember sunset built from layered radial + linear gradients, with big blurred radial 'sun bloom' orbs floating behind the content so the dark page feels lit from off-screen.

Ember-to-violet gradient-clipped display word (.ember-text)

The recurring brand flourish: in each big headline a single word is filled with a warm ember-to-coral-to-violet gradient clipped to the glyphs, so the type itself carries the hero's sunset color while the rest of the heading stays cream.

Generated gradient 'photography' image cards (.img-* + .work-card hover)

Self-contained cinematic imagery with no external assets: each work/showreel image is a stack of ember/plum/violet radial + linear gradients standing in for a photo, with a bottom from-ink scrim for legible captions and a slow scale+saturate hover on the work cards.

Infinite recognition marquee (.marquee + edge fades)

An auto-scrolling, seamlessly looping row of award chips on the plum recognition band, with gradient fade masks at both edges so chips dissolve rather than hard-cut.

SVG film grain overlay (.grain) + capture-safe reveal

A fine fractal-noise film grain layered over the cinematic surfaces for a filmic texture, plus a scroll-reveal system engineered to default to visible so static/full-page screenshots are always complete.

Special Notes

Frameless, fully responsive cinematic agency / design-studio marketing site (no browser chrome / no device frame): every section centers in mx-auto max-w-[1280px] with px-6 -> lg:px-10; the nav is fixed + glassy (backdrop-blur-xl bg-ink/55) with links hidden below lg; the hero stats strip is grid-cols-2 -> sm:grid-cols-4; the work grid is md:grid-cols-2 with two md:col-span-2 feature cards; capabilities go 1 -> 2 -> 3 cols; the studio strip is lg:grid-cols-[0.9fr_1.1fr] with a 1 -> sm:3 process grid; the footer is md:grid-cols-[1.4fr_1fr_1fr_1fr] collapsing to 1 col; everything stacks on mobile. Built with Tailwind via CDN plus a small tailwind.config registering the cinematic colors (ink #0a0a0f, ink2 #0e0d16, plum #3b1d5e, ember #ff7a3d, cream #f4efe9) and the two font families (Space Grotesk display, Inter body, both via Google Fonts); icons are Iconify Phosphor (ph:) fill glyphs. All imagery is generated from layered CSS gradients (no external image files), so the page is fully self-contained. All copy and the 'Lumen Atlas' brand are placeholders meant to be swapped: the transferable value is the cinematic sunset palette (deep plum #3b1d5e -> warm ember #ff7a3d over near-black #0a0a0f surfaces with warm cream #f4efe9 text, NOT generic indigo/blue), the ember-to-violet .ember-text gradient-clipped display word, the layered .sunset-wash + blurred sun-bloom orbs + SVG film grain, the gradient-scrim hover-zoom imagery cards, the infinite award marquee, and the full agency layout (glass nav -> cinematic hero with showreel + stats -> big-imagery work showcase -> recognition marquee -> capabilities grid -> studio/process strip -> dramatic sunset CTA -> 4-column footer), NOT the specific studio.