Design System — Courtex

This document is the developer-facing reference for Courtex's visual design. Use this when building UI components, designing layouts, or making visual decisions.

Colour Palette

Primary Colours

Sage

  • Primary use: Brand hero, primary actions, trust and growth
  • Base: #6b8e6f
  • Dark: #4a6350
  • Light: #a8b89c
  • Lighter: #d4dcd5

Usage: - Primary buttons - Links - Brand elements - Hover states (use Dark) - Backgrounds (use Lighter or Light)

Amber

  • Secondary use: Rewards, celebrations, secondary UI elements
  • Base: #c9a876
  • Dark: #9d7d4f
  • Light: #dfc9a5
  • Lighter: #ecdcc9

Usage: - Reward badges - Secondary buttons - Achievement celebrations - Points/stars indicators - Hover states (use Dark) - Backgrounds (use Lighter or Light)

Slate

  • Accent use: Trust, reliability, serious/data features
  • Base: #7a94b8
  • Dark: #5a6f8f
  • Light: #a8bdd4
  • Lighter: #d4e0ed

Usage: - Data visualization (charts, stats) - Trust-related features - Leaderboard accents - Serious/technical UI - Hover states (use Dark) - Backgrounds (use Lighter or Light)

Neutral Palette

  • Text Dark: #2a2a2a (use instead of pure black)
  • Text Light: #6a6a6a (secondary text, labels)
  • Background: #ffffff (white)
  • Border: #e6e6e6 (light dividers)
  • Border Sage: #c7d3ca (sage-tinted dividers for cohesion)

Typography

Lead Typeface: EB Garamond

Usage: Headlines, display text, wordmark Characteristics: Warm, humanist serif; elegant and approachable

Sizes & Weights

  • Display (2.5rem, weight 400): Page heroes, key messaging
  • Headline (1.8rem, weight 500): Section headers
  • Title (1.3rem, weight 400): Subsection headers, card titles
  • Label (1rem, weight 500): Form labels, feature names

Example: "The future of grassroots badminton" (Display), "Find your community" (Title)

Supporting Typeface: Manrope

Usage: Body text, UI labels, buttons, captions Characteristics: Light, geometric sans-serif; clean and functional

Sizes & Weights

  • Body (1rem, weight 400): Main paragraph text
  • Label (0.85rem, weight 600): Button labels, UI labels (uppercase)
  • Caption (0.8rem, weight 300): Supporting text, metadata
  • Small (0.75rem, weight 400): Smallest readable size

Example: "Courtex helps you organize badminton sessions" (Body), "Find a Social" (Label), "Last updated 2 hours ago" (Caption)

Line Height

  • Headlines: 1.1–1.2
  • Body: 1.6
  • UI labels: 1.0

Letter Spacing

  • Headlines: -0.01em (tight, elegant)
  • Body: Normal (0)
  • Labels: +0.05em (uppercase only, adds clarity)

Components

Buttons

