---
version: alpha
name: Odd Ritual Golf
description: Heritage golf apparel rendered as understated luxury — a near-white milk canvas with deep charcoal ink, navy and maroon heritage accents, editorial serif-flavored display type over clean grotesque body, full-bleed monochromatic imagery, and quiet text-only CTAs with squared corners.

colors:
  # Canvas + ink
  background: "#f7f4ef"
  surface: "#ffffff"
  surface-soft: "#efe9e0"
  ink: "#1a1a1a"
  ink-pure: "#000000"
  ink-secondary: "#5a5650"
  ink-muted: "#8c8780"

  # Heritage accents
  primary: "#1d2a44"        # heritage navy
  maroon: "#5c2230"         # club maroon
  gold: "#b08d4f"           # muted gold detailing
  cream: "#e8dfce"          # cream / milk tone

  # Neutral scale (warm-leaning)
  stone-900: "#1a1a1a"
  stone-700: "#3d3a35"
  stone-500: "#6e6a62"
  stone-300: "#cfc8bc"
  stone-200: "#e3ddd2"
  stone-100: "#efe9e0"

  # On-color
  on-primary: "#f7f4ef"
  on-ink: "#f7f4ef"
  on-gold: "#1a1a1a"

  # Functional
  border: "#dcd5c8"
  border-strong: "#1a1a1a"
  link: "#1d2a44"
  link-hover: "#5c2230"
  focus: "#1d2a44"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.25px
  card-title:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 2px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  price:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.5px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

components:
  # Solid heritage CTA
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  # Outline / ghost CTA
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 31px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 31px
    borderColor: "{colors.border-strong}"

  # Quiet text link CTA
  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px

  # Eyebrow / heritage badge
  badge:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.maroon}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 6px 12px

  # Product card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Editorial content card
  card-editorial:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 32px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.focus}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  # Price tag
  price-tag:
    textColor: "{colors.ink}"
    typography: "{typography.price}"
---

# Odd Ritual Golf Design System

## Overview

Odd Ritual Golf is heritage apparel dressed as understated luxury — a South African golf-meets-streetwear brand whose website reads like an editorial lookbook rather than a checkout funnel. The canvas is a warm near-white milk tone (`{colors.background}`) rather than clinical white, an immediate signal that this is craft and culture, not commodity. Deep charcoal ink (`{colors.ink}`) carries every word, and full-bleed monochromatic photography does the emotional heavy lifting. The design's confidence comes from restraint: enormous whitespace, no gradients, no shadow theatrics, and color used sparingly enough that when navy or maroon appears, it lands.

Type is the brand's primary voice. Display moments lean on a high-contrast serif (Playfair Display as the closest Google match) set large with tight tracking — the editorial, heritage register. Everything functional drops to a clean geometric grotesque (Jost) with generously spaced uppercase eyebrows and button labels. This serif-display-over-grotesque-body pairing is the single most recognizable move: it lets the brand feel both old-world (the ritual, the heritage) and modern (the streetwear cut).

The accent palette is small and deliberate. A heritage navy (`{colors.primary}`), a club maroon (`{colors.maroon}`), a muted gold (`{colors.gold}`) for fine detailing, and a cream (`{colors.cream}`) tone that echoes the canvas. None of these shout; they are crest colors, applied to small surfaces — an eyebrow, a hover state, a hairline. The warm neutral scale (stone family) leans slightly tan rather than pure gray, keeping the whole system on the warm side of the spectrum.

Corners are squared. Buttons, product cards, and inputs default to `{rounded.none}` — sharp, tailored edges that reinforce the apparel-and-craft positioning over soft consumer-app friendliness. CTAs are quiet: solid charcoal blocks, hairline outlines, or bare uppercase text links, never pill-shaped or candy-colored.

**Key Characteristics:**
- Warm milk-white canvas (`{colors.background}`), not clinical white — craft over commodity
- Editorial high-contrast serif display (Playfair) over clean geometric grotesque body (Jost)
- Wide-tracked uppercase eyebrows and button labels (`{typography.eyebrow}`, `{typography.button-ui}`)
- Squared corners throughout (`{rounded.none}`) — tailored, not soft
- Small crest-color accent set: heritage navy, club maroon, muted gold, cream
- Warm-leaning neutral (stone) scale rather than true grays
- Full-bleed monochromatic photography carries the emotion; chrome stays quiet
- Text-only and outline CTAs preferred over loud filled buttons

