---
version: alpha
name: Montamont
description: Cinematic Alpine editorial — full-bleed video, an ivory paper canvas with near-black ink, wide-tracked uppercase navigation, and a quiet serif/sans pairing that lets photography and air carry the page.
colors:
  # Canvas + ink
  background: "#f6f4ef"
  surface: "#ffffff"
  surface-soft: "#efece5"
  ink: "#1a1a18"
  ink-secondary: "#5c5a54"
  ink-muted: "#8a877f"

  # Accent — restrained alpine
  primary: "#3a4a3f"        # deep pine, used on CTAs / links
  primary-hover: "#2a382f"
  accent-stone: "#9a9486"
  accent-sky: "#b9c4c9"

  # Lines + overlay
  border: "#ded9cf"
  border-strong: "#c7c1b4"
  overlay-scrim: "#1a1a18"   # photo/video scrim, flattened to opaque
  overlay-soft: "#3a3a36"

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

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2.4px
  nav-label:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.2px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.8px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.2px

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

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

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

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 24px 40px
    borderColor: "{colors.border}"

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

  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

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

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  hero-eyebrow:
    textColor: "{colors.on-ink}"
    typography: "{typography.eyebrow}"

  cart-counter:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
---

# Montamont Design System

## Overview

Montamont is an Alpine travel and lifestyle brand, and its website behaves like a printed travel journal that happens to move. The canvas is a warm ivory paper tone (`{colors.background}`) rather than clinical white, and near-black ink (`{colors.ink}`) sits on it with the softness of letterpress. The whole interface is built to disappear behind full-bleed Vimeo footage of mountain light, air, and ascent — UI chrome is kept to the absolute minimum so the photography and video carry the emotional weight.

The typographic system is a quiet two-voice pairing. A high-contrast serif (Cormorant Garamond as the closest Google match) handles all display and headline work, lending the romantic, editorial quality of a luxury magazine masthead. A light geometric sans (Jost) handles navigation, body copy, and interface labels, almost always at low weight (300) for body and with wide positive letter-spacing on uppercase labels. This serif-display / sans-utility split is the brand's core move.

Where Montamont differs from generic minimalism is its devotion to wide-tracked uppercase as connective tissue. Navigation, eyebrows, buttons, and captions all share the same DNA: uppercase Jost with 1.2px–2.4px letter-spacing, sized small and set quiet. Against the serif headlines this creates a deliberate tension — flowing, near-cursive display type above precise, spaced-out lettering. Borders are hairline and stone-toned (`{colors.border}`), corners are square (`{rounded.none}` dominates), and the accent is a single deep pine green (`{colors.primary}`) used sparingly on CTAs and links so nothing competes with the imagery.

**Key Characteristics:**
- Warm ivory paper canvas (`{colors.background}`) instead of pure white — print-journal warmth
- Serif display (Cormorant Garamond) over light geometric sans (Jost) — magazine masthead pairing
- Wide-tracked uppercase as connective tissue: nav, eyebrows, buttons, captions all spaced 1.2px–2.4px
- Light body weight (300) with generous 1.7 line-height — airy, breathable reading
- Square corners everywhere (`{rounded.none}`); pills reserved for tiny counters/badges
- Single restrained accent — deep pine green (`{colors.primary}`) on CTAs and links only
- Full-bleed Vimeo video and lifestyle photography as the primary surface; UI recedes

## Colors

### Canvas & Ink
- **Ivory Paper** (`{colors.background}`): The warm off-white page canvas — the brand's signature base.
- **Surface White** (`{colors.surface}`): Pure white for cards and inputs that need to lift slightly off the ivory.
- **Soft Stone** (`{colors.surface-soft}`): Subtle sectional tint, alternating bands.
- **Ink** (`{colors.ink}`): Primary near-black text and outline buttons.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, placeholders.

### Accent
- **Pine** (`{colors.primary}`): The single accent — CTA fills, links, cart counter.
- **Pine Hover** (`{colors.primary-hover}`): Darker pine on hover.
- **Stone** (`{colors.accent-stone}`): Muted earthy tone for secondary marks.
- **Alpine Sky** (`{colors.accent-sky}`): Cool desaturated blue for rare atmospheric accents.

