Cinematic Agency — 3D Rolodex — Référence de design web et prompt

# SUPERDESIGN — CINEMATIC AGENCY DESIGN SYSTEM

## SUMMARY

BUILD **SUPERDESIGN** (BRAND WORDMARK: **SUPERDESIGN**), AN IMMERSIVE, DARK-MODE CREATIVE-AGENCY LANDING PAGE / DESIGN SYSTEM THAT USES 3D SPATIAL DEPTH AND HIGH-CONTRAST EDITORIAL TYPOGRAPHY TO CREATE A THEATRICAL, CINEMATIC EXPERIENCE. IT BLENDS BRUTALIST LAYOUT STRUCTURES (HEAVY BORDERS, MASSIVE TYPE) WITH FLUID, HIGH-TECH MOTION. THE FINAL RENDER MUST BE SAME-TO-SAME (PIXEL/LAYOUT PARITY) WITH THE REFERENCE DESIGN.

THE PAGE IS A SINGLE, VERTICALLY-SCROLLING SITE WITH THESE SECTIONS IN ORDER: FIXED BLEND-MODE NAV → 3D ROLODEX CUBE HERO (WITH MASSIVE "SUPERDESIGN" BACKGROUND TYPE) → "CASE STUDIES" BENTO PROJECT GRID → "PLANS THAT GROW WITH YOU" THREE-TIER PRICING (DARK PURPLE, CENTRAL GLOW) → "STARTUPS: FIRST YEAR IS FREE" BANNER → "ESTIMATE YOUR GROWTH PLAN PRICE" GLASS CALCULATOR → MASSIVE-SCALE EDITORIAL FOOTER ("LET'S BUILD THE IMPOSSIBLE.").

## STYLE

A BASE OF NEAR-BLACK `#050505` FOR DEPTH. TYPOGRAPHY IS THE HERO: **ASPEKTA** (WEIGHTS 300 / 500 / 700 / 900), `font-weight: 900` FOR DISPLAY HEADINGS, `font-weight: 700` WITH WIDE TRACKING (`0.2em`) FOR SECONDARY LABELS. ALL HEADINGS ARE UPPERCASE. COLOR ACCENTS ARE MINIMAL BUT PUNCHY: A CYAN→PINK GRADIENT FOR PRIMARY BUTTONS, AND A PURPLE GLOW FOR THE PRICING SECTION. INTERACTIVE ELEMENTS USE `backdrop-filter: blur(8px)` AND `1px solid rgba(255,255,255,0.1)` BORDERS — **NO DROP SHADOWS**; DEPTH COMES FROM BORDERS + BLUR.