STS Blokada

Overview

STS Blokada is a high-stakes sports betting and gaming platform designed for Polish users who demand speed, clarity, and confidence in their wagering decisions. The brand employs a 'High-Contrast Urgency' aesthetic—pairing a deep navy foundation (#131d2d) with vibrant orange (#faa41a) and electric blue (#0070e1) accents—to create an environment that feels both trustworthy and action-oriented. The interface prioritizes rapid scanning and decisive interaction, reflecting the fast-paced nature of live betting. Voice: direct, authoritative, and reassuring. Example: 'Twój kupon czeka — potwierdź zakład w ciągu 3 sekund.'

Colors

The color system is built on a dark-first philosophy to reduce eye strain during extended betting sessions while maximizing contrast for accessibility. Primary (#faa41a, a warm golden-orange) is reserved exclusively for call-to-action buttons, active states, and critical alerts—it commands attention without overwhelming. Secondary (#0070e1, a vivid electric blue) supports secondary actions and informational elements, creating a complementary accent pair. The surface stack ranges from near-black (#0a1118 for surface-dim) to a slightly lighter charcoal (#24303f for surface-container-highest), providing subtle depth without sacrificing legibility. On-surface text (#e9ecef) maintains a 7:1 contrast ratio against the base surface, exceeding WCAG AAA standards. Outline tokens (#8e9192 for standa

Typography

The type system uses Inter exclusively, a geometric sans-serif optimized for screen legibility at small sizes. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) frames section titles; Body-md (16px, 400 weight, 24px line-height) carries primary content and form labels. The 1.5x line-height ratio (24px on 16px base) ensures readability over long betting slips and terms. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, with a 20px line-height to maintain vertical rhythm. On small labels over busy backgrounds (e.g., odds badges), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to preserve legibility. Font weights are limited to 400 (regular) and 600 (semibold) to reduce cognitive lo

Layout

The layout uses a fixed 12-column grid with a max-width of 800px, centered on the viewport. This constraint ensures that critical information—odds, bet slips, account balances—remains within the user's focal area, reducing scrolling fatigue during rapid betting. The gutter is 24px, applied consistently between columns and sections. Vertical spacing follows the semantic scale: lg (40px) separates major sections (e.g., featured events from live odds), md (24px) divides cards and form groups, sm (12px) spaces inline elements. The container-max-width of 800px reflects the platform's mobile-first design philosophy; on desktop, content remains centered with symmetrical margins. White-space is used sparingly—the interface favors density over breathing room, reflecting the urgency of live betting

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background shifts. Level 1 (Base): surface (#131d2d) with no shadow, used for the page background and inactive containers. Level 2 (Standard Card): surface-container (#131d2d) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and input fields to lift them 2–3dp above the base. Level 3 (Elevated/Interactive): surface-container-high (#1a2635) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), used for hovered buttons, expanded modals, and focus states. The shadow blur radius increases with elevation (8px for Le

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are applied strategically to soften hard edges without introducing unnecessary ornamentation. Buttons and primary CTAs use rounded.md (12px / 0.75rem) to signal interactivity while maintaining a modern, approachable feel. Cards and containers use rounded.lg (16px / 1rem) to create visual separation and reduce visual tension in dense layouts. Input fields use rounded.DEFAULT (8px / 0.5rem) to balance form efficiency with subtle softness. The full radius (9999px) is reserved for badges and status indicators (e.g., 'LIVE', 'CLOSED').

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#faa41a), textColor: {colors.on-primary} (#131d2d), padding: 12px 24px, height: 48px, and rounded: {rounded.md}. On hover, the background shifts to {colors.primary-container} (#ff7800) with an elevated shadow (0 8px 24px rgba(0, 0, 0, 0.25)) and a 120ms ease-out transition. Active state reduces the shadow to 0 3px 8px and darkens the background to #e67e00. Button-secondary mirrors the primary structure but uses {colors.secondary} (#0070e1) with white text, supporting secondary actions like 'Cancel' or 'View History'. All buttons include a focus ring: outline: 3px solid rgba(250, 164, 26, 0.3) on focus-visible, ensuring keyboard navigation accessibility.

Containers

Do's and Don'ts

**Do**

• Do use {colors.primary} (#faa41a) exclusively for primary CTAs and active states—never for passive elements or backgrounds.
• Do maintain a 7:1 contrast ratio between text and background; test all color combinations with WCAG AAA standards.
• Do apply consistent 24px gutters and 40px section spacing to create visual rhythm and reduce cognitive load.
• Do use Inter 600 weight for labels and headings; reserve 400 weight for body text to maintain hierarchy.
• Do include a focus ring (outline: 3px solid rgba(250, 164, 26, 0.3)) on all interactive elements for keyboard accessibility.

**Don't**

• Don't use {colors.primary} for backgrounds or large surface areas—it will cause visual fatigue and reduce contrast.
• Don't apply rounded corners exceeding 1rem (16px) on buttons or cards; excessive rounding dilutes the brand's precision.
• Don't use shadows exceeding 0 8px 24px rgba(0, 0, 0, 0.25)—deeper shadows conflict with the dark aesthetic and reduce legibility.
• Don't mix font families; Inter is the only approved typeface. System fonts (system-ui, -apple-system) are forbidden.
• Don't reduce padding below 12px on buttons or inputs; cramped spacing increases error rates and reduces accessibility.