AQUARIA — The Last Surface

Design Specification — AQUARIA — The Last Surface

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#010409), ink text (#EEF7F9), a vivid accent (#E8C66A). All type is set in var(--display). Detected font weights: 400, 600, 800. Detected style signatures: soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• `radial-gradient(ellipse 60% 40% at 30% 20%, rgba(65, 230, 255, 0.08), transparent 60%),

radial-gradient(ellipse 50% 35% at 75% 60%, rgba(34, 200, 230, 0.06), transparent 60%)`

• `linear-gradient(100deg, transparent 0px, transparent 90px,

rgba(127, 245, 225, 0.05) 120px, rgba(65, 230, 255, 0.09) 150px, transparent 210px)`

• radial-gradient(ellipse 105% 85% at 50% 45%, transparent 55%, rgba(1, 4, 9, 0.75) 100%)
• radial-gradient(circle at 50% 50%, rgba(191, 250, 255, 0.95), rgba(65, 230, 255, 0.5) 45%, transparent 75%)
• linear-gradient(#41e6ff, #22c8e6)
• radial-gradient(circle at 40% 35%, #bffaff, #41e6ff 55%, #0b6c8c)
• `linear-gradient(to bottom, rgba(1, 4, 9, 0.7), rgba(2, 20, 38, 0.45) 45%, rgba(2, 20, 38, 0.85)),

linear-gradient(to top, rgba(4, 20, 38, 0.9), transparent 40%),

radial-gradient(ellipse 80% 60% at 50% 30%, rgba(9, 40, 70, 0.35), transparent 80%)`

• radial-gradient(ellipse 40% 30% at 70% 15%, rgba(191, 230, 255, 0.55), transparent 70%)
• `radial-gradient(circle at 52% 18%, rgba(65, 230, 255, 0.18), transparent 30%),

linear-gradient(90deg, rgba(1, 4, 9, 0.48), transparent 31%, transparent 66%, rgba(1, 4, 9, 0.58)),

linear-gradient(180deg, rgba(2, 11, 22, 0.08), rgba(1, 4, 9, 0.48))`

• radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(2, 7, 7, 0.14) 39%, rgba(1, 4, 9, 0.62) 78%)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--display) — stack: var(--display)

Font stacks (most used first)

• var(--display)
• var(--mono)
• var(--display) !important
• var(--font-display)

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 600, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• none
• 0 0 10px #41e6ff
• 0 0 60px rgba(65, 230, 255, 0.7), inset 0 0 60px rgba(65, 230, 255, 0.5)
• 0 0 24px rgba(65, 230, 255, 0.35)
• 0 0 8px rgba(65, 230, 255, 0.8)
• 0 0 14px #41e6ff
• 0 0 30px rgba(65, 230, 255, 0.9), 0 0 90px rgba(65, 230, 255, 0.5)
• 0 0 12px #41e6ff
• 0 0 68px rgba(0, 0, 0, 0.78)
• inset 0 0 42px rgba(65, 230, 255, 0.08)

Layout

Container max-width: 980px

Grid columns (largest detected grid): 4

Breakpoints

• 640px
• 720px
• 980px
• 1100px
• 1180px
• 1280px

Animation & Motion

Transitions

• all 0.25s ease
• color 0.25s ease
• height 0.25s ease
• opacity 0.5s ease
• opacity 0.9s ease
• width 0.15s linear
• opacity 0.9s ease, transform 0.9s ease
• all 0.3s ease
• transform 0.35s ease, opacity 0.35s ease
• border-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease
• transform 0.55s ease, filter 0.55s ease
• transform 0.36s ease, opacity 0.36s ease

Easing curves

• cubic-bezier(.22, 1, .36, 1)
• cubic-bezier(0.22, 1, 0.36, 1)

Keyframes

@keyframes causticDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } }
@keyframes rayShift { from { transform: translateX(-3%) skewX(-4deg); } to { transform: translateX(3%) skewX(-6deg); } }
@keyframes hintDrop { to { top: 110%; } }
@keyframes coreSpin { to { transform: rotate(360deg); } }
@keyframes corePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes lightning { 0%, 91%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: 0.9; } 93% { opacity: 0.25; } }
@keyframes heroGateDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-48px, 28px, 0); } }
@keyframes heroCuePulse { 0%, 100% { opacity: 0.35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(10px); } }
@keyframes btnPulse { 0%, 100% { box-shadow: 0 0 12px rgba(65, 230, 255, 0.25); } 50% { box-shadow: 0 0 34px rgba(65, 230, 255, 0.55); } }

Animations

• causticDrift 14s ease-in-out infinite alternate
• rayShift 11s ease-in-out infinite alternate
• corePulse 2.2s ease-in-out infinite
• coreSpin 3.4s linear infinite
• lightning 7s ease-in-out infinite
• heroGateDrift 12s linear infinite
• heroCuePulse 1.8s ease-in-out infinite
• corePulse 2.6s ease-in-out infinite
• coreSpin 6s linear infinite
• corePulse 3s ease-in-out infinite

CTA labels found on page

• Start Dive
• Watch Signal
• Join Waitlist
• Watch Gameplay
• Menu

Effects

• backdrop-filter: blur(6px)
• backdrop-filter: blur(8px)
• backdrop-filter: blur(18px)
• backdrop-filter: blur(14px)
• backdrop-filter: blur(4px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --navy: #020b16;
  --navy-2: #041426;
  --black: #010409;
  --aqua: #41e6ff;
  --cyan: #22c8e6;
  --teal: #0e8f9c;
  --pearl: #eef7f9;
  --gold: #e8c66a;
  --abyss-red: #ff3b57;
  --ink: #b06dff;
  --ink-dark: #170a24;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Anton', Impact, sans-serif;
  --serif: 'Cormorant Garamond', serif;
  --body-bg: var(--black);
  --body-color: var(--pearl);
  --primary: #021018;
}

Do's and Don'ts

Do

• Do reserve the accent #E8C66A for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #010409; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 600, 800.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #010409;
  --color-text-primary: #EEF7F9;
  --color-primary: #021018;
  --color-accent: #E8C66A;
  --color-surface: #F2FBFF;
  --color-secondary: #010409;
  --color-text-secondary: #BFFAFF;
  --color-border: #BFE6FF;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #EEF7F9;
  --font-sans: var(--display);
  --font-size-headline-md: 26px;
  --font-size-label-sm: 12px;
  --radius-md: 10px;
  --radius-lg: 32px;
  --radius-pill: 50%;
  --shadow-sm: none;
  --shadow-md: 0 0 8px rgba(65, 230, 255, 0.8);
  --shadow-lg: 0 0 68px rgba(0, 0, 0, 0.78);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 40px;
  --tracking-label: 0.3em;
  --container-max: 980px;
}