### Lines & Overlay
- **Border** (`{colors.border}`): Hairline stone dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Input and emphasized borders.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Dark scrim over video/photography for text legibility.

### On-Color
- **On Primary** (`{colors.on-primary}`): Ivory text on pine fills.
- **On Ink** (`{colors.on-ink}`): Ivory text on ink/scrim surfaces.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — high-contrast romantic serif.
- **UI / Body**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — light geometric sans.

### 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 over video |
| `section-heading` | 40px serif section titles |
| `card-title` | 26px serif card/product titles |
| `eyebrow` | Wide-tracked uppercase kicker above headings |
| `nav-label` | Uppercase navigation links |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, form labels |
| `button-ui` | Uppercase tracked button labels |
| `caption` | Metadata, counters, fine print |

### Principles
- **Two voices, strict roles**: serif (Cormorant Garamond) announces; sans (Jost) operates. Never mix the roles.
- **Wide tracking on uppercase**: every uppercase element carries 1.2px–2.4px letter-spacing — it is the brand signature.
- **Light is the default weight**: body sits at 300, headlines at 400 — nothing shouts; weight is earned.
- **Air over density**: 1.7 line-height on body, generous space lets the serif breathe.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) for full-section breathing room.

### Grid & Container
- Full-bleed hero and video sections run edge to edge
- Content max-width ~1200px, centered, with wide margins
- Product/stay cards in 2–3 column grids with hairline dividers
- Generous vertical rhythm between sections (`{spacing.3xl}`–`{spacing.4xl}`)

### Whitespace Philosophy
- **Air is the design**: like the brand promise of "light, air, and the ascent," whitespace carries the page.
- **Imagery first, chrome last**: UI elements stay small and quiet so video/photography dominate.
- **Square and aligned**: square corners and hairline borders keep the grid feeling like a printed spread.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Pine fill, ivory uppercase tracked label, square corners. The default CTA.
- **`button-outline`** — Ivory surface, 1px ink border, ink uppercase label. Secondary action.
- **`button-ghost`** — White surface with stone border, used on photography overlays.

### Navigation
- **`nav-bar`** — Ivory header, uppercase tracked Jost links, hairline bottom border.

### Cards
- **`card`** / **`card-product`** — White surface, square corners, hairline border. Serif title, sans body. Image leads, text follows.

### Inputs
- **`input`** — White surface, square, stone border. Focus darkens border to ink. Used in newsletter signup.

### Badges & Counters
- **`badge`** — Ink pill, ivory caption text, for small status marks.
- **`cart-counter`** — Tiny pine pill counter on the cart icon.

## Do's and Don'ts

### Do
- Pair Cormorant Garamond serif (display) with Jost sans (UI) — keep their roles separate
- Add 1.2px–2.4px letter-spacing to all uppercase labels
- Use the ivory canvas (`{colors.background}`), not pure white, as the base
- Keep body weight light (300) with airy 1.7 line-height
- Use square corners (`{rounded.none}`) on buttons, cards, inputs
- Let full-bleed video and photography carry the page; keep chrome minimal
- Reserve pine (`{colors.primary}`) for CTAs and links only

### Don't
- Don't introduce bright or multiple accent colors — pine is the only accent
- Don't round button or card corners — square is the system
- Don't set uppercase labels without wide tracking
- Don't use heavy body weights — light (300) is the reading default
- Don't crowd the layout — air and whitespace are non-negotiable
- Don't put serif on UI controls or sans on hero headlines

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, hamburger nav |
| Tablet | 600–1024px | 2-column card grids, condensed nav |
| Desktop | 1024–1400px | Full layout, 3-column grids, max content width |
| Large | >1400px | Centered, wide ivory margins |

### Collapsing Strategy
- Hero serif: 64px → ~36px on mobile, tracking holds proportionally
- Navigation: uppercase links → hamburger menu
- Card grids: 3-column → 2-column → single column
- Full-bleed video: maintains edge-to-edge, scrim deepens on mobile for legibility
- Section spacing: 96px–160px → ~48px on mobile

### Image Behavior
- Full-bleed Vimeo backgrounds with dark scrim (`{colors.overlay-scrim}`) for text contrast
- Lifestyle photography maintains aspect ratio with square framing
- Hero text stays ivory (`{colors.on-ink}`) over imagery at all sizes

---

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