Team Liquid

Overview

Team Liquid is the world's most successful esports organization, competing across multiple titles and regions. This design system embodies **Athletic Maximalism**—a bold, high-contrast aesthetic that channels the intensity and precision of competitive gaming. The visual language combines a deep navy foundation (#001538) with vibrant accent colors (golden sunlight #f7c95e, electric blue #4689e0, and vivid purple #5651ed) to create an energetic, confidence-driven interface that mirrors the brand's championship mentality.

The brand voice is authoritative yet approachable: direct, passionate about competition, and celebratory of achievement. Team Liquid speaks to both hardcore esports fans and mainstream audiences with equal conviction. Example: "We're the iBUYPOWER FML 2026 Champions—here's how we got here." The tone avoids hype-speak; instead, it grounds claims in results and roster excellence.

Colors

The color system is built on a **deep-navy-with-accent** model, where the surface stack anchors the interface in professional darkness (surface #001538, surface-dim #000f29) while three distinct accent colors drive interaction and hierarchy. **Primary (Sunlight #f7c95e)** is the brand's signature CTA color—used exclusively on high-priority buttons, badges, and interactive elements. It commands attention against the dark background with 100% contrast and appears on the hero CTA 'Let's go Liquid FC' button. **Secondary (Foundation Blue #4689e0)** supports data visualization, secondary buttons, and accent highlights; it's the team's competitive blue, evoking trust and focus. **Tertiary (Purple #5651ed)** is reserved for tertiary actions, decorative accents, and status indicators. The surface

Typography

The type system pairs **kaneda-gothic** (a geometric, athletic sans-serif loaded via Adobe Typekit) for all display and headline levels, creating a bold, modern silhouette that reinforces the competitive brand identity. Body and label text uses **DM Sans** (Google Fonts), a humanist sans-serif that balances the geometric headlines with warmth and readability. Display (61px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like 'A NEW CHAPTER: TEAM GULLIT BECOMES LIQUID FC'; headline-lg (48px, 700, -0.02em) for section titles; headline-md (32px, 700) for subsections. Body-lg (18px, 400) and body-md (16px, 400) handle descriptive copy and card content. Label-md (14px, 700) is applied to all button text and badges, ensuring interactive elements stand out with weight and clar

Layout

The layout follows a **12-column fluid grid** with a max-width of 1280px (container-max), centered on the viewport. The page rhythm uses semantic spacing: lg (40px) for major section separation (hero to content blocks), md (24px) for card padding and component internal spacing, sm (12px) for tight groupings within cards. The hero section spans full-width with a diagonal accent stripe (orange #f7c95e transitioning to dark navy) that creates visual momentum; the main content area sits at 1248px max-width with 24px gutters on each side. Cards and content blocks use 24px padding internally and are separated by 40px vertical spacing. The grid is responsive: on tablet (< 991px), the container adjusts to 940px; on mobile (< 768px), gutters reduce to 12px and sections stack single-column. White-sp

Elevation & Depth

Depth is conveyed through **layered opacity and subtle shadows** rather than dramatic elevation. The base layer (Level 1) is the surface background at #001538 with no shadow. Level 2 (standard cards and containers) uses a 1px border of rgba(255, 255, 255, 0.1) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to separate from the background. Level 3 (modals, elevated cards, hover states) increases the shadow to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) and raises the border opacity to rgba(255, 255, 255, 0.16). Interactive elements (buttons, inputs) on hover transition to Level 3 with a 200ms ease

Shapes

The shape philosophy is **Geometric Precision**—sharp, athletic corners that reflect competitive focus without coldness. Buttons and interactive elements use 8px border-radius (1rem), a moderate radius that feels modern and approachable. Cards and containers use 12px (1.5rem) for a slightly softer, more premium feel. Input fields and small components use 4px (0.5rem) for a tighter, more technical appearance. The hero section features a dramatic diagonal stripe with no radius, emphasizing the bold, directional energy. Badges and pills use 9999px (full) for maximum roundness, creating a soft, ba

Components

Action Elements **Buttons** are the primary interaction pattern. The primary button (button-primary) uses backgroundColor: {colors.primary} (#f7c95e), textColor: {colors.on-primary} (#001538), typography: label-md (14px, 700 weight), rounded: 8px, padding: 11px 24px, height: 48px. On hover, the background shifts to {colors.primary-fixed-dim} (#f7c95e with 5% opacity reduction) with a 200ms ease transition. The secondary button (button-secondary) uses backgroundColor: {colors.surface-container-high} (#113f7f), textColor: white, same padding and height. Tertiary buttons (button-tertiary) use a transparent background with rgba(255, 255, 255, 0.05) and white text; on hover, the background becomes rgba(255, 255, 255, 0.1). All buttons include a focus state with a 3px outline in {colors.seco

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f7c95e) exclusively for primary CTAs and high-priority interactive elements—it's the brand's signature accent and must never be diluted or overused.
• Do maintain the dark surface foundation (#001538) as the base for all pages; never use white or light backgrounds without explicit brand approval.
• Do apply the kaneda-gothic typeface to all display and headline text (48px and above) to reinforce the athletic, competitive brand identity.
• Do use the spacing scale strictly (4px, 12px, 24px, 40px, 64px) for all margins and padding—no arbitrary values—to maintain rhythm and consistency.
• Do layer surfaces using the opacity scale (4%, 8%, 16% white) rather than shifting to lighter colors; this preserves the premium, translucent aesthetic.
• Do include a 1px border at rgba(255, 255, 255, 0.1) on all cards and containers to define edges against the dark background.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs; {colors.primary} (#f7c95e) is the only button color for main actions.
• Don't apply border-radius greater than 12px to cards or containers—the system uses 4px, 8px, or 12px only; no 16px, 20px, or 24px.
• Don't use system fonts (Arial, Helvetica) for headlines; kaneda-gothic must load via Typekit for all display and headline text.
• Don't add drop-shadows greater than 24px blur radius; keep shadows tight (8px–24px max) to avoid a floating, disconnected aesthetic.
• Don't mix opacity-based layering with color-based layering; use either white opacity shifts (surface stack) or accent color overlays, never both on the same element.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use {colors.on-primary} (#001538) or {colors.on-surface} (#ffffff) from the token system.