Design Language

# Country Club — Design Language (portable)

A single-file reference for producing **anything** in the Country Club brand:
decks, marketing pages, store assets, social visuals, docs, native app UI.
Give this file to a designer or an AI session and it should be able to match
the brand without access to any repo.

Country Club is a private dining club: curated dinners that turn into real
professional relationships. The visual language is **Warm Editorial Luxury** —
deep ink on warm cream, one gold accent, serif headlines, calm motion. It
should feel like a beautifully set table, never like a SaaS dashboard.

---

## 1 · Color

Two complete themes. Never mix values across themes; never introduce new hues.

### Light (default)

| Role | Value |
|---|---|
| Page background | `#fffbf5` |
| Card / surface | `#fffefc` |
| Text (ink) | `#1c1a18` |
| Muted text | `#635951` |
| Subtle text | `#6f655c` |
| Border | `rgba(12,10,9,.08)` (hover `.16`) |
| Brand gold (graphic) | `#d4a84b` |
| Brand gold (text/icon on light) | `#7a560d` |
| Destructive | `#a83a2c` · Success `#3d7a4f` · Warning `#7a570d` · Info `#4a6fa5` |

### Dark

| Role | Value |
|---|---|
| Page background | `#151413` (app base `#131211`) |
| Card / surface | `#1c1b1a` |
| Text | `#faf9f6` |
| Muted text | `#a8a29e` |
| Border | `rgba(250,249,246,.09)` |
| Brand gold (text/icon on dark) | `#e5b84a` |

### Gold usage

Gold is a **garnish, not a fill**. One gold moment per composition: an accent
word, a small badge, a specular sphere, a primary CTA in marketing. Product-UI
primary buttons are **ink**, not gold. Surface tints are made by mixing ~10%
of the accent into transparent — never pastel swatches.

Signature gold gradients (marketing + illustration):

- Specular ball: `radial-gradient(circle at 36% 30%, #f8e3ae, #dcb156 48%, #a87f2c)`
- Gold surface/CTA: `linear-gradient(135deg, #ecc77a, #c89b3c)` with dark text `#241c0c`

---

## 2 · Typography

| Layer | Face | Rules |
|---|---|---|
| Headlines / titles | **Fraunces** (variable) | weight 500, `SOFT 50, WONK 0`, tight tracking (−0.01…−0.02em), optical size follows point size. Display-italic variant: weight 300 italic for editorial moments. |
| Body / UI | **DM Sans** (variable) | 400 body (line-height ~1.55), 500 labels, slight positive tracking on small sizes (+0.005…0.015em) |
| Code | JetBrains Mono | docs only |

Scale intent, not pixel law: display ≈ 40–72, headline ≈ 28–46, title ≈ 18–23,
body 16–18, label/caption 12–14. Headlines are sentence case, benefit-led,
never all-caps. The only uppercase element is the small gold **eyebrow label**
(12–14px, 600, letter-spacing 0.08–0.15em).

---

## 3 · Shape, space, depth

- **Radius scale**: 4 / 8 / 12 / 16 px (xs/sm/md/lg). `md` is the default;
  `sm` for elements *inside* a card; `lg` for page-level surfaces, modals,
  sheets. Sibling cards share the same radius. Full-round only for avatars
  (and marketing dots/spheres).
- **Spacing**: 4 / 8 / 12 / 16 / 24 / 32 / 48. Generous whitespace is part of
  the luxury — when unsure, add space, not decoration.
- **Depth — product UI**: **no shadows.** Separate surfaces with background
  steps + 1px borders/rings.
- **Depth — marketing / illustration**: soft, warm, blurred shadows are
  allowed and encouraged (e.g. `0 8px 28px rgba(30,22,10,.09)` light,
  `rgba(0,0,0,.5)` dark). This is the one deliberate split between product
  and marketing surfaces.
- Buttons (product): ink background, white text, 44px height, radius `md`,
  Fraunces-free (DM Sans 500). Outline buttons: surface bg + border.

---

## 4 · Motion

Calm and settled — nothing bounces, nothing zips.

- Durations: 100 / 200 / 320 / 480 / 660 ms (UI) — ambient illustration loops
  run ~3.6 s.
- Easing: standard `cubic-bezier(0.2, 0, 0, 1)`; emphasized `(0.3, 0, 0, 1)`.
- Ambient animation = small orbits, slow bobbing, gentle shimmer. Never
  rotation-spinners, never speed-ups. Always honor reduced-motion by freezing
  on a composed first frame.

---

## 5 · Illustration language — “Soft 3D & Blur” (clay)

All brand illustrations are soft 3D clay scenes with shallow depth of field.
17 canonical scenes exist in light + dark (web SVG components + Lottie JSON
for native). When creating *new* artwork, follow the recipe:

- **Volumes**: rounded clay forms in warm ink —
  light theme `linear-gradient(#4a443e → #211d1a)`,
  dark theme `(#524940 → #2e2924)` — plus cream volumes from the surface
  palette.
