NIKKE: Goddess of Victory

Overview

NIKKE: Goddess of Victory is a tactical gun-shooting RPG that merges cinematic anime aesthetics with a dark, high-contrast digital interface. The brand serves hardcore action-RPG players seeking immersive character-driven combat experiences. The design language embraces 'Tactical Minimalism'—a movement that combines military precision with anime expressiveness, using deep blacks (rgb(10, 14, 26)), electric blues (rgb(56, 96, 190)), and gold accents (rgb(249, 215, 126)) to create an atmosphere of strategic intensity and visual drama. The UI evokes a sense of urgency and power, where every interaction feels deliberate and consequential.

The brand voice is commanding yet approachable: direct, action-oriented, and infused with Korean gaming culture's competitive spirit. Vocabulary leans toward tactical terminology ('deploy,' 'squad,' 'victory') mixed with character-driven storytelling. The tone avoids corporate jargon, instead using vivid, present-tense language. Example sentence: '지금 바로 다운로드! 세계 탈환을 위한 미소녀 건슈팅 액션!' (Download now! Girl-powered gun-shooting action to reclaim the world!).

Colors

The color system is built on a high-contrast, dark-first philosophy designed for extended play sessions and visual clarity during intense action sequences. Primary (#3860be) is the signature accent used exclusively on call-to-action buttons, focus states, and interactive highlights—it commands attention without overwhelming the dark canvas. Secondary (#f9d77e), a warm gold, provides a complementary accent for status indicators, badges, and secondary CTAs, creating visual rhythm against the cool primary. Tertiary (#68b631), a vibrant green, is reserved for success states, positive feedback, and achievement notifications.

The surface stack anchors the interface: surface (#0a0e1a) is the base canvas, surface-container (#151b28) lifts interactive elements 8px, and surface-container-high (#1f2

Typography

The type system prioritizes clarity and hierarchy in a fast-paced gaming environment. Noto Sans KR is the sole typeface, chosen for its excellent legibility at small sizes, comprehensive Korean character support, and modern geometric forms that complement the tactical aesthetic. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) commands attention for section titles; Headline-md (28px, 600 weight) organizes content zones. Body-md (16px, 400 weight, 24px line-height) is the workhorse for UI labels and descriptions, with generous 24px line-height to prevent eye strain during extended sessions. Label-md (14px, 600 weight) is applied to buttons and interactive elements with 0.01em tracking for crisp, scannable text. On sma

Layout

The layout uses a 12-column fluid grid with a 1280px container max-width, scaling responsively from 896px on tablets. Page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, content blocks, footer), md (24px) creates breathing room between cards and components, and sm (12px) tightens internal component spacing. The gutter is fixed at 24px on desktop, collapsing to 12px on mobile. White-space is intentional and generous—the dark background demands visual rest, so negative space is treated as a design element, not wasted real estate. Hero sections occupy 100vh with centered content and a play-button overlay (rgba(255, 255, 255, 0.1) background, 48px diameter). Card grids use 3-column layouts on desktop (each card 280px wide with 24px gaps), collapsing to 2 col

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container stacking, avoiding the heavy shadows of skeuomorphic design. Level 1 (Base): the surface (#0a0e1a) with no shadow, establishing the ground plane. Level 2 (Standard Card): surface-container (#151b28) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), lifting interactive elements 8px. Level 3 (Elevated/Modals): surface-container-high (#1f2633) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), creating modal prominence. Hover states transition shadows from md (0 3px 8px) to lg (0 8px 24px) over 150ms ease-out, signaling interac

Shapes

The shape language is 'Tactical Sharpness'—a philosophy that balances precision with approachability. Buttons and inputs use sm (2px) border-radius, maintaining a technical, military aesthetic while remaining friendly. Cards and containers use md (10px) for a subtle softness that prevents the interface from feeling cold. Modals and floating elements use lg (20px), signaling importance and separation from the base layer. The full (9999px) radius is reserved for badges and pill-shaped elements (e.g., search inputs, status indicators), creating visual distinction for secondary UI. This hierarchy

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses {colors.primary} (#3860be) background with white text, 12px 24px padding, 48px height, and 2px border-radius. On hover, background shifts to {colors.primary-container} (#366cb3) with a 150ms ease-out transition. Focus state adds a 2px outline at rgba(56, 96, 190, 0.5). button-secondary mirrors the primary structure but uses transparent background with 1px border at {colors.secondary} (#f9d77e) and gold text; hover fills with rgba(249, 215, 126, 0.1). button-ghost is used for tertiary actions: transparent background, 1px border at {colors.outline-variant}, white text, and a subtle hover fill at rgba(255, 255, 255, 0.08). All buttons use label-md typography (14px, 600 weight) and support disabled state (opac

Do's and Don'ts

**Do**

• Do use primary (#3860be) exclusively for high-priority CTAs and focus states—never on secondary UI or decorative elements.
• Do maintain 24px line-height on body text and 40px on headlines to ensure readability during extended gameplay sessions.
• Do apply 2px border-radius to all interactive buttons to reinforce the tactical, precise brand voice.
• Do use the full spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) to create visual rhythm and hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels over busy backgrounds for guaranteed legibility.

**Don't**

• Don't use secondary (#f9d77e) or tertiary (#68b631) as primary button colors—reserve them for badges, status indicators, and secondary CTAs.
• Don't exceed 20px border-radius on any element except badges; the tactical aesthetic demands precision, not softness.
• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.2)—the dark background already provides depth; over-shadowing creates visual noise.
• Don't apply letter-spacing greater than 0.05em on body text; Korean typography requires tighter tracking for legibility.
• Don't mix typefaces—Noto Sans KR is the sole font family across all UI layers; mixing undermines the cohesive tactical aesthetic.