Courtex Design System

Developer reference for implementing Courtex UI. All colours, type scales, and component patterns are documented here.

Full visual guide: docs/templates/docs/courtex-brand-guide.html

Colour Palette

Primary Palette

#6b8e6f

Sage

Primary colour. Brand hero, primary actions, trust and growth.

#6b8e6f

#c9a876

Amber

Secondary colour. Rewards, celebrations, secondary UI elements.

#c9a876

#7a94b8

Slate

Accent colour. Trust, reliability, serious/data features.

#7a94b8

Extended Palette

Use shades for hover states, disabled states, and backgrounds.

Sage

Light

#d4dcd5

Lighter

#a8b89c

Base

#6b8e6f

Dark

#4a6350

Amber

Light

#ecdcc9

Lighter

#dfc9a5

Base

#c9a876

Dark

#9d7d4f

Slate

Light

#d4e0ed

Lighter

#a8bdd4

Base

#7a94b8

Dark

#5a6f8f

Neutrals

Name	Hex	Usage
Text Dark	`#2a2a2a`	Body text, headings
Text Light	`#6a6a6a`	Secondary text, captions, placeholders
Background White	`#ffffff`	Page backgrounds
Border	`#e6e6e6`	Dividers, card borders
Border Sage	`#c7d3ca`	Section dividers with brand tint

Typography

Two typefaces create hierarchy and personality.

EB Garamond — Display & Headlines

Serif typeface. Used for page titles, section headings, card titles, wordmark.

Role	Size	Weight
Display	2.5rem	400
Headline	1.8rem	500
Title	1.3rem	400

Load from Google Fonts: family=EB+Garamond:wght@400;500;700

Manrope — Body & UI

Sans-serif typeface. Used for body text, buttons, labels, captions, form inputs.

Role	Size	Weight
Button Label	0.85rem	600, uppercase, letter-spacing 0.05em
Body	1rem	400, line-height 1.6
Caption	0.8rem	300

Load from Google Fonts: family=Manrope:wght@200;300;400;500;600;700

Component Patterns

Buttons

Three semantic button types:

Type	Background	Text	Usage
Primary	Sage `#6b8e6f`	White	Main CTAs — "Find a Social", "Book a Spot"
Secondary	Amber `#c9a876`	Text Dark	Secondary actions, rewards-related CTAs — "View Results"
Accent	Slate `#7a94b8`	White	Trust/data-heavy features — "Learn More"

Common attributes: border-radius: 4px, padding: 0.75rem 1.5rem, Manrope font, using the Button Label typography style for text (0.85rem, weight 600, uppercase with slight letter-spacing).

Reward Badge

Used for achievements and point rewards. Amber palette with subtle pill shape.

Background: Amber Lighter #ecdcc9
Border: Amber Base #c9a876
Text colour: Amber Dark #9d7d4f
Border radius: 20px (pill shape)
Font: Manrope, 0.85rem, weight 600
Include an emoji icon (e.g. ⭐) to the left of the label

Example: ⭐ 500 Points

Leaderboard

Top 3 positions use brand colours with subtle underlines. No numeric rank labels displayed — position is implied by order.

Position	Colour	Decoration
1st	Sage `#6b8e6f`	Underline in sage, 2px, offset 4px
2nd	Amber Dark `#9d7d4f`	Underline in amber-dark, 2px, offset 4px
3rd	Slate `#7a94b8`	Underline in slate, 2px, offset 4px

Each row shows: player name (bold) + MMR/position label (muted) + MMR rating (right-aligned).

Always display MMR values — transparency is a core brand value.

Error Messages

Playful tone. Use a left border for visual interest without aggression.

Background: #faf9f7 (warm off-white)
Left border: 3px solid Amber #c9a876
Border radius: 4px
Padding: 1rem 1.5rem
Text: Manrope, 0.95rem, Text Dark #2a2a2a
Use conversational, helpful tone — never clinical or alarming

Example: "Oops! That session is fully booked. Try checking out another social nearby — there's bound to be one that suits you."

Spacing & Layout

Prefer generous whitespace — the brand is clean, not cramped
Section padding: 3rem 2rem
Card gaps: 2rem
Inner card padding: 1.5rem
Maximum content width: 1200px centred
Border radius: 4px for cards and buttons (clean, not overly rounded)
Use subtle box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) on cards — avoid heavy shadows

Logo

The Courtex monogram mark uses three geometric shapes representing shuttlecock, court, and expansion:

Triangle (shuttlecock): Sage stroke
Rectangle (court): Amber stroke
Circle (expansion/global): Slate stroke

All shapes use fill: none with a stroke-width of 2.5.

Usage Rules

Context	Guidance
Light backgrounds	Use coloured mark (sage, amber, slate strokes)
Dark/sage backgrounds	Use white strokes for all three shapes
With wordmark	Logo on left, "Courtex" wordmark to the right in EB Garamond, 1.8rem, weight 400
Minimum size	60px height to maintain legibility

Do not recolour individual shapes outside the defined palette. Do not add drop shadows to the logo.

DaisyUI Theme Mapping

Courtex uses DaisyUI with TailwindCSS. Colour mappings:

DaisyUI Token	Courtex Colour
`primary`	Sage `#6b8e6f`
`secondary`	Amber `#c9a876`
`accent`	Slate `#7a94b8`

Reference: pages/templates/pages/brand.html for the live DaisyUI colour showcase.