## Colors

### Canvas & Ink
- **Milk** (`{colors.background}`): Warm near-white page background. The brand's signature canvas.
- **Surface** (`{colors.surface}`): Pure white for product imagery framing and editorial cards.
- **Charcoal** (`{colors.ink}`): Primary text, headings, the default solid CTA fill.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Heritage Accents
- **Heritage Navy** (`{colors.primary}`): Crest color — links, primary hover, restrained accent surfaces.
- **Club Maroon** (`{colors.maroon}`): Secondary heritage accent, eyebrow text, link hover.
- **Muted Gold** (`{colors.gold}`): Fine detailing, dividers, premium markers.
- **Cream** (`{colors.cream}`): Tonal badge backgrounds, soft section tints.

### Neutral Scale (warm)
- **Stone 900** (`{colors.stone-900}`): Darkest ink.
- **Stone 700** (`{colors.stone-700}`): Strong secondary text.
- **Stone 500** (`{colors.stone-500}`): Muted text, captions.
- **Stone 300** (`{colors.stone-300}`): Hairline borders on dark imagery.
- **Stone 200** (`{colors.stone-200}`): Dividers, subtle outlines.
- **Stone 100** (`{colors.stone-100}`): Soft section background tint.

### Functional
- **Border** (`{colors.border}`): Default hairline border, warm-toned.
- **Border Strong** (`{colors.border-strong}`): Charcoal outline on outline buttons and inputs.
- **Link** (`{colors.link}`): Heritage navy links.
- **Link Hover** (`{colors.link-hover}`): Maroon on hover.
- **Focus** (`{colors.focus}`): Navy keyboard focus ring.

## Typography

### Font Family
- **Display**: `Playfair Display`, with fallbacks: `Georgia, serif` — editorial heritage register.
- **Body / UI**: `Jost`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — clean geometric grotesque.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — lookbook impact |
| `display` | Large editorial statements |
| `section-heading` | Collection and section titles |
| `card-title` | Product names |
| `eyebrow` | Wide-tracked uppercase kicker labels |
| `body-large` | Story and intro copy |
| `body` | Standard reading text |
| `body-small` | Supporting UI text |
| `price` | Product prices |
| `button-ui` | Uppercase tracked button + nav labels |
| `caption` | Metadata, fine print |

### Principles
- **Serif announces, grotesque informs**: Display headlines are Playfair serif; all functional and reading text is Jost. Never mix the two roles.
- **Wide tracking on uppercase**: Eyebrows and buttons use +1.5px to +2px letter-spacing — the editorial, considered feel.
- **Tight tracking on serif display**: Large serif headings pull slightly negative (-0.5px to -1px) for a confident, set-type look.
- **Restrained weights**: 400 for reading, 500 for UI/emphasis, 600 for serif display. No heavy black weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px. Section gaps are generous (`{spacing.4xl}`–`{spacing.5xl}`), giving the lookbook its airy, gallery pacing.

### Grid & Container
- Max content width: approximately 1280px, with full-bleed photographic breakouts
- Hero: full-width imagery with overlaid serif headline and quiet CTA
- Product grid: 2–4 column, edge-to-edge imagery, minimal card chrome
- Collections: horizontal-scroll carousels

