Gilded Neural AI Landing — Glassmorphic

# AURUM — NEURAL-NETWORK LUXURY AI LANDING PAGE

> BUILD A SINGLE-PAGE, SELF-CONTAINED LANDING PAGE FOR A HIGH-END AI / CREATIVE TOOL, REPRODUCED SAME-TO-SAME (PIXEL-FAITHFUL) FROM THE REFERENCE DRAFT. SHIP IT AS PLAIN STATIC HTML + CSS + A SMALL AMOUNT OF VANILLA JS, RUNNABLE OFFLINE WITH ALL FONTS AND IMAGERY VENDORED LOCALLY. NO BUILD STEP REQUIRED.
>
> REFERENCE: `HTTPS://DRAFT-3FB83FBD-A6F3-44A0-AF74-B3AFCA0B7682.PREVIEW.SUPERDESIGN.DEV/`

## SUMMARY

A SOPHISTICATED DARK-MODE INTERFACE FEATURING NEURAL NETWORK CONNECTIVITY, GLASSMORPHISM, AND A LUXURY GOLD-ON-BLACK COLOR PALETTE DESIGNED FOR HIGH-END AI AND CREATIVE TOOLS.

## STYLE

THE DESIGN USES A MONOCHROMATIC DARK BASE (`#0A0A0A`) ACCENTED BY A GRADIENT OF GOLDS AND BRONZES. TYPOGRAPHY PAIRINGS INCLUDE 'PLAYFAIR DISPLAY' (ITALIC) FOR AN EDITORIAL FEEL AND 'INTER' FOR UI PRECISION. VISUAL INTEREST IS DRIVEN BY A 'BG-DOTS' RADIAL PATTERN AND BLURRED GLASSMORPHISM LAYERS (`RGBA(255,255,255,0.03)`) WITH HIGH-RADIUS CORNERS (24PX–48PX).

### SPEC

CREATE A DESIGN SYSTEM WITH A BACKGROUND OF `#0A0A0A` AND A RADIAL DOT GRID OVERLAY (32PX SPACING, WHITE AT 8% OPACITY). USE 'PLAYFAIR DISPLAY' (ITALIC) FOR HEADINGS AND 'INTER' (300–700 WEIGHT) FOR BODY TEXT. ACCENT COLOR PALETTE: BASE GOLD `#A78B71`, LIGHT GOLD `#C9B8A0`, AND HOVER GOLD `#E8D5B7`. IMPLEMENT 'GLASSMORPHISM' FOR ALL CARDS: BACKGROUND `RGBA(255,255,255,0.03)`, BACKDROP-FILTER `BLUR(10PX)`, AND BORDER `1PX SOLID RGBA(255,255,255,0.1)`. ANIMATIONS SHOULD USE `CUBIC-BEZIER(0.4, 0, 0.2, 1)` FOR TRANSITIONS AND `POWER4.OUT` FOR ENTRANCE REVEALS. INCLUDE A CENTRAL GLOW EFFECT USING `BOX-SHADOW: 0 0 100PX RGBA(167, 139, 113, 0.2)`.

## LAYOUT & STRUCTURE

A VERTICALLY STRUCTURED SINGLE-PAGE LAYOUT THAT TRANSITIONS FROM A COMPLEX, INTERACTIVE HERO SECTION INTO CLEAN, GRID-BASED CONTENT BLOCKS.

### NAVIGATION

FIXED TOP NAVBAR, 100% WIDTH, `PX-6` TO `PX-12` PADDING. FEATURES A TEXT LOGO IN 'PLAYFAIR DISPLAY' (BOLD ITALIC), CENTER-ALIGNED LINKS IN 'INTER' (11PX, UPPERCASE, TRACKING-WIDE), AND A 'START FREE TRIAL' PILL BUTTON (WHITE BACKGROUND, BLACK TEXT, ROUNDED-FULL).

### HERO SECTION

A CENTRAL INTERACTIVE NODE (16:9 ASPECT RATIO GLASS CARD) SURROUNDED BY FLOATING SATELLITE CARDS CONNECTED VIA DYNAMIC SVG BEZIER CURVES. THE CURVES SHOULD HAVE A 'PULSING-BRANCH' ANIMATION. THE HEADLINE USES 'PLAYFAIR DISPLAY ITALIC' AT `CLAMP(2.5REM, 8VW, 6REM)` WITH SPECIFIC WORDS HIGHLIGHTED IN `#A78B71`. BELOW THE HEADLINE, A DUAL-BUTTON CTA GROUP: ONE BORDERED AND ONE SOLID WHITE.

