---
version: alpha
name: Old Tom Capital
description: Institutional gravitas with editorial restraint — a near-white paper canvas, deep charcoal ink, and a single fairway-green accent. Bold compressed sans-serif headlines, sharp zero-radius edges, numbered "Fig." captions and generous gallery whitespace position golf as an institutional asset class.

colors:
  # Canvas + ink
  background: "#f6f4ef"
  surface: "#ffffff"
  surface-soft: "#efece4"
  ink: "#1a1a17"
  ink-pure: "#000000"
  ink-secondary: "#5c5a53"
  ink-muted: "#8a877d"

  # Accent — fairway green
  primary: "#1f4d2e"
  primary-hover: "#163823"
  accent-soft: "#e3e8df"

  # Lines + borders
  border: "#d9d5cb"
  border-strong: "#1a1a17"
  divider: "#e6e2d8"

  # On-color
  on-primary: "#f6f4ef"
  on-ink: "#f6f4ef"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.6px
  caption-fig:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.2px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Primary CTA — dark institutional
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px

  # Secondary — outlined
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
    borderColor: "{colors.border-strong}"

  # Accent CTA — fairway green
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px

  # Eyebrow label
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"

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

  # Stat / metric card
  card-metric:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.section-heading}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.divider}"

  # Fig. caption block
  caption-block:
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption-fig}"

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

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

  # Badge / tag
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 6px 12px
---

# Old Tom Capital Design System

## Overview

Old Tom Capital presents golf as an institutional asset class, and its design system carries that thesis in every choice — restrained, editorial, and quietly confident. The canvas is a warm near-white paper tone (`{colors.background}`) rather than pure white, lending the page the texture of a printed prospectus or an annual report. Against it, a deep charcoal ink (`{colors.ink}`) handles all primary type, while a single fairway-green accent (`{colors.primary}`) marks eyebrows, links, and moments of emphasis. The palette is disciplined: paper, ink, and green, with nothing decorative competing for attention.

The typographic personality is built on contrast. Display headlines use a tall, condensed sans-serif (Anton, in the Oswald/Arial Narrow family) set at large sizes with tight tracking and near-1.0 line-height, so titles like "Golf's Institutional Platform" land with billboard weight. Beneath them, a clean humanist sans (Inter) carries body copy, sub-headings, and UI labels at relaxed line-heights for legibility. The pairing reads as editorial finance — the headline shouts, the body reassures.

What makes the system distinctive is its print-magazine grammar: numbered "Fig. A" captions, small letterspaced eyebrows, and a strict zero-radius geometry. Edges are sharp throughout — buttons, cards, inputs, and image frames all use square corners (`{rounded.none}`), reinforcing the institutional, document-like tone. Pill shapes are reserved for the rare avatar or status dot. Whitespace does the heavy structural work, with generous vertical rhythm between full-width sections.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`), not pure white — prospectus texture
- Deep charcoal ink (`{colors.ink}`) for all primary type
- Single fairway-green accent (`{colors.primary}`) for eyebrows, links, emphasis
- Tall condensed display sans (Anton/Oswald) with tight tracking for billboard headlines
- Inter for body, sub-headings, and UI — humanist legibility
- Strict zero-radius geometry — sharp, document-like edges everywhere
- Numbered "Fig." captions and letterspaced eyebrows — print-magazine grammar
- Generous gallery whitespace as the primary structural device

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): Warm near-white page background.
- **Surface** (`{colors.surface}`): Pure white for cards lifted off the paper canvas.
- **Surface Soft** (`{colors.surface-soft}`): Subtle warm tint for alternating bands.
- **Ink** (`{colors.ink}`): Charcoal — all primary text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy.
- **Ink Muted** (`{colors.ink-muted}`): Fig. captions, metadata.

### Accent
- **Fairway Green** (`{colors.primary}`): Eyebrows, links, accent CTA, emphasis.
- **Green Hover** (`{colors.primary-hover}`): Pressed/hover state for green elements.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for badges and tags.

### Lines & Borders
- **Border** (`{colors.border}`): Card outlines, dividers.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons, emphasized rules.
- **Divider** (`{colors.divider}`): Light section separators, nav underline.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque), fallbacks `Oswald, Arial Narrow, sans-serif`
- **Text/UI**: `Inter`, fallbacks `Helvetica Neue, Arial, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 88px condensed hero — billboard impact |
| `section-heading` | Section titles, large stat numbers |
| `sub-heading` | Inter 28px sub-sections |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Secondary UI text |
| `eyebrow` | Letterspaced labels above headings |
| `caption-fig` | "Fig. A" numbered captions |
| `button-ui` | Buttons, nav links — uppercase letterspaced |

