---
version: alpha
name: Explora Journeys
description: Ultra-luxury ocean travel rendered as quiet editorial — a warm sand-and-cream canvas, deep ocean-night blue ink, and muted gold accents, set in an elegant high-contrast serif display over a clean humanist sans, with soft generous radii and full-bleed cinematic photography.
colors:
  # Canvas + ink
  background: "#f4efe6"      # warm sand / cream canvas
  surface: "#ffffff"
  surface-soft: "#faf6ee"
  ink: "#1d2a3a"             # deep ocean-night blue, near-navy text
  ink-secondary: "#5a6573"   # muted slate for supporting copy
  ink-muted: "#8a8f97"

  # Brand accents
  primary: "#1d2a3a"         # ocean-night navy — primary CTA fill
  ocean: "#27486b"           # mid ocean blue
  gold: "#a78a52"            # muted antique gold accent
  gold-soft: "#c9b27e"       # lighter gilt for hairlines
  sand: "#e6dcc8"            # deeper sand tone for tints

  # Hairlines + borders
  border: "#ded4c2"          # warm border on cream
  border-soft: "#ebe3d4"
  divider: "#d8cdb8"

  # On-color
  on-primary: "#f4efe6"      # cream text on navy
  on-gold: "#1d2a3a"
  on-surface: "#1d2a3a"

  # States
  link: "#27486b"
  link-hover: "#a78a52"
  cta-hover: "#27486b"
  surface-hover: "#f0ebe0"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.5px
  display-section:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 2.4px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0px
  body-medium:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.2px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.6px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
  button-primary-hover:
    backgroundColor: "{colors.cta-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
    borderColor: "{colors.border}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
    borderColor: "{colors.ink}"
  badge:
    backgroundColor: "{colors.sand}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 40px
    borderColor: "{colors.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.gold}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 40px
    borderColor: "{colors.border-soft}"
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
---

# Explora Journeys Design System

## Overview

Explora Journeys presents ultra-luxury ocean travel as something closer to a slow-paced editorial spread than a typical cruise booking site. The whole system rests on a warm sand-and-cream canvas (`{colors.background}`) rather than the cold white most travel sites default to, immediately signaling warmth, hospitality, and old-world refinement. Against that cream, deep ocean-night navy (`{colors.ink}`) carries nearly all text and primary actions, and muted antique gold (`{colors.gold}`) appears sparingly as the single decorative accent — on hairlines, hover states, and small flourishes.

Typography is where the brand declares itself. A high-contrast display serif (Cormorant Garamond as the closest Google match to the brand's elegant didone-adjacent face) sets every headline at large, airy sizes with relaxed leading and light weights, evoking fine print advertising and luxury fashion houses. Beneath it, a geometric humanist sans (Jost, standing in for the brand's clean grotesque) handles body copy and UI at light weights (300) with generous line-height, plus an uppercase wide-tracked eyebrow style that labels sections like a magazine kicker.

The layout philosophy is cinematic and unhurried: full-bleed photography of ships, suites, and destinations dominates, framed by enormous vertical whitespace (`{spacing.3xl}`–`{spacing.4xl}`). Chrome is minimal — thin warm borders (`{colors.border}`) instead of heavy cards, pill-shaped buttons with wide letter-spaced uppercase labels, and soft radii that keep everything feeling crafted rather than clinical.

**Key Characteristics:**
- Warm sand/cream canvas (`{colors.background}`) instead of cold white — hospitality over clinical minimalism
- Deep ocean-night navy (`{colors.ink}`) as the near-universal ink and primary fill
- Muted antique gold (`{colors.gold}`) as the single restrained accent, used on hairlines and hover only
- High-contrast display serif headlines at light weights with airy leading
- Humanist sans body at weight 300 with generous line-height
- Uppercase wide-tracked (2.4px) eyebrow kickers labeling sections
- Pill-shaped buttons with letter-spaced uppercase labels
- Full-bleed cinematic photography framed by massive whitespace

