Skip to content

design_guidelines.md

Latest commit

 

History

History
175 lines (130 loc) · 6.52 KB

design_guidelines.md

File metadata and controls

175 lines (130 loc) · 6.52 KB

Racket Advisor Design Guidelines

Design Approach

Inspiration: WTT (World Table Tennis) official website - professional sports federation aesthetic Philosophy: Information-dense, data-saturated, academically rigorous. Maximum information density without sacrificing hierarchy. Think sports broadcasting graphics meets scientific research platform.

Core Design Elements

A. Typography

Font Family:

  • Primary: Inter (Google Fonts CDN)
  • Data/Metrics: JetBrains Mono

Hierarchy:

  • H1 (Page titles): 3rem, font-black, uppercase tracking-wide
  • H2 (Sections): 2rem, font-bold
  • H3 (Cards): 1.5rem, font-semibold
  • Data labels: 0.75rem, font-medium, uppercase, tracking-wider
  • Numerical values: 1.5-2rem, font-mono, font-bold
  • Body: 0.9375rem, font-normal (slightly smaller for density)
  • Meta/secondary: 0.8125rem, font-normal

B. Colors

Primary Palette:

  • WTT Blue: #0066CC (primary actions, headers)
  • Competition Red: #E63946 (accents, alerts, secondary CTAs)
  • Deep Navy: #001E3C (backgrounds, text)
  • Ice Blue: #E3F2FD (light backgrounds, panels)

Data Visualization:

  • Player profile: #0066CC
  • Recommended equipment: #00C853
  • Comparative overlays: #FF6F00
  • Concordance indicators: Gradient from #E63946 to #0066CC
  • Reliability scores: #4CAF50 (high), #FFC107 (medium), #F44336 (low)

UI Elements:

  • Backgrounds: White, #F5F7FA (light gray), #001E3C (dark panels)
  • Borders: #E0E0E0, #0066CC for active states
  • Text: #001E3C (primary), #546E7A (secondary), #90A4AE (tertiary)

C. Layout System

Spacing: Tailwind units 2, 4, 6, 8

  • Dense padding: p-4 to p-6 (tighter than typical Material)
  • Section gaps: gap-4
  • Grid spacing: space-y-4
  • Card internal: p-6

Container Strategy:

  • Questionnaire: max-w-4xl (wider to accommodate side data panels)
  • Results: max-w-7xl (full width for comparison grids)
  • Detail modals: max-w-6xl (accommodate charts + specs side-by-side)

Component Library

1. Questionnaire Wizard

Layout: Two-column desktop (lg:grid-cols-3), question form (2 columns) + live preview panel (1 column)

  • Stepper: Compact horizontal bar with numerical indicators, WTT blue progress fill
  • Question cards: White surface, sharp corners (rounded-lg), blue left border accent (border-l-4)
  • Options: Dense radio/checkbox groups, min-h-10, hover state with light blue background
  • Live panel: Sticky sidebar showing real-time profile radar chart as user answers
  • Navigation: Blue primary button (Next), ghost secondary (Previous)

2. Results Dashboard

Hero Section: Full-width banner with equipment image background (subtle overlay), player profile summary card overlaid

  • Profile card: Glass-morphism effect (backdrop-blur), contains radar chart + key metrics in 3-column grid
  • Metrics: Large numerical displays with tiny labels, color-coded backgrounds

Recommendation Grid:

  • Four-column layout (lg:grid-cols-4) showing top 4 recommendations
  • Each card: Equipment image top, dense spec grid, multiple rating badges, synergy indicators
  • Information density: 8-12 data points per card (fit score, power, spin, speed ratings, reliability coefficient, concordance score)

Comparison Section:

  • Full-width table below recommendations
  • Sticky header, 6-8 columns (characteristics + 4-5 equipment options)
  • Alternating row backgrounds, inline mini bar charts for numerical comparisons
  • Color-coded cells based on performance metrics

3. Data Visualization

Radar Charts: Chart.js library

  • 6-8 axes (not just 4): Speed, Control, Spin, Hardness, Flexibility, Dynamics, Predictability, Durability
  • Multiple overlays: Player baseline (blue), Recommendation 1 (green), Recommendation 2 (orange), Recommendation 3 (red)
  • Dense gridlines, numerical labels at each point

Metrics Displays:

  • Fit Score: Circular progress indicator, large central number, descriptor ring
  • Concordance Coefficient: Horizontal bar with percentage + confidence interval visualization
  • Reliability Score: 5-star system with fractional fills, numerical value beside
  • Power/Spin matrices: Heat map grid (3x3 or 4x4)

4. Equipment Cards

Structure:

  • Equipment image: 16:9 aspect ratio banner at top
  • Name badge: Overlaid on image bottom-left with blue background, white text
  • Specs grid: 3-column dense layout (dl/dt/dd pattern)
  • Rating badges: Compact pills across top-right (Fit: 95%, Power: A+, Spin: S-tier)
  • Synergy indicator: Bottom bar with color gradient showing compatibility spectrum
  • CTA button: Full-width at bottom, blue background

5. Comparison Tools

Side-by-side view:

  • Two-column split for detailed comparison
  • Synchronized scrolling radar charts at top
  • Specification tables below with diff highlighting (green for better, red for worse)
  • Statistical significance indicators (p-values, confidence intervals)

6. Statistical Panels

Dense information cards featuring:

  • Concordance analysis: Coefficient value, confidence bands visualization
  • Reliability metrics: Cronbach's alpha, test-retest visualization
  • Distribution charts: Histograms showing performance across population
  • Recommendation confidence: Bayesian probability display with uncertainty ranges

Images

Hero Section: Yes - use equipment photography

  • Full-width background image showing professional table tennis action or close-up of blade/rubber
  • Subtle dark overlay (opacity-60) for text readability
  • Overlaid CTA buttons with backdrop-blur-md background

Equipment Cards:

  • Product images: Professional photography, white background, 400x300px
  • Placement: Top of each card, full-width
  • Blade detail images in modals: 600x600px, centered

Result Cards:

  • Thumbnail images: 120x120px, square, rounded-lg
  • Positioned: Top-left of card with text wrapping

Visual Rhythm

  • Sharp, data-focused aesthetic: minimal rounded corners (rounded-lg maximum)
  • Card elevation: shadow-sm for most cards (keep flat, professional)
  • Dense information: minimize whitespace, pack content efficiently
  • Blue accent bars: Left borders (border-l-4) on important cards
  • Grid lines: Visible dividers between data sections (border-gray-200)

Icons

Library: Heroicons via CDN

  • Metrics: chart-bar, calculator, beaker (scientific)
  • Equipment: table-cells, cube, cog
  • Status: check-circle, x-circle, exclamation-triangle
  • Navigation: chevron-right, chevron-down for accordions

Animations

Minimal utility only:

  • Progress indicators: Smooth fills (400ms)
  • Chart rendering: Staggered data point appearance (600ms total)
  • Card hover: Subtle blue glow (box-shadow transition)
  • Table row hover: Light blue background fade