Dunks & Threes

Overview

Dunks & Threes is a data-driven basketball analytics platform designed for serious NBA enthusiasts, coaches, and analysts. The design system embraces a "Technical Minimalism" aesthetic—a disciplined, information-dense interface that prioritizes clarity and precision over visual ornamentation. The dark theme (oklch(22.5% 0 0) background) reduces eye strain during extended analysis sessions, while the vibrant teal accent (primary: #03aa7d) signals actionable insights and key metrics. The brand personality is authoritative yet approachable: analytical without being cold, data-rich without being overwhelming. Voice: direct, evidence-based, occasionally witty about basketball culture. Example: "Your team's defensive rating just dropped 0.3 points per 100 possessions—here's why."

Colors

The color system is built on a high-contrast dark foundation (surface: #1a1a1a, on-surface: #f8f8f8) optimized for readability of statistical tables and charts. Primary (#03aa7d, oklch(52% .095 166.913)) is the signature teal accent used exclusively for CTAs, active states, and key performance indicators—it evokes trust and precision. Secondary (#6c757d) provides a neutral supporting role for disabled states and secondary text. Tertiary (#feda6a) is reserved for highlight annotations and positive performance deltas. Error (#ef4444) flags negative metrics and warnings. The surface stack (surface-container-lowest through surface-container-highest) enables layered depth: use surface-container for standard cards (1px solid outline-variant border), surface-container-high for hover states with 0

Typography

The type system uses Nunito Variable as the primary typeface, chosen for its excellent readability at small sizes (12px label-sm) and its geometric clarity that complements data visualization. The hierarchy spans from display (60px, -0.04em tracking) for page titles down to label-sm (12px, 0.02em tracking) for table headers and badges. Body text is set at 16px with 1.5 line-height (24px) for comfortable scanning of descriptive content. Headlines use -0.02em letter-spacing to create visual density appropriate to a stats-focused interface. For tabular data and code-like values, apply JetBrains Mono Variable at 14px with 400 weight and 0em tracking to maintain alignment. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.3) on small labels (label-sm, label-md) when overlaid on colored backgrounds (bad

Layout

The layout follows a 12-column grid with a 1400px max-width container, maintaining 40px horizontal gutters on desktop and 24px on tablet. The page rhythm uses the spacing scale semantically: lg (40px) for major section breaks (between tabs and table, between chart and legend), md (24px) for card padding and component spacing, sm (12px) for internal element spacing within cards. The header is fixed at the top with 40px horizontal padding and 56px height (14px line-height header + 21px padding top/bottom), creating a persistent navigation anchor. Tables use 12px row height with 16px horizontal padding per cell, allowing dense data presentation without sacrificing scanability. Sidebar navigation (when present) uses 240px width with 24px gutter spacing. All interactive elements (buttons, input

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of the surface-container stack rather than dramatic layering. Level 1 (Base): surface (#1a1a1a) with no shadow, used for the page background and default card state. Level 2 (Standard Card): surface-container (#1a1a1a) with 1px solid outline-variant (#3a3a3a) border, no shadow—this is the default card treatment for tables, stat panels, and content blocks. Level 3 (Elevated/Hover): surface-container-high (#242424) with box-shadow: 0 3px 8px rgba(0,0,0,0.15) and the same 1px border—applied on hover to cards and when opening dr

Shapes

The shape system follows "Architectural Precision"—minimal, functional border-radius values that respect the grid and data-dense nature of the interface. Buttons and inputs use rounded.sm (0.125rem / 2px), creating a subtle softness that prevents the interface from feeling harsh while maintaining a technical aesthetic. Cards and panels use rounded.DEFAULT (0.25rem / 4px), slightly more generous to signal containment without distraction. Modals and popovers use rounded.lg (0.5rem / 8px) to create clear visual separation. Badges and pills use rounded.full (9999px) for their circular/oval shape,

Components

Action Elements Buttons come in two primary variants. Button-primary uses primary (#03aa7d) background with on-primary text (#f8f8f8), 8px vertical / 16px horizontal padding, 36px height, and rounded.sm (2px). On hover, transition to primary-container (#027a5a) with a 150ms ease-out timing. Button-secondary uses a transparent background with on-surface-variant text (#b3b3b3), a 1px outline-variant border (#3a3a3a), and the same padding/height. On hover, fill the background with surface-container-high (#242424) and change text to on-surface (#f8f8f8). Both variants apply cursor: pointer and disable the default button styling (background-color: transparent, border: none in reset).

Containers & Surfaces Cards are the primary container for content blocks. Default card: surface-contain

Do's and Don'ts

**Do**

• Do use primary (#03aa7d) exclusively for CTAs, active states, and key performance indicators—never use it for decorative elements or backgrounds.
• Do maintain the 40px horizontal gutter and 24px vertical spacing between major sections to create visual breathing room in data-dense layouts.
• Do apply label-sm (12px, 500 weight) with text-shadow: 0 1px 2px rgba(0,0,0,0.3) for annotations overlaid on colored backgrounds or charts.
• Do use the surface-container stack (lowest through highest) to convey depth; avoid adding shadows to every interactive element.
• Do keep border-radius values at 2px–8px range; avoid rounded.xl (1rem) on buttons and inputs to maintain technical precision.

**Don't**

• Don't use secondary (#6c757d) or tertiary (#feda6a) as primary accent colors—they are supporting roles only.
• Don't apply rounded.full or rounded.xl to buttons, inputs, or standard cards; reserve full rounding for badges and pills.
• Don't exceed 150ms transition duration on hover/focus states; faster feels snappy, slower feels sluggish in a data-focused context.
• Don't mix Nunito Variable with system fonts or fallbacks; always specify JetBrains Mono Variable for tabular/code-like content.
• Don't use box-shadow on more than one level of the surface stack simultaneously; use the surface-container progression instead to avoid visual noise.