## Colors

### Canvas + Ink
- **Sand Canvas** (`{colors.background}`): The warm cream page background — the brand's signature warmth.
- **White Surface** (`{colors.surface}`): Cards and panels that lift off the cream.
- **Soft Surface** (`{colors.surface-soft}`): Tinted cream for feature blocks.
- **Ocean-Night Ink** (`{colors.ink}`): Near-navy primary text, headings, and CTA fill.
- **Slate Secondary** (`{colors.ink-secondary}`): Supporting body copy.
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata.

### Brand Accents
- **Primary Navy** (`{colors.primary}`): Primary button fill, same ocean-night as ink.
- **Mid Ocean** (`{colors.ocean}`): Links, hover fills, secondary blue.
- **Antique Gold** (`{colors.gold}`): The lone decorative accent — hairlines, hover, flourishes.
- **Soft Gilt** (`{colors.gold-soft}`): Lighter gold for delicate dividers.
- **Sand Tint** (`{colors.sand}`): Deeper sand for badge/tile fills.

### Borders & Dividers
- **Warm Border** (`{colors.border}`): Hairline borders on cream.
- **Soft Border** (`{colors.border-soft}`): Even quieter divisions.
- **Divider** (`{colors.divider}`): Section rule lines.

### On-Color & States
- **On Primary** (`{colors.on-primary}`): Cream text on navy fills.
- **Link** (`{colors.link}`) / **Link Hover** (`{colors.link-hover}`): Ocean blue resolving to gold on hover.
- **CTA Hover** (`{colors.cta-hover}`): Navy buttons shift to ocean blue.
- **Surface Hover** (`{colors.surface-hover}`): Subtle cream darkening on hover.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — high-contrast elegant serif for all headlines.
- **Body / UI**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — geometric humanist sans at light weights.

### 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 — cinematic billboard impact |
| `display-section` | Major section titles |
| `heading` | Sub-section headings |
| `card-title` | Card and tile titles |
| `eyebrow` | Uppercase wide-tracked magazine kicker |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading copy (weight 300) |
| `body-medium` | Emphasized body, labels |
| `caption` | Metadata, fine print |
| `button-ui` | Uppercase letter-spaced button labels |

### Principles
- **Serif announces, sans informs**: Cormorant Garamond carries all emotional headline weight; Jost handles every functional word.
- **Light is luxurious**: Body runs at weight 300, headlines at 400–500 — lightness reads as refinement, never strain.
- **Airy leading**: Body line-height 1.65–1.7; headlines breathe at 1.08–1.25.
- **Kicker discipline**: The uppercase 2.4px-tracked eyebrow labels sections like an editorial masthead — never used for running text.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, escalating to dramatic `{spacing.3xl}`–`{spacing.4xl}` gaps between full-bleed sections.

### Grid & Container
- Max content width approximately 1280px, with full-bleed imagery breaking the container edge-to-edge
- Hero: full-viewport cinematic image with serif headline + uppercase eyebrow overlaid
- Feature sections: alternating image/text splits and 2–3 column tile grids

### Whitespace Philosophy
- **Editorial calm**: Enormous vertical padding lets each section breathe like a spread.
- **Image as hero**: Photography is the loudest element; type and chrome stay quiet around it.
- **Hairline separation**: Warm 1px borders and gold-soft rules divide content instead of heavy cards or shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, cream canvas | Page background, text blocks |
| Hairline | 1px `{colors.border}` | Cards, inputs, nav bottom |
| Soft lift | White surface + 1px `{colors.border}` | Feature cards over cream |
| Focus | `{colors.gold}` border on inputs | Keyboard/focus state |

Depth is deliberately whisper-level — the system favors warm hairlines and soft radii over drop shadows, keeping the editorial flatness intact.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery |
| `xs` | 2px | Inline tags |
| `sm` | 4px | Inputs, small fields |
| `md` | 8px | Small tiles |
| `lg` | 16px | Cards, feature blocks |
| `xl` | 24px | Large image containers |
| `pill` | 9999px | Buttons, badges |

