Chicago Bulls

Overview

The Chicago Bulls brand system embodies **Athletic Maximalism**—a high-contrast, bold aesthetic that channels the intensity and precision of professional basketball. The design prioritizes clarity and urgency through a stark black-and-red palette, where the signature Bulls red (#cd1141) acts as the visual heartbeat, commanding attention on every CTA, link, and interactive element. The typography hierarchy uses condensed, geometric typefaces (acumin-pro-condensed) for headlines to evoke speed and power, while humanist sans-serifs (Open Sans, Roboto) ground body content in accessibility. The UI treats information architecture as a fast-break offense: every element earns its space, shadows are sharp and purposeful (0 3px 8px rgba(0,0,0,0.15)), and white space is weaponized to isolate key moments.

The brand voice is direct, authoritative, and fan-centric. Sentences are short, active, and built for scanning—"Tickets," "Learn More," "Ring of Honor." The palette reflects the team's identity: jet black (#000000) as the dominant canvas, Bulls red as the accent that demands action, and cool secondary accents (light blue #b3ddf2) for supporting information and stats. Every interaction should feel immediate and consequential, mirroring the split-second decisions that define the game.

Colors

**Primary Color System:** The primary accent is Bulls red (#cd1141), used exclusively on call-to-action buttons, active links, focus states, and brand-critical interactive elements. This red is never diluted—it appears at full saturation to maintain visual authority. The on-primary text is pure white (#ffffff) for maximum contrast (WCAG AAA compliant at 8.59:1 ratio). When primary needs a container context, use primary-container (#f5f5f5, a near-white) with on-primary-container text (#121212, near-black) for secondary CTAs or highlighted sections.

**Surface Stack:** The background is absolute black (#000000), establishing an immersive, premium canvas. The surface-container hierarchy progresses from #050505 (surface-container-lowest, for recessed elements) through #1f1f1f (surface-containe

Typography

The type system is built on a **Contrast-Driven Hierarchy** that separates brand voice (condensed, geometric) from content voice (humanist, open). Headlines use acumin-pro-condensed at weights 700–900, with aggressive negative letter-spacing (-0.04em to -0.01em) to compress words and amplify impact—ideal for game scores, team names, and section titles. The display level (60px, 700 weight, -0.04em spacing) is reserved for hero statements; headline-lg (48px, 700 weight) for major section heads; headline-md (32px, 700 weight) for subsections. Body copy uses Open Sans or Roboto at 400 weight, 16–18px, with 1.5x line-height (24–28px) to maintain legibility over the dark background. Labels use Roboto at 700 weight, 12–14px, with 0.01–0.05em letter-spacing for UI controls and badges. When small l

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1520px, centered on the viewport. The gutter is a consistent 24px (3 units), applied symmetrically to all sides of the container. Section separation uses the lg spacing token (40px) vertically to create breathing room between hero, game schedule, news feed, and footer zones. Horizontal white space is minimal—cards and content blocks are packed tightly (md spacing, 24px) to reflect the urgency of live sports. The container max-width of 1520px accommodates widescreen displays (1440p+) without excessive line lengths; on tablets (896px), the layout collapses to a single column with gutter reduced to sm spacing (12px). Hero sections use full-width backgrounds (black #000000) with centered content at the container width, creat

Elevation & Depth

Depth is conveyed through **Sharp, Purposeful Shadows** that reinforce the high-contrast aesthetic. There are three elevation levels: **Level 1 (Base)** has no shadow—elements sit flush on the black background. **Level 2 (Standard Cards, Dropdowns)** uses box-shadow: 0 3px 8px rgba(0,0,0,0.15), creating a subtle lift that separates content from the canvas without softness. **Level 3 (Modals, Popovers, Elevated CTAs)** uses box-shadow: 0 0 18px rgba(0,0,0,0.2), a larger spread that signals prominence and focus. Hover states transition shadows in 200ms (ease-in-out) from Level 2 to Level 3, sign

Shapes

The shape philosophy is **Geometric Precision with Minimal Ornamentation**—sharp corners dominate, with rounded corners reserved for specific interaction contexts. **Buttons and inputs** use a 0.5rem (8px) border-radius, a subtle softening that signals clickability without compromising the athletic, angular aesthetic. **Cards and containers** use 6px (0.375rem) for standard layouts, 1rem (16px) for elevated modals and popovers. **Badges and pills** use full (9999px) border-radius for a compact, label-like appearance. **Disabled or secondary elements** may use 0.25rem (4px) for a more austere l

Components

Action Elements **Button Primary** is the dominant CTA: backgroundColor {colors.primary} (#cd1141), textColor white, 48px height, 12px vertical + 24px horizontal padding, 0.5rem border-radius, label-md typography (14px, 700 weight). On hover, backgroundColor shifts to #b30d38 (a -5% lightness reduction) with a 150ms ease-in-out transition. On focus (keyboard), add a 3px ring at rgba(205,17,65,0.1). On active (pressed), reduce the shadow to 0 1px 2px rgba(0,0,0,0.1) to create a "pressed" effect. **Button Secondary** uses backgroundColor {colors.surface-container-highest} (#373737), textColor white, same dimensions and typography as primary, with a 1px border at {colors.outline-variant} (#c5c5c5). On hover, backgroundColor becomes {colors.surface-container-high} (#2b2b2b) and textColor s

Do's and Don'ts

**Do**

• Do use primary red (#cd1141) exclusively on CTAs, active states, and brand-critical moments—never on passive elements or backgrounds.
• Do maintain the 24px gutter and md spacing (24px) inside cards to create visual rhythm and prevent content from feeling cramped.
• Do apply sharp, purposeful shadows (0 3px 8px rgba(0,0,0,0.15) for standard, 0 0 18px rgba(0,0,0,0.2) for elevated) to separate layers without softness.
• Do use acumin-pro-condensed for headlines and Roboto/Open Sans for body to maintain the contrast between brand voice and content voice.
• Do transition all interactive states (hover, focus, active) in 150–200ms using ease-in-out timing to signal responsiveness.
• Do ensure all text meets WCAG AAA contrast (8.59:1 for primary on white, 4.5:1 for secondary on black) for accessibility.

**Don't**

• Don't soften shadows or use blur-radius > 18px—the aesthetic demands sharp, controlled depth, not atmospheric diffusion.
• Don't use primary red on backgrounds, disabled states, or passive text; reserve it for interactive, high-priority elements only.
• Don't mix typefaces within a single headline or section—stick to acumin-pro-condensed for brand voice, Open Sans/Roboto for content.
• Don't reduce padding below sm (12px) inside cards or containers; white space is a design tool, not a constraint.
• Don't apply border-radius > 1rem (16px) to buttons or inputs—the brand is geometric and precise, not rounded or soft.
• Don't use color alone to convey state; always pair color changes with shadow, border, or typography shifts for clarity.