The Infected

Overview

The Infected is a post-apocalyptic survival horror game design system rooted in **Cinematic Brutalism**—a visual language that merges austere, high-contrast surfaces with vivid accent lighting to evoke dread, urgency, and immersion. The brand personality is unflinching and tactical: every UI element serves survival, every color choice signals danger or opportunity. The interface strips away ornament, favoring stark blacks (#030405, #060606), near-white text (#f7f4ef), and a signature burnt-orange accent (#f97316) that commands attention like a flare in darkness. The emotional response is one of controlled tension: the user feels prepared, armed, and ready to engage.

Voice and vocabulary are direct, imperative, and militaristic. Sentences are short and action-oriented: "Join the Survivors," "Weapons at the ready," "Scavenge, shoot, and stay alive." The brand avoids flowery language, preferring nouns that evoke survival (quarantine, outbreak, horde, loadout) and verbs that demand agency (survive, scavenge, engage). Tone is never breathless or casual—it is calm under pressure, like a soldier reading a mission briefing. Example sentence in brand voice: "Alpha Build. Offline Play. No Ads. Enter with Sound."

Colors

The color system is built on **high-contrast brutalism**: a near-black surface stack anchored by #030405 (surface), #060606 (surface-container-lowest), and #0a0a09 (surface-dim), paired with a warm, desaturated off-white (#f7f4ef, on-surface) for maximum readability and visual separation. This creates a 15:1+ contrast ratio, essential for legibility in high-stress scenarios and cinematic cinematics.

Primary accent is burnt-orange (#f97316), used exclusively on call-to-action buttons, focus states, and brand-critical interactive elements. This color carries a 0 0 70px rgba(249, 115, 22, 0.28) glow shadow on primary buttons, creating a sense of danger and energy. Secondary accent is a cool blue (#2563eb) for secondary actions and status indicators, while tertiary green (#16a34a) signals suc

Typography

Typography is **bold and hierarchical**, using a single sans-serif family (ui-sans-serif, system-ui) across all weights to maintain visual cohesion. The display tier (60px, 900 weight, -0.04em letter-spacing) is reserved for hero headlines and cinematic moments, while headline-lg (48px, 900 weight) anchors section titles like "Survive the Quarantine Zone." Body text (16–18px, 400 weight, 24–28px line-height) is set in a warm off-white (#f7f4ef) for readability over dark backgrounds. Labels and UI text use 900 weight (label-md: 14px, 0.18em letter-spacing) to create visual punch and urgency—every button, badge, and navigation item feels commanding. When small labels appear over busy cinematic backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) to ensure legibility. The extreme weig

Layout

Page rhythm follows a **cinematic grid**: a 12-column layout with a max-width of 1280px, using fluid padding (24px on mobile, 40px on tablet, 64px on desktop) to maintain breathing room. The hero section spans full viewport height (100svh), with a fixed header (z-50, backdrop-filter: blur(8px), rgba(6, 6, 6, 0.4)) floating above. Section separation uses lg spacing (40px) for major breaks, md spacing (24px) for card groupings, and sm spacing (12px) for internal component padding. The gutter (24px) is applied consistently to left/right edges, creating a safe margin for text and interactive elements. Cards and containers use a 2–3 column grid on mobile, expanding to 3–4 columns on desktop, with gap-4 (1rem) between items. This rhythm creates visual momentum while respecting the dark, high-con

Elevation & Depth

Depth is conveyed through **layered darkness and subtle shadow**, not through light. The base layer (Level 1) is the surface (#030405) with cinematic video or gradient overlays (radial-gradient(circle at 77% 64%, rgba(255, 73, 24, 0.18), transparent 22%), linear-gradient(90deg, rgba(3, 4, 5, 0.92) 0%, rgba(3, 4, 5, 0.62) 31%, ...)) creating atmospheric depth. Level 2 (Standard Card) uses surface-container-lowest (#060606) with a 1px border at rgba(255, 255, 255, 0.1) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal) uses surface-container-high (#1f1f1d) with a 1px border

Shapes

The shape philosophy is **Tactical Sharpness with Soft Affordances**: buttons and primary CTAs use full rounding (border-radius: 9999px) to signal safety and approachability despite the dark theme, while cards and containers use lg (1rem) or xl (1.5rem) rounding to create a sense of precision and structure. Input fields use md rounding (0.5rem) to feel functional and utilitarian. This mix—full-round buttons against slightly-rounded containers—creates visual hierarchy: the most important interactive elements (CTAs) are the most forgiving in shape, while secondary surfaces are more angular. The

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (bg: #f97316, text: #000000, padding: 16px 28px, height: 48px, border-radius: 9999px, box-shadow: 0 0 70px rgba(249, 115, 22, 0.28)) is used for critical CTAs like "Join the Survivors." On hover, apply background: #ff9d4d and transform: scale(1.02) with a 200ms transition. **button-secondary** (bg: rgba(255, 255, 255, 0.05), text: #f7f4ef, border: 1px solid rgba(255, 255, 255, 0.2), padding: 16px 24px, border-radius: 9999px, backdrop-filter: blur(4px)) is used for secondary actions like "Watch Trailer" and "Download APK." On hover, increase background opacity to rgba(255, 255, 255, 0.1). **button-ghost** (bg: transparent, text: #f7f4ef, border: 1px solid rgba(255, 255, 255, 0.2), padding: 8px 12px, border-r

Do's and Don'ts

**Do**

• Do use the orange accent (#f97316) exclusively on primary CTAs and focus states—it is the brand's survival signal and must not be diluted.
• Do maintain 15:1+ contrast between text and background by pairing #f7f4ef (on-surface) with #030405–#0a0a09 (surface stack).
• Do apply the glow shadow (0 0 70px rgba(249, 115, 22, 0.28)) to primary buttons to create a sense of danger and urgency.
• Do use full rounding (9999px) on buttons and badges to create visual softness and approachability within the dark aesthetic.
• Do apply backdrop-filter: blur(8–20px) to overlays and headers to create depth without adding visual noise.

**Don't**

• Don't use the orange accent on secondary or tertiary elements—reserve it for the most critical user actions.
• Don't apply shadows darker than rgba(0, 0, 0, 0.5) on cards; the dark surface stack already provides sufficient depth.
• Don't use rounded corners smaller than 0.375rem (md) on interactive elements; they become illegible at small sizes.
• Don't mix sans-serif and serif typefaces; maintain ui-sans-serif across all typography tiers for visual cohesion.
• Don't reduce letter-spacing on labels below 0.12em; the military stencil effect is core to the brand identity.