- **The gold moment**: one specular gold sphere or element per scene
  (radial gradient above).
- **Atmosphere**: 2–3 large blurred bokeh circles in warm gold/cream behind
  the subject; blur radius ≈ 5–6% of canvas width; opacity 0.4–0.5.
- **Depth of field**: foreground/background accents get Gaussian blur; the
  subject stays crisp.
- **Ground**: soft elliptical shadow under the subject; scenes float — avoid
  cropping the subject at canvas edges.
- Square canvas, subject centered, ~70% of frame.

---

## 6 · Marketing compositions (decks, store, web)

- **Grounds**: light `radial-gradient(140% 100% at 50% 0%, #fffbf5 58%, #f6ecdb)`;
  dark `(#181614 58%, #0f0e0c)`. Add 2–3 blurred gold glow circles
  (light: `#ecc77a`/`#f3e2b8`; dark: `#7a5f2a`/`#5f4a20`).
- **Formula**: gold eyebrow (small gold ball dot + uppercase brand label) →
  Fraunces headline (500, −0.02em, line-height ~1.05) → one muted subline →
  hero object (device mockup, photo, or clay scene).
- **Device mockup**: notchless rounded slab (reads as iOS *and* Android),
  clay bezel `linear-gradient(155deg, #564d43 0%, #4a443e 12%, #2c2823 55%, #191512 100%)`,
  thin gold side buttons, screen radius ≈ bezel-outer minus bezel. Screens
  show **real app screenshots** — never fabricated UI in store assets.
- **Copy voice**: editorial, confident, human. Benefit-led headlines
  (“Dinner with remarkable people”, “Evenings worth dressing up for”), short
  sublines, no feature-list jargon, no exclamation marks.

---

## 7 · Decks & presentations — “an evening at the club”

Decks, keynotes, and sales presentations are **dark-first**: near-black warm
ground (`#131211`), cream text (`#faf9f6`), muted body (`#aaa39a`), gold
accents (`#e5b84a` text / `#c89b3c` graphic). The room the deck describes is
candle-lit; the slides should feel like it.

**Ground.** Every slide carries 2–3 large warm glows (blurred `#6d5325` /
`#4a3917` circles at low opacity, mostly off-canvas) plus a subtle dark
vignette at the edges. Hero slides (cover, ask, dividers) get stronger glow.

**Slide anatomy — the kicker device.** Each content slide opens with a small
gold specular ball + gold tracked eyebrow + a hairline rule running to the
right margin. Footer: confidential line left (faint), page number right
(gold). Nothing else repeats slide to slide.

**Editorial grid, not card grids.** Columns are separated by whitespace and
short gold rules (34×2 px above each column title), not boxes. Cards are
reserved for genuinely contained things: pricing tiers, people, dense appendix
panels. Hairline rules (`rgba(250,249,246,.06–.11)`) do the structural work.

**Numbers are the drama.** Statistics set in Fraunces 500 at display size
(56–74 px slide-relative), gold, tabular numerals, with a hairline rule
between numeral and caption. Prefer asymmetric stat walls (2×2, offset pairs)
over equal-width rows of boxes.

**One inverted moment per deck.** At the single most important argument
(e.g. the moat), invert: a cream panel (`#f7f1e4`, ink text, thin gold
border) on the dark slide. Because it is the only light surface in the deck,
it carries enormous emphasis — never use it twice.

**Quotes** set in Fraunces italic at ~24 px slide-relative, cream, no box.
**Timelines** are a gold hairline with specular-ball nodes, the active node
larger. **Illustrations** use dark-variant clay scenes, floating near the
headline or in hero corners at partial opacity — one per slide at most, and
only where the slide has air.

**Slide sizing baseline**: compositions are designed on a 1280×720 canvas;
all sizes above scale proportionally at other resolutions.

---

## 8 · Hard don’ts

1. No hues outside the palette (no blues/purples/teals as accents).
2. No shadows in product UI; no shadow-free flat marketing either — marketing
   gets *soft* depth, not Material elevation.
3. Gold never as body text on cream except `#7a560d` (light) / `#e5b84a` (dark).
4. No all-caps headlines; no font besides Fraunces / DM Sans (+ mono in docs).
5. No `rounded-full` pills in product UI (marketing chips may be fully round).
6. No spinners or fast/bouncy motion; loops are ambient and slow.
7. One gold moment per composition — if everything is gold, nothing is.
8. Illustrations float — never hard-crop a clay subject against an edge.

---

*Sources of truth: `AppCountryClub-Web/DESIGN.md` (full token schema),
`AppCountryClub-Web/src/index.css` (CSS variables),
`AppCountryClub-Web/scripts/illustrations/scenes.mjs` (illustration source),
`AppCountryClub-Web/src/assets/lottie/` (native animation exports). If this
file disagrees with those, those win — then update this file.*