### Whitespace Philosophy
- **Lookbook pacing**: Large vertical breathing room between sections (`{spacing.4xl}`+). The page is meant to be scrolled like a magazine.
- **Imagery does the work**: Full-bleed monochromatic photography carries emotion; surrounding chrome stays quiet and minimal.
- **Squared rhythm**: Sharp corners and hairline rules create a tailored, structured grid feel.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, imagery, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, input outlines |
| Strong rule (Level 1b) | `1px solid {colors.border-strong}` | Outline buttons, emphasized inputs |
| Focus (Accessibility) | `2px solid {colors.focus}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Odd Ritual avoids shadows almost entirely. Separation comes from hairline borders, whitespace, and the contrast between warm milk sections and full-bleed photography — not from elevation. The aesthetic is flat, printed, editorial.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs — the squared default |
| `xs` | 2px | Tonal badges |
| `sm` | 4px | Editorial cards, soft containers |
| `md` | 6px | Occasional rounded media |
| `lg` | 8px | Larger soft panels |
| `pill` | 9999px | Reserved — rarely used |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid charcoal block, milk text, squared, wide-tracked uppercase label. The default CTA.
- **`button-outline`** — Milk surface, charcoal hairline border, inverts to solid charcoal on hover.
- **`button-text`** — Bare uppercase tracked text link — the quietest, most-used CTA.

### Badges
- **`badge`** — Cream background, maroon eyebrow text, near-square corners. Heritage kicker.

### Cards
- **`card`** — Product card: white surface, edge-to-edge imagery, squared corners, minimal chrome.
- **`card-editorial`** — Soft stone surface with padding for story/content blocks.

### Inputs
- **`input`** — White surface, charcoal hairline border, squared. Focus switches the border to navy.

### Navigation
- **`nav-bar`** — Milk background, charcoal uppercase tracked links, hairline bottom rule.

### Distinctive Components
- **Full-bleed hero**: Monochromatic photography with an overlaid Playfair serif headline and a single quiet text CTA.
- **Collection carousel**: Horizontal-scroll product strip with squared, chrome-light cards.

## Do's and Don'ts

### Do
- Use the warm milk canvas (`{colors.background}`), not pure white
- Pair Playfair serif display with Jost grotesque body — serif announces, grotesque informs
- Track uppercase eyebrows and buttons wide (+1.5px to +2px)
- Keep corners squared (`{rounded.none}`) on buttons, cards, and inputs
- Reserve navy and maroon for small crest-color accents and hover states
- Let full-bleed photography carry the emotion; keep chrome quiet
- Prefer outline and text CTAs over loud filled buttons

### Don't
- Don't use pill-shaped or candy-colored buttons — squared and quiet only
- Don't introduce gradients or heavy shadows — the system is flat and printed
- Don't set body or reading text in the serif — Jost only for functional text
- Don't use true neutral grays — keep the scale warm (stone family)
- Don't over-apply the accent colors; they are crest details, not fields
- Don't crowd sections — the lookbook pacing depends on whitespace

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column, stacked imagery, hamburger nav |
| Tablet | 600–1024px | 2-column product grid, condensed padding |
| Desktop | 1024–1280px | Full 3–4 column grid, full layout |
| Large Desktop | >1280px | Centered max-width with full-bleed photo breakouts |

### Touch Targets
- Buttons use comfortable padding (15–16px vertical)
- Nav links tracked wide with adequate tap spacing
- Carousels are swipe-driven on touch devices

### Collapsing Strategy
- Hero: serif headline scales down, imagery stays full-bleed
- Navigation: horizontal uppercase links → hamburger menu
- Product grid: 4-column → 2-column → single column
- Collection carousels: maintain horizontal swipe at all sizes
- Section spacing: `{spacing.5xl}` → `{spacing.3xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Milk `{colors.background}`
- Heading text: Charcoal `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Charcoal fill `{colors.ink}`, milk text
- Accents: Heritage Navy `{colors.primary}`, Club Maroon `{colors.maroon}`
- Border: hairline `{colors.border}`
- Focus ring: Navy `{colors.focus}`

### Example Component Prompts
- "Create a full-bleed hero: monochromatic photo background, overlaid headline at 64px Playfair Display weight 600, letter-spacing -1px, color milk `{colors.background}`. Below it a wide-tracked uppercase text CTA at 13px Jost weight 500, letter-spacing 1.5px."
- "Design a product card: white surface, edge-to-edge image, squared corners (`{rounded.none}`), name at 20px Jost weight 500, price at 15px Jost weight 500 `{colors.ink}`. No shadow, hairline border `{colors.border}`."
- "Build a primary button: charcoal `{colors.ink}` fill, milk text, squared corners, 16px/32px padding, uppercase 13px Jost weight 500 with 1.5px tracking. Hover inverts fill to heritage navy `{colors.primary}`."
- "Create an eyebrow badge: cream `{colors.cream}` background, maroon `{colors.maroon}` text, 12px Jost weight 500 uppercase with 2px tracking, near-square corners."

### Iteration Guide
1. Start every layout on the warm milk canvas, not white
2. Serif (Playfair) for display only; Jost for everything functional and readable
3. Keep corners squared — `{rounded.none}` is the default for buttons, cards, inputs
4. Accent colors are crest details — small surfaces, hovers, hairlines, never large fields
5. Replace shadows with hairline borders and whitespace
6. Track uppercase eyebrows and button labels wide for the editorial feel

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Odd Ritual Golf. Brand names and trademarks belong to their respective owners.