### FEATURES GRID

A 4-COLUMN GRID OF GLASSMORPHIC CARDS. EACH CARD HAS A 48PX SQUARE ICON CONTAINER WITH A `#A78B71/10` BACKGROUND. ON HOVER, THE ICON SCALES 1.1X AND THE CARD BORDER BRIGHTENS. TITLES ARE INTER BOLD 20PX, BODY IS INTER 14PX IN GRAY-400.

### PRICING SECTION

THREE-TIERED LAYOUT. THE CENTER 'PRO' CARD IS HIGHLIGHTED WITH A 1PX BORDER OF `#A78B71/40` AND A TOP-CENTERED 'MOST POPULAR' BADGE. PRICES ARE DISPLAYED IN 48PX BOLD FONT. TOGGLE BETWEEN MONTHLY/ANNUAL USING A PILL-SHAPED SWITCH WITH A WHITE ACTIVE STATE.

### TEAM SECTION

TWO-COLUMN LAYOUT FEATURING LARGE CARDS WITH 4:5 ASPECT RATIO IMAGES. IMAGES ARE GRAYSCALE BY DEFAULT AND TRANSITION TO COLOR ON HOVER. CAPTIONS INCLUDE LARGE SERIF NAMES AND ULTRA-THIN, WIDE-TRACKED UPPERCASE ROLES IN GOLD.

### FOOTER

MULTI-COLUMN LAYOUT (5 COLUMNS ON DESKTOP). LEFT COLUMN FEATURES THE LOGO AND SOCIAL ICONS IN CIRCULAR BORDERED CONTAINERS. FAR RIGHT COLUMN INCLUDES A 'JOIN DIGEST' INPUT FIELD: A LOW-OPACITY SEARCH BAR WITH A CIRCULAR ARROW-SUBMIT BUTTON.

## SPECIAL COMPONENTS

### NEURAL CONNECTION LINES

SVG PATHS THAT DYNAMICALLY CONNECT UI ELEMENTS TO A CENTRAL POINT.

RENDER SVG PATHS WITH CLASS 'NODE-LINE'. APPLY `STROKE-WIDTH: 2.5` AND A LINEAR-GRADIENT STROKE FROM `#C9B8A0` (90%) TO `#A78B71` (10%). ADD A 'PULSING-BRANCH' KEYFRAME ANIMATION THAT VARIES OPACITY FROM 0.4 TO 0.7. OVERLAP SECONDARY DASHED LINES WITH `STROKE-DASHARRAY: 5 15` FOR 'FLOW' EFFECTS.

### SATELLITE MEDIA CARDS

FLOATING PREVIEW CARDS THAT INTERACT WITH THE MOUSE AND CENTRAL NODE.

GLASS CARDS (WIDTH 220PX–340PX) CONTAINING GRAYSCALE IMAGES WITH ROUNDED-20PX CORNERS. ON HOVER: `SCALE(1.05)`, TRANSITION GRAYSCALE TO COLOR OVER 0.7S, AND APPLY `BOX-SHADOW: 0 0 60PX RGBA(167, 139, 113, 0.3)`.

### LIVE NOTIFICATION PILL

A FLOATING STATUS INDICATOR WITH A BREATHING ANIMATION.

PILL-SHAPED GLASS CARD WITH A 1PX BORDER-WHITE/10. CONTAINS A 8PX `GREEN-400` CIRCLE WITH 'ANIMATE-PULSE'. TEXT FOLLOWS: 'LIVE' (GREEN, BOLD, 8PX) THEN STATUS TEXT (WHITE, 12PX).

## SPECIAL NOTES

- **MUST:** MAINTAIN A HIGH LEVEL OF CONTRAST BETWEEN THE `#0A0A0A` BACKGROUND AND WHITE/GOLD ELEMENTS.
- **MUST NOT:** USE STANDARD BLUE/PURPLE GRADIENTS COMMON IN TECH; STICK STRICTLY TO THE GOLD/BRONZE SPECTRUM.
- **MUST:** USE HEAVY LETTER-SPACING ON SMALL UPPERCASE TEXT (LABELS, ROLES) TO MAINTAIN THE PREMIUM FEEL.
- **MUST:** APPLY `BACKDROP-FILTER: BLUR(10PX)` TO ALL OVERLAPPING LAYERS TO PREVENT VISUAL CLUTTER.