Sleeper

Overview

Sleeper is a high-velocity fantasy sports platform engineered for real-time data consumption and rapid decision-making. The design system embodies 'Velocity Minimalism'—a aesthetic that prioritizes information density, instant visual feedback, and competitive urgency while maintaining clarity under cognitive load. The interface uses a deep navy-to-black canvas (rgb(5, 9, 29)) as a neutral stage, allowing vibrant accent colors (cyan #00fff9, electric blue #00baff, warm orange #ffae58) to command attention without fatigue. The brand personality is direct, data-driven, and uncompromising: users expect millisecond-precision updates, zero visual clutter, and immediate access to league standings and player scores. Voice: terse, action-oriented, never apologetic. Example: 'Your league updated 47ms ago—check the matchup.'

Colors

The color system is built on a dark-first philosophy optimized for extended viewing and real-time monitoring. Primary (rgb(0, 255, 249) / #00fff9) is the brand's signature accent—deployed on all CTAs ('SIGN UP', 'CREATE AN ACCOUNT'), active navigation states, and input focus rings. It commands 3–5% of screen real estate but drives 80% of interaction cues. Secondary (rgb(56, 96, 190) / #3860be) anchors secondary actions and data-layer highlights (e.g., league badges, status indicators). Tertiary (rgb(255, 174, 88) / #ffae58) is reserved for alerts, warnings, and time-sensitive notifications. The surface stack descends from #050921 (surface) through #131b38 (surface-container, used for modals and elevated cards) to #020409 (surface-container-lowest, for deeply nested UI). All surfaces use rg

Typography

The type system pairs Poppins (display, headlines, labels) for high-contrast, geometric clarity with Inter (body, data-dense tables) for neutral readability at small scales. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments and league names. Headline-lg (40px, 600 weight) anchors section headers. Body-md (16px, 400 weight, 24px line-height) is the workhorse for score tables and player stats—the 24px line-height (1.5x) prevents crowding in data-heavy layouts. Label-md (14px, 600 weight, 0.01em tracking) is applied to all interactive elements (buttons, badges, tabs) and must include a 150ms transition on hover to signal interactivity. On small labels over busy backgrounds (e.g., player names over team logos), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure 7

Layout

The layout uses a 12-column fluid grid with a 1440px container max-width, collapsing to 100% viewport width on mobile. Horizontal rhythm is governed by the 24px gutter (md spacing token), creating breathing room between league cards and score tiles without sacrificing density. Vertical rhythm uses lg spacing (40px) to separate major sections (header, matchup grid, standings table), md spacing (24px) for card-to-card separation, and sm spacing (12px) for intra-card element spacing. The header is fixed at the top with a semi-transparent backdrop (rgba(5, 9, 29, 0.8) + blur(4px)) to maintain navigation access while scrolling through live scores. Modals use a centered overlay with surface-container background and 32px padding, constrained to 600px max-width on desktop. All spacing increments a

Elevation & Depth

Depth is conveyed through layered backdrop-filter effects and subtle shadows rather than flat color shifts. Level 1 (Base): the background gradient (dark navy to near-black) with no shadow. Level 2 (Standard Card): rgba(19, 27, 56, 0.3) background + backdrop-filter: blur(8px) + 1px border at rgba(52, 56, 85, 0.4) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modal/Elevated): rgba(26, 36, 71, 0.4) background + backdrop-filter: blur(12px) + 1px border at rgba(0, 255, 249, 0.15) + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3). Hover states transition the shadow to 0 6px 16px rgba(0, 0, 0, 0.2

Shapes

The shape philosophy is 'Technical Precision'—sharp, geometric, and purposeful. Buttons use full (9999px) border-radius to signal primary actions and create a pill-shaped affordance that feels modern and clickable. Secondary buttons and tertiary actions use DEFAULT (4px) for a more restrained, data-table aesthetic. Cards and modals use md (10px) for a balance between approachability and technical rigor. Input fields use DEFAULT (4px) to align with form conventions and maintain visual consistency with data tables. The rationale: full-radius buttons stand out in a sea of sharp UI, making CTAs un

Components

Action Elements Buttons are the primary interaction primitive. Button-primary (bg: #00fff9, text: #050921, 44px height, 12px 24px padding, full radius) uses Poppins 600 at 14px and must include a 150ms ease-out transition on hover to darken to #00d7ff. Button-secondary (bg: #3860be, text: white, 36px height, 8px 16px padding) is used for secondary CTAs like 'Log In' and 'Create Account'. Button-tertiary (transparent bg, cyan text, 1px outline) is for low-priority actions and must show a 0.06 opacity cyan background on hover. All buttons disable at 50% opacity with cursor: not-allowed.

Containers & Surfaces Cards use rgba(19, 27, 56, 0.3) background with backdrop-filter: blur(8px), 1px border at rgba(52, 56, 85, 0.4), and 24px padding. On hover, the background shifts to rgba(26, 36

Do's and Don'ts

**Do**

• Do use cyan (#00fff9) for all primary CTAs and focus states—it is the brand's signature and must be instantly recognizable.
• Do maintain 24px gutters between major sections and 12px between card elements to prevent visual crowding in data-dense layouts.
• Do apply 150ms ease-out transitions to all interactive elements (buttons, cards, inputs) to signal state changes without lag.
• Do use Poppins 600 for all labels and headlines to create visual hierarchy; reserve Inter 400 for body text and data tables.
• Do include backdrop-filter: blur(8px) on all elevated surfaces (cards, modals) to create depth and maintain the glassmorphic aesthetic.
• Do test all color combinations against the dark background for 4.5:1 WCAG AA contrast, especially on small text.

**Don't**

• Don't use border-radius values between 5px and 9px—stick to the defined scale (sm: 2px, DEFAULT: 4px, md: 10px, lg: 16px, xl: 20px, full: 9999px).
• Don't apply shadows without a corresponding backdrop-filter blur; the system relies on layered transparency, not depth alone.
• Don't exceed 5% of screen real estate with primary accent color (#00fff9)—overuse dilutes urgency and causes visual fatigue.
• Don't use system fonts or generic sans-serif fallbacks; always specify Poppins or Inter with proper @font-face declarations and fallback stacks.