# Concordia Design System v4 (21 Oct 2026). Supersedes the Fraunces/Inter/black system.

Source of truth for every Concordia web page, welcome pack, landing and itinerary. Assets live in `BTB/Concordia Brand/` (brand.css, fonts/, logo/). Built from the Concordia Brand Kit V3.1 (Karli, 15 Oct 2026) with Cal's two overrides on 21 Oct: dark green is **#072414** (not #0F2215) and the accent is gold **#AF7B3A** (replacing sand #C9B59A).

## 1. The look in one line
Cinematic travel, private correspondence, member editorial. Deep green or warm cream pages, one gold accent, a light serif for headlines, a script for one expressive phrase, Optima for everything you have to read. Photography of people and moments, not scenery.

## 2. Colour (exact values, nothing else)
| Token | Hex | Use |
|---|---|---|
| Green `--green` | `#072414` | Primary ink. Dark page backgrounds, hero scrims, text on cream. |
| Green 2 / 3 | `#0c2f1c` / `#123a24` | Cards and callouts sitting on green. |
| Cream `--cream` | `#F4F0E8` | Primary editorial paper (light pages), and text on green. |
| Gold `--gold` | `#AF7B3A` | THE accent. Eyebrows, one italic word per headline, rules, buttons, the mark. |
| Sage `--sage` | `#506252` | Secondary copy on cream. |
| Cream muted | `#CFC8B8` | Secondary copy on green. |
| Slate | `#6B7F8F` | Occasional travel accent chosen to suit a photograph. Never UI. |

Rules: one accent only (gold). Never pure black, never pure white. Dark pages = green + cream + gold. Light pages (documents, invitations) = cream + green + gold with sage for secondary. No `#0f0e0c`, `#c9a86a`, `#f3eee3` anywhere any more.

## 3. Type
- **Headlines: Times Now SemiLight** (`--serif`), weight 300, tight line height 1.05 to 1.1, one word italic in gold. The licensed font is still pending from Karli. Until it arrives we self-host a stand-in under the name "Concordia Serif" (the file Cal downloaded as TimesNow-Light.ttf is actually Source Serif 4 Light, OFL, so it is safe to embed). Swap the woff2 the day the real font lands, no CSS changes needed.
- **Script accent: Pinyon Script** (`--script`). One short expressive phrase per page, e.g. "Your next stay, personally arranged." Give it space. Never on faces, never for labels, never more than once per screen.
- **Body, labels, facts, buttons: Optima** (`--sans`). Sentence case for copy, short uppercase labels at 12px with 1.5px tracking (not 2.5px letterspaced mini-caps). Optima ships with every Apple device, which is most of our audience; the stack falls back to Candara / Gill Sans / system-ui elsewhere. Apple's licence does not allow embedding Optima as a webfont, so do not try.
- Sizes: hero `clamp(44px,7vw,78px)`, section titles `clamp(30px,3.8vw,46px)`, body 17 to 19px (never below 16px), mobile body 17px.

## 4. The mark
- **Official logo (21 Oct 2026):** crest + script "Concordia" + "Members' Club" descriptor, gold on green. Original artwork, never retyped, simplified or regenerated.
- Files in `BTB/Concordia Brand/logo/`: `concordia-lockup-gold.png` (transparent, gold #AF7B3A, for green and cream), `concordia-lockup-on-green.png` (social/avatar), `concordia-lockup.svg` (vector master, gold fill).
- Hero: lockup top-left, height 44 to 56px on desktop, 36px on mobile, clear space equal to the crest's width on all sides. Footer: lockup again, smaller.
- Crest alone only as the favicon on membership/offer/apply pages. Trip pages keep their trip emoji favicon.

## 5. Layout
- Full-bleed sections, centred 1180px column: `section{padding-inline:max(22px,calc((100% - 1180px)/2))}`. Never a page-level max-width wrapper.
- Everything left-aligned to the column. No centred heroes.
- Three compositions from the brand kit: **Cinematic** (full photo, one short headline, controlled contrast field for copy) for trip heroes; **Correspondence** (quiet cream paper, the mark, a Pinyon invitation, precise details) for invitations and documents; **Journal** (varied photo sizes, asymmetry, clear captions) for people and details.
- Cards: `--green-2`, 1px `--line`, 12px radius. Buttons: solid gold with green text, 8px radius, Optima 600. Hairline rules in gold or `--line`, never heavy borders.

## 6. Photography
People and behaviour first: conversations, shared tables, arrivals, hands, the room before guests arrive. Protect faces and hands from type. Crop with room for the headline. Compress to 1600px, `object-fit:cover`. Stock only for establishing scenes.

## 7. Copy rules (unchanged)
"Concordia" or "Concordia Members' Club". Never BTB. No em or en dashes. Never "old money", "brotherhood", "players". No exclamation marks. Contact: support@theconcordiaclub.com. Instagram @theconcordiaclub.

## 8. How to apply to a page
```html
<link rel="stylesheet" href="brand.css">   <!-- copy brand.css + fonts/ + logo/ into the site -->
<body>                                       <!-- or <body class="paper"> for a cream page -->
<div class="brand"><img src="logo/concordia-lockup-gold.png" alt="Concordia Members' Club"></div>
<div class="eyebrow">The trip</div>
<h2 class="title">Twelve nights. The Cape, then <em>the bush.</em></h2>
<p class="script" style="font-size:clamp(28px,4vw,44px);color:var(--gold)">Your next stay, personally arranged.</p>
```
Golden rule: green or cream, gold accent, Times Now headline, one Pinyon phrase, Optima copy, the original mark, people in the photos.