Marvel

Overview

Marvel's design system embodies **Cinematic Brutalism**—a bold, high-contrast aesthetic that prioritizes impact and clarity over ornamentation. The brand serves fans of superhero storytelling across all demographics, delivering character discovery and entertainment through a dark, action-oriented interface. The visual language combines heavy typography (urwdin-condensed-black at 700 weight), stark black backgrounds (rgb(0, 0, 0) to #1a1a1a), and a signature red accent (#e62429) that commands attention like a hero's emblem. The emotional response is one of power, urgency, and cinematic grandeur—every interaction feels consequential.

Marvel's voice is direct, energetic, and fan-centric. The brand speaks in active, present-tense language: "Get hooked on a hearty helping of heroes and villains." Vocabulary leans into comic-book vernacular ("House of Ideas," "heroes," "villains") and avoids corporate jargon. The tone is never apologetic—it's confident, playful, and assumes the audience shares the brand's passion for storytelling. Example sentence in Marvel's voice: "Discover the powers, weaknesses, and untold stories of your favorite heroes—from Iron Man's genius to Thor's godly might."

Colors

Marvel's color system is built on **high-contrast drama**. The primary accent is a vivid, unmistakable red (#e62429, rgb(230, 36, 41))—used exclusively on CTAs ("SIGN UP", "LOG IN"), interactive elements, and focus states. This red is never used for body text or backgrounds; it exists to command action. The surface stack is a deep, near-black foundation: surface (#1a1a1a), surface-dim (#0f0f0f), and surface-container (#1f1f1f) create a cinematic, immersive backdrop. On-surface text is pure white (rgb(255, 255, 255)) for maximum legibility and impact. Secondary accent blue (#3860be, #3772df) supports secondary CTAs and interactive states, providing visual hierarchy without competing with primary red. Tertiary white (#ffffff) is reserved for input fields, cards, and elevated surfaces, creati

Typography

Marvel's type system is **bold and hierarchical**, built on the URW DIN family—a geometric sans-serif that conveys precision and power. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like "MARVEL CHARACTERS"; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 700 weight) for subsections. Body text (16px, 400 weight, urwdin-regular) maintains readability at small sizes; labels (12px, 600 weight, urwdin-semi-condensed-medium) are used for buttons and metadata. The type pairing communicates authority and action: condensed-black weights (700) on headings create visual weight and urgency, while regular weights (400) on body text ensure legibility. Instruction: apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on white labels over character imagery to

Layout

Marvel uses a **12-column fluid grid** with a max-width of 1280px (container-max-width: 1280px), centered on the viewport. The page rhythm is cinematic: hero section (full-bleed background image with overlay, 40px lg spacing for section separation), featured content cards (24px md gutter between columns), and character grids (12px sm spacing for compact density). White-space is strategic, not generous—the brand favors visual density and impact over breathing room. Spacing scale: xs (4px) for tight component padding, sm (12px) for list items and small gaps, md (24px) for card padding and section margins, lg (40px) for major section breaks, xl (64px) for top-level container margins. The gutter (24px) is applied consistently between grid columns. Mobile breakpoints compress spacing: md become

Elevation & Depth

Marvel's depth system is **flat with cinematic shadows**—no gradients, no glassmorphism, pure contrast. Elevation is conveyed through box-shadow layering and background color shifts. Level 1 (Base): dark surface (#1a1a1a) with no shadow, establishing the foundation. Level 2 (Cards/Modals): surface-container (#1f1f1f) with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation. Level 3 (Elevated Modals/Popovers): surface-container-high (#2d2d2d) with box-shadow 0 16px 40px rgba(0, 0, 0, 0.2), commanding attention. Hover states intensify shadows: cards transition from md shadow to

Shapes

Marvel's shape philosophy is **Architectural Sharpness**—minimal rounding, geometric precision, and controlled softness. Border-radius follows a strict scale: sm (2px) for subtle softening on inputs and small components, DEFAULT (4px) for standard cards and buttons, md (10px) for larger cards and modals, lg (16px) for hero sections and prominent containers, xl (20px) for oversized modals, full (9999px) for badges and pill-shaped elements. Buttons use DEFAULT (4px) for a sharp, action-oriented appearance; cards use md (10px) for a slightly softer, more inviting feel. The reasoning: sharp corner

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses background-color: rgb(230, 36, 41) (#e62429), text-color: white, padding: 12px 24px, height: 48px, border-radius: 4px, font-size: 12px, font-weight: 600. On hover, background shifts to #ff6b6b with a 200ms ease-in-out transition. On active/pressed, background darkens to #cc1f1f. **button-secondary** is transparent with a 1px solid border in primary red, text in primary red, same padding and height. Hover state fills with rgba(230, 36, 41, 0.1) (10% red overlay). All buttons use urwdin-semi-condensed-medium at 12px for label-md typography.

Containers & Surfaces **card** component: background-color #1f1f1f (surface-container), border-radius 10px, padding 24px, box-shadow 0 3px 8px rgba(0, 0, 0, 0.15

Do's and Don'ts

**Do**

• Do use primary red (#e62429) exclusively on CTAs and interactive focus states—never on body text or backgrounds.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on white text over character imagery to maintain 4.5:1 contrast.
• Do use urwdin-condensed-black at 700 weight for all headlines and display text to reinforce cinematic authority.
• Do maintain 24px gutter spacing between grid columns and 40px lg spacing for major section breaks.
• Do use box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) on cards and 0 16px 40px rgba(0, 0, 0, 0.2) on elevated modals for cinematic depth.
• Do apply 200ms ease-in-out transitions on all hover state changes (background-color, box-shadow, border-color).

**Don't**

• Don't use border-radius > 20px except for full-circle badges—sharp corners reinforce the brand's bold aesthetic.
• Don't apply gradients or transparency overlays to surfaces; use solid colors and shadow depth for elevation.
• Don't use secondary blue (#3860be) on primary CTAs—reserve it for secondary actions and supporting elements.
• Don't reduce font-weight below 400 on body text or below 600 on labels; URW DIN requires weight to maintain legibility.
• Don't use outline-style borders on buttons; use solid 1px borders on secondary buttons only.
• Don't apply blur effects (backdrop-filter: blur) to any element except modal overlays; keep the interface sharp and cinematic.