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

Extended Palette

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

Sage

Amber

Slate

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.

---

Marketing site direction

The Courtex marketing site is an editorial map of badminton participation, not a feature catalogue. It should help visitors choose a relevant path quickly, then show one believable product moment at a time.

Composition principles

• Organise pages around intent: find a game, run a social, build a club, or connect a venue.
• Compose sections according to the idea they communicate. Mix editorial statements, asymmetric product/UI splits, dense data views, diagrams, and quiet whitespace rather than repeating card grids.
• Show capability through focused product UI wherever possible. A real session, attendance list, match record, or discovery view should do more work than a paragraph of feature claims.
• Use colour to create hierarchy and rhythm. Sage often leads primary actions and participation; coastal blue often supports history, discovery, and data; wattle gold adds warmth and emphasis. These are tendencies, not audience taxonomies.
• Keep organiser workflows prominent without making the site feel like admin software. Players, clubs, socials, matches, and venues should appear as a connected ecosystem.
• Introduce complexity progressively. The homepage should orient visitors, route them to a relevant path, show product proof, and make pricing/current availability easy to find. Detailed features belong on deeper pages.

Marketing layout grammar

Use a 1200px maximum content width and a small set of deliberate layout modes:

• editorial statement
• asymmetric text and product split
• product showcase
• intent index
• dense information/data section
• relationship diagram
• quiet editorial section

Cards are one possible container, not the default composition. Prefer borders and tonal background shifts over heavy shadows. Desktop asymmetry should become a deliberate reading order on mobile, not an arbitrary stack.