AURA | VR Game Agency

Design Specification — AURA | VR Game Agency

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F0EEE9), ink text (#111111), a vivid accent (#22D3EE). Display headings use a distinct face ('DM Serif Display', serif !important) over the body stack ('Inter'). Detected font weights: 100, 200, 300, 400, 500, 600, 700.

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.

Surface ramp (derived from detected light neutrals)

Gradients

• radial-gradient(ellipse at center,rgba(34,211,238,0.03) 0%,transparent 70%)
• radial-gradient(circle at 50% -20%,rgba(255,90,0,0.05) 0%,transparent 60%)

Typography

Primary typeface: Inter — stack: 'Inter'

Display / heading typeface: 'DM Serif Display', serif !important (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Inter'
• 'DM Sans'
• 'DM Serif Display', serif !important
• 'DM Sans', sans-serif !important
• 'Archivo Black'
• 'DM Serif Display'
• ui-sans-serif, system-ui, sans-serif

Web font sources

• fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap
• fonts.googleapis.com/css2?family=Archivo+Black&display=swap
• fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap
• fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 500, 600, 700

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

• 0 25px 50px -12px rgba(0,0,0,0.25)
• 0 0 8px rgba(34,211,238,0.6)
• 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)
• 0 0 8px rgba(255,255,255,0.8)

Layout

Container max-width: 896px

Grid columns (largest detected grid): 12

Breakpoints

• 640px
• 768px
• 1024px
• 1280px

Animation & Motion

Transitions

• opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)
• color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
• transform 150ms cubic-bezier(0.4, 0, 0.2, 1)
• all 150ms cubic-bezier(0.4, 0, 0.2, 1)

Easing curves

• cubic-bezier(0.4, 0, 0.2, 1)
• cubic-bezier(0.4, 0, 0.6, 1)
• cubic-bezier(0, 0, 0.2, 1)
• cubic-bezier(0.4, 0, 0.2, 1)

Keyframes

@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }

Animations

• marquee 20s linear infinite
• pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Initialize Environment”

button-secondary — sample text: “Pan Canvas”

badge

CTA labels found on page

• Initialize Environment

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

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #f0eee9;
  --body-color: #111;
}

Do's and Don'ts

Do

• Do reserve the accent #22D3EE for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #F0EEE9; surfaces should stay within the detected neutral ramp.
• Do set large headings in 'DM Serif Display', serif !important with tight tracking (-0.04em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600, 700.
• Do align spacing to the 8px base unit derived from the page.

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: #F0EEE9;
  --color-text-primary: #111111;
  --color-primary: #FF5A00;
  --color-accent: #22D3EE;
  --color-surface: #F0EEE9;
  --color-secondary: #111111;
  --color-text-secondary: #6B7280;
  --color-border: #D1D5DB;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #111111;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F4F6;
  --color-surface-container: #F0EEE9;
  --color-surface-container-high: #E5E7EB;
  --color-surface-container-highest: #E8E6E1;
  --font-sans: 'Inter';
  --font-size-display: 176px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-pill: 9999px;
  --shadow-sm: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-md: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-lg: 0 0 8px rgba(255,255,255,0.8);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --font-display: 'DM Serif Display', serif !important;
  --tracking-display: -0.04em;
  --tracking-label: 0.1em;
  --container-max: 896px;
}