Guilty Gear -STRIVE-

Overview

Guilty Gear -STRIVE- employs a **High-Contrast Competitive Aesthetic** — a design language rooted in fighting-game UI conventions where clarity and urgency dominate. The brand personality is intense, direct, and uncompromising: dark charcoal backgrounds (#1c1c1c) create a neutral canvas, while a vivid red accent (#f44336) punctuates every critical interaction — patch notes, CTAs, and status updates. This is not a soft or welcoming interface; it is a command center for competitive players and engaged community members. The emotional response is one of focus and authority: the UI gets out of the way and lets the content (game updates, balance changes, tournament info) speak with precision.

Voice and tone are technical yet accessible. Sentences are declarative and information-dense: "Ver. 2.01 patch includes Blazing Pass addition, battle version update (Ver. 5.01), and bug fixes." The brand avoids marketing fluff; every word serves the player. Vocabulary is drawn from fighting-game culture ("patch," "balance," "character," "frame data") and gaming platforms (PlayStation, Steam, Xbox). Example sentence in brand voice: "Blazing Pass now live — new mechanics unlock at 5:01 patch."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. **Primary (#f44336)** is the brand's signature red — used exclusively on CTAs, patch-note labels, and interactive highlights. It appears sparingly but with maximum impact, ensuring every red element demands attention. **Surface (#1c1c1c)** is the dominant background, chosen for its neutrality and reduced eye strain during long play sessions. **Secondary (#cccccc)** provides a light gray for supporting UI elements and disabled states. **Tertiary (#770c00)** is a deep burgundy reserved for error states and critical warnings. The surface stack progresses from #0a0a0a (surface-container-lowest, used for recessed elements) through #1c1c1c (base) to #2d2d2d (surface-container-highest, for elevated modals). All text on dark

Typography

The type system pairs **Noto Sans JP** (body and display) with **Open Sans** (labels and UI text), reflecting the site's bilingual (Japanese/English) audience and the need for crisp, legible sans-serif rendering at small sizes. Display and headline weights are set to 700 (bold) to convey authority and urgency — patch notes and game updates demand immediate recognition. Body text uses 400 (regular) at 16px / 24px line-height for comfortable reading of detailed balance changes and feature descriptions. Labels use Open Sans at 12px / 16px with 700 weight and 0.05em letter-spacing to create visual separation and scanability in dense UI. On small labels over busy backgrounds (e.g., update badges), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) to ensure legibility. Headline-lg (40px, 700 weig

Layout

The layout uses a **fixed 12-column grid** with a max-width of 1280px, optimized for both desktop and tablet viewing. The gutter is 24px, providing breathing room between content blocks without excessive whitespace. Patch-note content uses a single-column layout on mobile (< 768px) and expands to a two-column layout on desktop for better scannability of tables and update cards. Spacing follows a semantic scale: **lg (40px)** separates major sections (e.g., between patch notes and community announcements), **md (24px)** separates cards and subsections, and **sm (12px)** provides internal padding within components. The container max-width of 1280px ensures that long-form content (patch notes, balance change tables) remains readable without excessive line lengths. White-space is used strategi

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than bright highlights. The elevation system uses three levels: **Level 1 (sm)** — 0 1px 2px rgba(0, 0, 0, 0.06) — applied to subtle UI elements like input fields and list items, barely perceptible but present. **Level 2 (md)** — 0 3px 8px rgba(0, 0, 0, 0.15) — used on cards, buttons, and standard containers, creating clear separation from the base surface. **Level 3 (lg)** — 1px 2px 8px 0 rgba(0, 0, 0, 0.35) — reserved for modals, dropdowns, and cookie consent banners that must float above all other content. Upd

Shapes

The shape philosophy is **Geometric Precision with Functional Softness** — sharp corners where they serve clarity, rounded corners where they soften interaction. Buttons use **full (9999px)** border-radius to create pill-shaped CTAs that feel modern and clickable (e.g., "購入する" / "Buy Now" button). Cards and containers use **md (0.75rem / 12px)** border-radius for a subtle, professional appearance without excessive rounding. Input fields use **DEFAULT (0.5rem / 8px)** for a neutral, utilitarian look. Update-card labels use **clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0% 100%)** to

Components

Action Elements **Button-Primary** (#f44336 background, white text, 40px height, 24px horizontal padding, full border-radius) is the dominant CTA for purchase, navigation, and critical actions. On hover, the background shifts to #f24b44 (primary-fixed-dim) with a smooth 100ms transition. Apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all buttons to lift them off the surface. **Button-Secondary** uses a transparent background with a 1px border (#4d4d4d outline) and white text, reserved for secondary actions like "Reject" or "Learn More." On hover, the background becomes #242424 (surface-container-high) and text shifts to primary red (#f44336), creating a clear state change without overwhelming the interface.

Containers & Surfaces **Card** uses #1c1c1c background with 1px border

Do's and Don'ts

**Do**

• Do use primary red (#f44336) exclusively on CTAs, patch-note labels, and interactive highlights — never on body text or backgrounds.
• Do maintain high contrast ratios (minimum 4.5:1 for body text, 16.5:1 for critical information) to ensure readability for competitive players during long sessions.
• Do apply consistent shadow elevation (md level: 0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive elements so users can distinguish clickable surfaces.
• Do use Noto Sans JP for all body and headline text to ensure proper rendering of Japanese characters and maintain visual consistency across languages.
• Do separate major content sections with lg spacing (40px) and consecutive cards with sm spacing (10px) to create clear visual rhythm in dense patch-note documents.

**Don't**

• Don't use red (#f44336) on non-interactive elements or backgrounds — it must remain a signal for action and urgency.
• Don't apply rounded corners (border-radius > 1rem) to cards or containers; use md (0.75rem) for professional restraint.
• Don't add blur, glassmorphism, or transparency effects to the dark background; the aesthetic is flat-modern with precise shadows, not atmospheric.
• Don't use light backgrounds (#ffffff or #f9f9f9) for primary content areas; reserve them for update cards and special content only.
• Don't exceed 1280px container width; wider layouts reduce readability of patch-note tables and balance-change lists on desktop displays.