## Components

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

### Buttons
- **`button-primary`** — Navy fill, cream text, full pill, uppercase letter-spaced label. The default CTA.
- **`button-secondary`** — White surface with warm border.
- **`button-ghost`** — Transparent on cream with a navy outline.

### Badges
- **`badge`** — Sand-tinted pill with uppercase eyebrow text for tags and labels.

### Cards
- **`card`** — White surface, warm hairline border, `{rounded.lg}`, generous padding.
- **`card-feature`** — Tinted soft-cream surface for larger feature blocks.

### Inputs
- **`input`** — White field, warm border, focus shifts border to gold.

### Navigation
- **`nav-bar`** — Cream header, navy uppercase links, soft border at bottom.

## Do's and Don'ts

### Do
- Use the warm sand canvas (`{colors.background}`) as the default page background
- Pair high-contrast display serif headlines with light-weight humanist sans body
- Reserve gold (`{colors.gold}`) for hairlines, hover, and small flourishes only
- Use uppercase wide-tracked eyebrows to label sections
- Let full-bleed photography carry the visual weight
- Keep chrome to warm hairlines and soft radii, not heavy shadows

### Don't
- Don't use cold pure white as the page canvas — warmth is the brand
- Don't flood the page with gold — it loses its preciousness
- Don't set body text in the serif — serif is for headlines only
- Don't use heavy drop shadows — depth stays hairline-level
- Don't crowd sections — generous whitespace is the luxury signal
- Don't use bold weights on body copy — 300 is the body default

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, stacked nav drawer |
| Tablet | 600–1024px | 2-column tile grids, reduced section padding |
| Desktop | 1024–1280px | Full alternating image/text splits |
| Large | >1280px | Centered max-width with generous margins |

### Touch Targets
- Pill buttons use comfortable 16px vertical padding
- Nav links spaced with adequate tap room
- Inputs at 14px vertical padding for easy targeting

### Collapsing Strategy
- Hero serif: 64px → scales toward 36px on mobile, keeps airy leading
- Navigation: horizontal uppercase links → hamburger drawer
- Feature splits: side-by-side image/text → stacked single column
- Tile grids: 3-column → 2-column → single
- Section spacing: 96px+ → ~56px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Sand Canvas `{colors.background}`
- Primary CTA: Navy `{colors.primary}` with cream text `{colors.on-primary}`
- Heading text: Ocean-Night Ink `{colors.ink}`
- Body text: Slate `{colors.ink-secondary}`
- Accent / hairline: Antique Gold `{colors.gold}`
- Link: Mid Ocean `{colors.link}`, hover to gold `{colors.link-hover}`

### Example Component Prompts
- "Create a full-bleed hero over a cruise photo. Uppercase eyebrow in Jost 12px weight 500, letter-spacing 2.4px. Headline in Cormorant Garamond 64px weight 400, line-height 1.08, color `{colors.ink}`. Pill CTA: navy fill `{colors.primary}`, cream text `{colors.on-primary}`, uppercase letter-spaced label, padding 16px 36px."
- "Design a feature card: white surface `{colors.surface}`, warm 1px border `{colors.border}`, radius 16px, padding 32px. Title in Cormorant Garamond 24px weight 500; body in Jost 16px weight 300, color `{colors.ink-secondary}`."
- "Build an editorial section split: full-bleed image left, text right on cream `{colors.background}` with an uppercase gold eyebrow and a serif heading. Generous 96px vertical padding."

### Iteration Guide
1. Cream canvas first — never default to white
2. Serif for headlines, sans-300 for everything else
3. Gold is a seasoning, not a sauce — hairlines and hover only
4. Pills with uppercase letter-spaced labels for all buttons
5. Let photography be the loudest element; keep type and chrome quiet
6. Whitespace is the luxury — escalate vertical spacing generously

---

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