---
version: alpha
name: Les Amis
description: Warm editorial minimalism for a curated social club — soft cream canvas with deep ink text, a quiet terracotta accent, a refined serif for headlines paired with a clean grotesque for body, generous whitespace, and gently rounded pill CTAs that feel intimate rather than corporate.

colors:
  # Canvas + ink
  background: "#faf6f0"
  surface: "#ffffff"
  surface-soft: "#f3ede4"
  ink: "#1f1b16"
  ink-secondary: "#5c554c"
  ink-muted: "#8a8278"

  # Warm accent
  primary: "#c2613f"
  primary-hover: "#a84f31"
  accent-blush: "#e8d3c4"
  accent-sage: "#9aa089"

  # Borders + lines
  border: "#e3dacd"
  border-strong: "#d2c6b4"

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

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.12px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.72px
  card-title:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.24px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.6px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.accent-blush}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Les Amis Design System

## Overview

Les Amis is a curated social club, and its visual identity is built to feel like a warm dinner invitation rather than a software product. The canvas is a soft cream (`{colors.background}`) — not pure white, but a paper-like off-white that carries warmth and reads as analog and human. Against it, a near-black warm ink (`{colors.ink}`) handles text, giving the page the quiet confidence of a printed editorial spread. The whole system trades the cold precision of tech minimalism for something gentler and more intimate.

The typographic pairing is the heart of the identity. Headlines run in a high-contrast serif (Fraunces) at large sizes with gentle negative tracking, lending the brand a literary, hospitable voice — the feeling of a handwritten note or a magazine masthead. Body copy switches to a clean neutral grotesque (Inter), keeping longer reading passages legible and modern. This serif-display / sans-body contrast is the signature move: emotional, expressive headings over calm, functional text.

Color is used sparingly and warmly. A single terracotta accent (`{colors.primary}`) appears on hover states and select highlights, echoing the blush and sage tones of the club's event photography. Most chrome stays neutral — cream surfaces, soft tan borders (`{colors.border}`), and ink text — so that imagery and copy carry the emotion. Buttons are fully rounded pills with generous padding, reinforcing an approachable, members-club feeling over anything sharp or corporate.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of pure white — paper-like, analog warmth
- High-contrast serif (Fraunces) for headlines, clean grotesque (Inter) for body — editorial pairing
- Single terracotta accent (`{colors.primary}`) used sparingly on hover and highlights
- Soft tan borders (`{colors.border}`) and muted ink scale — quiet, hospitable chrome
- Fully rounded pill buttons with generous padding — intimate, not corporate
- Generous whitespace and editorial rhythm letting photography breathe

## Colors

### Canvas & Ink
- **Cream Canvas** (`{colors.background}`): Page background — warm off-white, the brand's defining surface.
- **White Surface** (`{colors.surface}`): Cards and elevated panels lifted slightly above the cream.
- **Soft Surface** (`{colors.surface-soft}`): Tonal cream for feature blocks and section bands.
- **Warm Ink** (`{colors.ink}`): Primary text and dark CTAs — near-black with a warm cast.
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting body copy and descriptions.
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata, placeholder text.

### Accent
- **Terracotta** (`{colors.primary}`): The brand accent — hover states, highlights, select links.
- **Terracotta Hover** (`{colors.primary-hover}`): Deeper terracotta for pressed/hover depth.
- **Blush** (`{colors.accent-blush}`): Soft pink tint for badges and warm fills.
- **Sage** (`{colors.accent-sage}`): Muted green secondary accent from event imagery.

### Borders
- **Border** (`{colors.border}`): Soft tan hairlines, card outlines, dividers.
- **Border Strong** (`{colors.border-strong}`): Heavier tan for inputs and secondary buttons.

## Typography

### Font Family
- **Display**: `Fraunces`, with fallbacks `Georgia, serif` — high-contrast literary serif for headings.
- **Body**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — neutral grotesque for reading text and UI.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero — invitation-style headline |
| `section-heading` | Section titles in serif |
| `card-title` | Card and event titles |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `button-ui` | Buttons and links |
| `eyebrow` | Uppercase tracked labels above headings |
| `caption` | Metadata, badges, tags |

