Neon Oiran — Cyber Geisha Action RPG

Design Specification — Neon Oiran — Cyber Geisha Action RPG

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#0A0608), ink text (#000000), a vivid accent (#FF3333). All type is set in 'Inter'. Detected font weights: 100, 200, 300, 400, 500, 600.

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.

Typography

Primary typeface: Inter — stack: 'Inter'

Font stacks (most used first)

• 'Inter'
• 'Oswald'
• 'Viaoda Libre'
• 'Bebas Neue', sans-serif !important
• 'Imprima'
• 'Bebas Neue'
• ui-sans-serif, system-ui, sans-serif

Web font sources

• fonts.googleapis.com/css2?family=Viaoda+Libre&family=Imprima&display=swap
• fonts.googleapis.com/css2?family=Bebas+Neue&display=swap
• fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&display=swap
• fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&family=Viaoda+Libre&display=swap

Derived type scale

Font sizes (by frequency)

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

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 1px 2px 0 rgba(0,0,0,0.05)
• 0 0 6px #fff
• 0 0 8px #ef4444
• 0 0 8px rgba(255,255,255,0.8)

Layout

Container max-width: 1280px

Grid columns (largest detected grid): 5

Breakpoints

• 640px
• 768px
• 1024px

Animation & Motion

Transitions

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

Easing curves

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

Keyframes

@keyframes bobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes animationIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes scan { 0% { top: -5%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }

Animations

• 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-secondary — sample text: “Telemetry Array”

button-primary — sample text: “Data Node”

navigation-link

badge

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

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #0a0608;
}

Do's and Don'ts

Do

• Do reserve the accent #FF3333 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #0A0608; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600.
• 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.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-background: #0A0608;
  --color-primary: #EF4444;
  --color-accent: #FF3333;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #0A0608;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: 'Inter';
  --font-size-display: 128px;
  --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: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --shadow-sm: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-md: 0 0 6px #fff;
  --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;
  --tracking-display: -0.025em;
  --tracking-label: 0.025em;
  --container-max: 1280px;
}