Primary Button

  • Background: Sage (#6b8e6f)
  • Text: White
  • Font: Manrope 0.95rem, weight 500
  • Padding: 0.75rem 1.5rem
  • Border-radius: 4px
  • Hover: Sage Dark (#4a6350)
  • Usage: Main CTAs ("Find a Social", "Book a Spot", "Create Session")
background: #6b8e6f;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-family: 'Manrope', sans-serif;
font-size: 0.95rem;
font-weight: 500;

Secondary Button

  • Background: Amber (#c9a876)
  • Text: Dark (#2a2a2a)
  • Font: Manrope 0.95rem, weight 500
  • Padding: 0.75rem 1.5rem
  • Border-radius: 4px
  • Hover: Amber Dark (#9d7d4f)
  • Usage: Secondary actions, rewards ("View Results", "Claim Reward")

Accent Button

  • Background: Slate (#7a94b8)
  • Text: White
  • Font: Manrope 0.95rem, weight 500
  • Padding: 0.75rem 1.5rem
  • Border-radius: 4px
  • Hover: Slate Dark (#5a6f8f)
  • Usage: Trust/data features ("Learn More", "View Stats")

Badges

Reward Badge

  • Background: Amber Lighter (#ecdcc9)
  • Border: 1px Amber (#c9a876)
  • Text: Amber Dark (#9d7d4f), Manrope 0.85rem, weight 600
  • Padding: 0.5rem 1rem
  • Border-radius: 20px
  • Icon: Star emoji (⭐) or icon
  • Usage: Celebrate achievements, show points/rewards
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #ecdcc9;
border: 1px solid #c9a876;
border-radius: 20px;
font-family: 'Manrope', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: #9d7d4f;

Leaderboard

Row Structure

  • Background: Light grey (#fafafa)
  • Border-bottom: 1px #e6e6e6 (except last row)
  • Padding: 1rem 1.5rem
  • Font: Manrope 0.95rem, weight 400

Top 3 Special Treatment

  • 1st Place: All text in Sage (#6b8e6f) with underline (2px)
  • 2nd Place: All text in Amber Dark (#9d7d4f) with underline (2px)
  • 3rd Place: All text in Slate (#7a94b8) with underline (2px)
  • No rank numbers — position inferred by order
  • Show: Player name, MMR rating (on the right)
/* 1st place */
color: #6b8e6f;
text-decoration: underline;
text-decoration-color: #6b8e6f;
text-decoration-thickness: 2px;
text-underline-offset: 4px;

Error Messages

  • Background: Light cream (#faf9f7)
  • Border-left: 3px Amber (#c9a876)
  • Text: Dark (#2a2a2a), Manrope 0.95rem
  • Padding: 1rem 1.5rem
  • Border-radius: 4px
  • Tone: Playful but helpful
  • Example: "Oops! That session is fully booked. Try checking out another social nearby — there's bound to be one that suits you."

Spacing & Layout

Whitespace Principles

  • Use generous margins and padding
  • Breathing room > density
  • 1.5–2rem spacing between major sections
  • 1rem padding inside cards/boxes
  • 0.5–1rem padding inside buttons/small elements

Grid & Breakpoints

  • Desktop: No max-width constraint; use generous margins
  • Tablet (768px): Adjust column count
  • Mobile (<768px): Single column, increased padding
  • Don't assume fixed sizes; design responsively

Shadows

  • Minimal and subtle
  • Cards: 0 2px 8px rgba(0, 0, 0, 0.1)
  • Hover states: 0 4px 12px rgba(0, 0, 0, 0.15)

Logo Usage

On Light Backgrounds

  • Colour: Sage (#6b8e6f)
  • Shapes: Triangle (Sage), Rectangle (Amber), Circle (Slate)
  • Style: Outline only (no fill)
  • Stroke width: 2.5px

On Sage Green Backgrounds

  • Colour: White
  • Opacity: Full for triangle, 0.9 for rectangle, 0.85 for circle
  • Style: Outline only

With Wordmark

  • Logo on the left, "Courtex" (EB Garamond) to the right
  • Horizontal layout (not stacked)
  • 1.5rem gap between logo and wordmark
  • No maximum size constraints

Minimum Sizes

  • No minimum size specified
  • Ensure outline strokes remain visible at small sizes (test at 40x40px)

Responsive Design

Key Principles

  • Mobile-first approach where possible
  • Test on slow networks (not everyone has 4G)
  • Font sizes should remain readable at smaller screens
  • Touch targets (buttons, links) should be ≥44px in height
  • Avoid horizontal scrolling

Typography Adjustments

  • Display text: 2.5rem → 2rem on mobile
  • Headline: 1.8rem → 1.5rem on mobile
  • Title: 1.3rem → 1.1rem on mobile
  • Body: 1rem (no change)

Accessibility

Colour Contrast

  • All text should have sufficient contrast (WCAG AA minimum)
  • Don't rely on colour alone to convey information
  • Use shape, text, or patterns as additional indicators

Readability

  • Avoid pure black text on white (use #2a2a2a)
  • Minimum font size: 0.8rem (only for captions)
  • Line-height: 1.6 for body text

Keyboard Navigation

  • All interactive elements should be keyboard-accessible
  • Focus states should be visible (don't remove outlines)
  • Use semantic HTML elements

Common Patterns

Card Component

border: 1px solid #e6e6e6;
border-radius: 4px;
padding: 1.5rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

Dividers

  • Use border-top: 1px solid #c7d3ca (sage-tinted) for cohesion
  • Margin: 2rem 0

Form Inputs

  • Use Slate tint for focus states
  • Border: 1px #e6e6e6
  • Padding: 0.75rem 1rem
  • Font: Manrope 1rem, weight 400

Resources

  • Visual Brand Guide: See brand-guide.html for full context
  • Voice & Tone: See voice-and-tone.md for messaging
  • Copilot Instructions: See copilot-instructions.md for strategy