### Principles
- **Serif headlines, sans body**: Expressive Fraunces for emotion, calm Inter for legibility.
- **Gentle negative tracking on display**: -1.12px at hero size keeps serif headlines composed, never cramped.
- **Tracked uppercase eyebrows**: 1.6px letter-spacing on small labels adds editorial polish.
- **Weight restraint**: 400–500 dominate; the serif carries presence through size and contrast, not bold weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with an editorial jump to large values (`{spacing.3xl}`, `{spacing.4xl}`) for generous section breathing room.

### Grid & Container
- Max content width approximately 1200px, centered
- Hero: single-column, left- or center-aligned with large serif headline over cream
- Sections: full-width photography alternating with text-and-card blocks
- Cards arranged in 2–3 column grids on desktop

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical spacing (`{spacing.3xl}`–`{spacing.4xl}`) between sections lets imagery and copy feel curated.
- **Warm over crisp**: The cream canvas and soft borders avoid the sterile feel of pure-white tech layouts.
- **Photography-forward**: Layout exists to frame experiential imagery; chrome stays quiet.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery |
| `sm` | 4px | Small inline elements |
| `md` | 8px | Inputs, small containers |
| `lg` | 16px | Cards |
| `xl` | 24px | Feature blocks |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Warm ink fill, cream text, full pill. Hovers to terracotta (`{colors.primary}`).
- **`button-secondary`** — White surface with strong tan border, ink text, full pill.

### Badges
- **`badge`** — Blush fill, ink text, full pill — soft warm status markers.

### Cards
- **`card`** — White surface lifted above cream, soft tan border, 16px radius.
- **`card-feature`** — Tonal cream surface, larger 24px radius and padding for highlighted blocks.

### Inputs
- **`input`** — White surface, strong tan border, 8px radius, comfortable padding.

### Navigation
- **`nav-bar`** — Cream background, ink links, soft border-bottom. "Join now" pill CTA right.

## Do's and Don'ts

### Do
- Use the cream canvas (`{colors.background}`) — warmth is the brand
- Pair Fraunces serif headlines with Inter body
- Keep the terracotta accent (`{colors.primary}`) sparing — hover and highlight only
- Use fully rounded pill buttons with generous padding
- Let photography and whitespace carry the emotion

### Don't
- Don't use pure white (`#ffffff`) as the page background — it breaks the warm tone
- Don't set headlines in the sans body font — the serif is the voice
- Don't flood the UI with terracotta — restraint keeps it elegant
- Don't use sharp-cornered rectangular buttons — pills feel intimate
- Don't crowd sections — editorial spacing is part of the identity

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced section spacing |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | >1024px | Full layout, 1200px max width, 3-column grids |

### Collapsing Strategy
- Hero serif scales from 56px down while keeping proportional tracking
- Navigation links collapse to a menu toggle; "Join now" pill persists
- Card grids: 3-column → 2-column → single column
- Section spacing relaxes from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream `{colors.background}`
- Heading text: Warm Ink `{colors.ink}`
- Body text: Secondary Ink `{colors.ink-secondary}`
- Accent / hover: Terracotta `{colors.primary}`
- Border: Soft tan `{colors.border}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}`. Headline in Fraunces 56px weight 400, letter-spacing -1.12px, color `{colors.ink}`. Lead paragraph in Inter 20px weight 400, color `{colors.ink-secondary}`. Dark pill CTA (`{colors.ink}` fill, cream text, 9999px radius, 14px 28px padding) that hovers to terracotta `{colors.primary}`."
- "Build a card: white surface `{colors.surface}` on cream, 1px `{colors.border}`, 16px radius, 24px padding. Title in Fraunces 24px weight 500, body in Inter 17px `{colors.ink-secondary}`."
- "Make a blush badge: `{colors.accent-blush}` fill, `{colors.ink}` text, 9999px radius, 4px 12px padding, 12px Inter weight 500."

---

## 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 Les Amis. Brand names and trademarks belong to their respective owners.