### Principles
- **Condensed display, humanist body**: Anton compresses headlines; Inter relaxes for reading. The contrast is the identity.
- **Tight headline tracking**: Display sizes use negative letter-spacing and near-1.0 line-height for dense, weighty titles.
- **Letterspaced labels**: Eyebrows and buttons use positive tracking (1.2px–1.6px) and small caps energy to signal editorial finance.
- **Fig. caption voice**: Numbered captions in muted ink connect marketing to the brand's diagrammatic, document-like tone.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling to a dramatic `{spacing.4xl}` (140px) for between-section gallery gaps.

### Grid & Container
- Max content width approximately 1280px
- Hero: full-width single column, condensed headline left- or center-set
- Feature/engine sections: numbered 2–3 column grids
- Full-width image bands break out edge-to-edge

### Whitespace Philosophy
- **Gallery rhythm**: Large vertical padding between sections (`{spacing.3xl}`–`{spacing.4xl}`). Empty space signals institutional confidence.
- **Print discipline**: Sharp edges, ruled dividers, and numbered captions create a prospectus feel rather than a typical SaaS page.
- **Quiet bands**: Sections alternate paper and white surfaces, separated by hairline dividers, not heavy chrome.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, image frames — the default |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Minor softening where needed |
| `pill` | 9999px | Avatars, status dots only |

## Components

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

### Buttons
- **`button-primary`** — Charcoal fill, paper text, square corners, uppercase letterspaced label. Hovers to fairway green.
- **`button-secondary`** — Paper surface with a strong charcoal outline.
- **`button-accent`** — Fairway-green fill for the marquee "Invest With Us" CTA.

### Cards
- **`card`** — White surface lifted off the paper canvas, hairline border, zero radius.
- **`card-metric`** — Large condensed stat number over a label, document-style.

### Editorial Elements
- **`eyebrow-label`** — Letterspaced green label above headings.
- **`caption-block`** — "Fig. A" numbered captions in muted ink.
- **`badge`** — Soft-green tinted tag, square corners.

### Inputs & Nav
- **`input`** — White surface, square corners, border to green on focus.
- **`nav-bar`** — Paper background, uppercase letterspaced links, hairline bottom divider.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) — never pure white for the page
- Keep edges sharp — zero radius is the system's signature
- Reserve fairway green for accents, eyebrows, links, and the marquee CTA
- Set headlines in condensed Anton with tight tracking
- Use letterspaced eyebrows and "Fig." captions for editorial tone
- Let whitespace carry structure between sections

### Don't
- Don't round corners on buttons, cards, or inputs
- Don't introduce additional accent colors — paper, ink, green only
- Don't use Anton for body text — it's display-only
- Don't crowd sections; the gallery whitespace is load-bearing
- Don't use drop shadows for depth — rely on hairline borders and surface tone

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked stats |
| Tablet | 600–1024px | 2-column engine grids, reduced section padding |
| Desktop | 1024–1280px | Full multi-column layout |
| Large | >1280px | Centered, maximum margins |

### Collapsing Strategy
- Hero: 88px condensed display scales down, retains tight tracking
- Navigation: letterspaced links collapse to a menu toggle
- Engine/feature grids: 3-column → 2 → single
- Section spacing: 140px → ~64px on mobile
- Full-width image bands maintain edge-to-edge treatment

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent / links / eyebrows: Fairway Green `{colors.primary}`
- Primary CTA: Charcoal `{colors.ink}` → green on hover
- Borders: `{colors.border}` (hairline), `{colors.border-strong}` (outlined buttons)

### Example Component Prompts
- "Create a hero on warm paper (`{colors.background}`). Eyebrow in fairway green, 12px Inter weight 600, letter-spacing 1.6px. Headline in Anton 88px, line-height 0.96, letter-spacing -1.5px, color `{colors.ink}`. Square-corner charcoal CTA (`{colors.ink}`, 16px 28px padding, uppercase letterspaced label) that hovers to `{colors.primary}`."
- "Design a metric card: paper background, hairline divider border, zero radius, 32px padding. Stat number in Anton 56px `{colors.ink}`, label below in Inter 14px `{colors.ink-secondary}`."
- "Build a 'Fig. A' caption: 12px Inter weight 500, letter-spacing 0.4px, color `{colors.ink-muted}`, set under an image frame with square corners."

### Iteration Guide
1. Default every corner to zero radius — sharpness is the brand
2. Condensed Anton for headlines, Inter for everything else
3. Green is an accent, never a surface fill outside the marquee CTA
4. Warm paper, not white — the texture signals institutional finance
5. Whitespace and hairline rules carry structure; avoid shadows

---

## 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 Old Tom Capital. Brand names and trademarks belong to their respective owners.