Vacation®

# Vacation® — Style Reference
> Sun-kissed retro comfort

**Theme:** light

Vacation® embraces a nostalgic, playful aesthetic, evoking mid-century leisure with a modern e-commerce functional layer. Its visual language balances warm, sun-kissed neutrals with a single prominent yellow-gold accent for primary interactions. Typography is a key differentiator, combining a variety of custom serif and sans-serif fonts to create a distinct, editorial feel. Components are generally soft and rounded, with subtle shadow details that nod to physical objects rather than stark digital interfaces.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midday Sand | `#f1d27a` | `--color-midday-sand` | Primary action background, decorative borders, selected states — a warm, inviting yellow that evokes sunshine and retro leisure |
| Ocean Blue | `#23659f` | `--color-ocean-blue` | Outlined button borders, link text, decorative accents — a cool blue providing contrast and secondary interactive cues |
| Coral Sunset | `#d1796d` | `--color-coral-sunset` | Outlined button borders, decorative strokes |
| Breezy Teal | `#39aaa7` | `--color-breezy-teal` | Decorative borders and backgrounds |
| Electric Violet | `#0048ff` | `--color-electric-violet` | Small functional indicators, button backgrounds for specific contexts |
| Graphite | `#333333` | `--color-graphite` | Primary text, strong borders, icons, and significant UI elements. Provides strong contrast against lighter backgrounds |
| Parchment White | `#e5e7eb` | `--color-parchment-white` | Page background, significant surface background, muted borders — a creamy off-white that softens the overall presentation |
| Cloud Cover | `#ffffff` | `--color-cloud-cover` | Input backgrounds, elevated card surfaces, strong UI highlights |
| Faded Cinder | `#6a6966` | `--color-faded-cinder` | Surface background for specific elements, subtle button backgrounds |
| Pale Ash | `#dddddd` | `--color-pale-ash` | Subtle card borders and dividers |
| Slate Cloud | `#778899` | `--color-slate-cloud` | Card background for secondary content areas |
| Sky Haze | `#b0c4de` | `--color-sky-haze` | Card background for tertiary content areas |

## Tokens — Typography

### Helvetica Neue LT Std — Primary sans-serif for body text, navigation, and some headings. Its clean lines provide readability amidst the more decorative serifs. · `--font-helvetica-neue-lt-std`
- **Substitute:** Helvetica Neue, Arial
- **Weights:** 400, 700
- **Sizes:** 16px, 18px, 30px
- **Line height:** 0.80, 1.33, 1.50
- **Letter spacing:** -0.0300em at 30px, -0.0270em at 18px, -0.0160em at 16px
- **Role:** Primary sans-serif for body text, navigation, and some headings. Its clean lines provide readability amidst the more decorative serifs.

### ITCGaramondStd-LtCond — Distinctive serif for display headings and section titles. Its condensed and light weights create an editorial, almost classic magazine feel, making a statement without shouting. · `--font-itcgaramondstd-ltcond`
- **Substitute:** Garamond, serif
- **Weights:** 300, 400, 500, 700
- **Sizes:** 14px, 16px, 18px, 20px, 30px, 32px, 36px, 48px, 64px, 120px
- **Line height:** 0.80, 0.86, 0.90, 1.00, 1.10, 1.11, 1.20, 1.33, 1.38, 1.50, 1.78
- **Letter spacing:** -0.0800em at 120px, -0.0400em at 64px, -0.0300em at 48px, -0.0270em at 36px, -0.0240em at 32px, -0.0200em at 30px, -0.0160em at 20px, -0.0130em at 18px, -0.0100em at 14px
- **Role:** Distinctive serif for display headings and section titles. Its condensed and light weights create an editorial, almost classic magazine feel, making a statement without shouting.

### OptimaLTP — Secondary serif for smaller supporting text, labels, and some button text. Its subtle humanist lines add warmth and detail at smaller sizes. · `--font-optimaltp`
- **Substitute:** Optima, serif
- **Weights:** 400, 500
- **Sizes:** 10px, 12px, 13px, 16px, 18px, 23px
- **Line height:** 1.00, 1.04, 1.20, 1.33, 1.50, 1.85
- **Letter spacing:** -0.0480em at 23px, -0.0400em at 18px, -0.0370em at 16px, -0.0300em at 13px, -0.0270em at 12px, 0.0400em at 10px
- **Role:** Secondary serif for smaller supporting text, labels, and some button text. Its subtle humanist lines add warmth and detail at smaller sizes.

### sansItalic — Italic sans-serif used for specific callouts and decorative body text, adding a casual, handwritten feel. · `--font-sansitalic`
- **Substitute:** Arial, sans-serif
- **Weights:** 500
- **Sizes:** 22px
- **Line height:** 1.00, 1.36
- **Letter spacing:** -0.0300em, -0.0250em
- **Role:** Italic sans-serif used for specific callouts and decorative body text, adding a casual, handwritten feel.

### Metropolis — Specific supporting text. · `--font-metropolis`
- **Substitute:** Arial, sans-serif
- **Weights:** 500
- **Sizes:** 14px
- **Line height:** 1.14
- **Letter spacing:** -0.0040em
- **Role:** Specific supporting text.

### Arial — Arial — detected in extracted data but not described by AI · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Role:** Arial — detected in extracted data but not described by AI

### Times — Times — detected in extracted data but not described by AI · `--font-times`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Role:** Times — detected in extracted data but not described by AI

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1 | 0.4px | `--text-caption` |
| body | 16px | 1.5 | -0.256px | `--text-body` |
| subheading | 20px | 1.33 | -0.32px | `--text-subheading` |
| heading-sm | 30px | 1.1 | -0.6px | `--text-heading-sm` |
| heading | 36px | 0.9 | -0.972px | `--text-heading` |
| heading-lg | 48px | 0.8 | -1.44px | `--text-heading-lg` |
| display | 120px | 0.86 | -9.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 27 | 27px | `--spacing-27` |
| 30 | 30px | `--spacing-30` |
| 34 | 34px | `--spacing-34` |
| 40 | 40px | `--spacing-40` |
| 70 | 70px | `--spacing-70` |
| 120 | 120px | `--spacing-120` |
| 150 | 150px | `--spacing-150` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 5px |
| badges | 0px |
| inputs | 2px |
| buttons | 9999px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.75) 0px 1.5px 1.5px 0px` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.5) -2px -2px 0px 0px inset` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.75) 2px 2px 2px 0px` | `--shadow-subtle-3` |

### Layout

- **Section gap:** 30px
- **Card padding:** 27px
- **Element gap:** 20px

## Components

### Pill Button - Midday Sand
**Role:** Primary call to action button.

Filled with Midday Sand (#f1d27a), text is Graphite (#333333). Has a 9999px border-radius creating a pill shape. Padding is 4px top, 30px horizontal, 0px bottom.

### Ghost Button - Light Text
**Role:** Secondary navigation or subtle actions on dark backgrounds.

Transparent background, text and border in Parchment White (#e5e7eb) with 0px radius. No padding specified, acts as text link.

### Coupon Card
**Role:** Promotional modal or featured content display.

Parchment White (#e5e7eb) background with 5px border-radius. Features a -2px -2px 0px 0px inset shadow of Faded Cinder (#76736e) giving a paper-like, slightly curled edge effect. Padded 27px on all sides.

### Text Input - Light
**Role:** Form text input field on light backgrounds.

White background with Graphite (#333333) text. Features a 2px border-radius and an input border of Graphite (#333333). Padded 6px top, 16px horizontal, 0px bottom.

### Text Input - Dark
**Role:** Form text input field on dark backgrounds.

Transparent background with Parchment White (#e5e7eb) text. Border is Pale Ash (#e5e7eb). Padded 4px top, 20px horizontal, 0px bottom. Placeholder text would inherit Parchment White for visibility.

### Circular Electric Violet Button
**Role:** Small, distinct interactive element, potentially for accessibility or unique actions.

Filled with Electric Violet (#0048ff) with 50% border-radius for a perfect circle. Has a 2px 2px 2px 0px shadow from rgba(0,0,0,0.75).

### Underlined Navigation Button
**Role:** Header or footer navigation items.

Transparent background, Graphite (#333333) text and border (0px radius). Acts as a text link with an explicit border-bottom for styling.

## Do's and Don'ts

### Do
- Use Midday Sand (#f1d27a) for all primary interactive elements, including button backgrounds and accent borders.
- Apply ITCGaramondStd-LtCond for display-level text to maintain the editorial, nostalgic feel, varying weights and letter-spacing as per type scale.
- Utilize a 9999px border-radius for all primary buttons and tags to create soft, pill-shaped components.
- Implement the -2px -2px 0px 0px inset shadow on elements requiring a 'physical' or 'coupon-like' visual edge.
- Maintain a comfortable density with element gaps of 20px and card padding of 27px, ensuring visual breathing room.
- For subtle accents, use Ocean Blue (#23659f) and Coral Sunset (#d1796d) as border colors for ghost buttons or link underlines.
- Prioritize Graphite (#333333) for all primary text content to ensure high contrast and readability on light backgrounds.

### Don't
- Avoid using stark white backgrounds (#ffffff) unless for specific input fields or elevated surfaces; prefer Parchment White (#e5e7eb) for general canvas.
- Do not use highly saturated, modern gradients; the system relies on solid colors and subtle vintage-inspired effects.
- Refrain from sharp, angular corners; components should generally feature rounded corners (5px for cards, 9999px for buttons).
- Do not choose system default fonts for headings or body text; always use the specified custom font families.
- Avoid heavy drop shadows for general elevation; use the subtle inset shadows or the specific rgba(0,0,0,0.75) 0px 1.5px 1.5px 0px shadow for buttons.
- Do not introduce new vibrant colors outside the defined accent palette; color should be used sparingly for specific functional or nostalgic emphasis.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Canvas Base | `#e5e7eb` | Dominant page background, soft and inviting. |
| 2 | Elevated Card | `#f1d27a` | Background for primary interactive elements and promotional cards, providing visual warmth. |
| 3 | Input / Highlight | `#ffffff` | Input fields and surfaces requiring highest contrast or emphasis. |
| 4 | Secondary Card | `#b0c4de` | Background for secondary content cards, providing textural variation. |

## Elevation

- **Button - Midday Sand:** `rgba(0, 0, 0, 0.75) 0px 1.5px 1.5px 0px`
- **Circular Electric Violet Button:** `rgba(0, 0, 0, 0.75) 2px 2px 2px 0px`
- **Coupon Card:** `rgba(0, 0, 0, 0.5) -2px -2px 0px 0px inset`

## Imagery

This site uses an eclectic mix of vintage-inspired photography and product shots, often with a golden-hour, sun-drenched aesthetic. Product photography is clean, typically showing items in isolated vignettes. Illustrations lean into a playful retro style, sometimes mimicking graphic elements from the 60s-80s (e.g., the coupon's barcode and dashed border). Icons are primarily simple, outlined, and monochromatic, matching the surrounding text. Imagery serves both decorative and explanatory roles, evoking a sense of nostalgia and aspiration for leisure.

## Layout

The page primarily utilizes a fluid, full-bleed layout rather than a fixed maximum width. The hero section often features large, impactful imagery or typography, sometimes with elements extending to the edges. Content sections tend to have consistent vertical spacing, often with alternating light/dark background bands that create a clear visual rhythm. Content arrangement frequently uses centered stacks for headlines and calls to action, or occasionally a text-left/image-right alternating pattern within sections. Navigation is a minimalist top bar with 'Menu' and 'Bag' links, avoiding dropdowns or complex mega-menus.

## Agent Prompt Guide

Quick Color Reference: 
text: #333333
background: #e5e7eb
border: #333333
accent: #f1d27a
primary action: #f1d27a (filled action)

Example Component Prompts:
1. Create a large display heading: '“The World's Best-Smelling Sunscreen”' using ITCGaramondStd-LtCond, weight 400, size 48px, line-height 0.8, letter-spacing -1.44px, color Graphite (#333333).
2. Create a Primary Action Button: #f1d27a background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
3. Design a promotional coupon card: Parchment White (#e5e7eb) background in 5px radius, with a -2px -2px 0px 0px inset shadow of Faded Cinder (#76736e), and 27px padding on all sides. Include a text input field inside: transparent background, Parchment White (#e5e7eb) text, Pale Ash (#e5e7eb) border, 2px border-radius, 4px top, 20px horizontal, 0px bottom padding.
4. Create a ghost navigation button: 'Menu' with transparent background, Graphite (#333333) text in Helvetica Neue LT Std weight 400, 0px border-radius, and a 2px solid Graphite (#333333) bottom border.

## Similar Brands

- **Glossier** — Similar approach to minimalist navigation, emphasis on product photography, and a distinct color palette focused on a dominant accent.
- **Summer Fridays** — Shares a sunny, aspirational lifestyle aesthetic. Use of warm neutrals and soft, approachable typography.
- **Madewell** — Editorial typography choices, combining different font styles for a brand-specific feel, and a focus on subtle textures and warm color palettes.
- **Harry's** — Clean product display, use of a single strong accent color (though different hue), and an e-commerce focus with a friendly, direct tone.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midday-sand: #f1d27a;
  --color-ocean-blue: #23659f;
  --color-coral-sunset: #d1796d;
  --color-breezy-teal: #39aaa7;
  --color-electric-violet: #0048ff;
  --color-graphite: #333333;
  --color-parchment-white: #e5e7eb;
  --color-cloud-cover: #ffffff;
  --color-faded-cinder: #6a6966;
  --color-pale-ash: #dddddd;
  --color-slate-cloud: #778899;
  --color-sky-haze: #b0c4de;

  /* Typography — Font Families */
  --font-helvetica-neue-lt-std: 'Helvetica Neue LT Std', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itcgaramondstd-ltcond: 'ITCGaramondStd-LtCond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-optimaltp: 'OptimaLTP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sansitalic: 'sansItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-metropolis: 'Metropolis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1;
  --tracking-caption: 0.4px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.256px;
  --text-subheading: 20px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.6px;
  --text-heading: 36px;
  --leading-heading: 0.9;
  --tracking-heading: -0.972px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 0.8;
  --tracking-heading-lg: -1.44px;
  --text-display: 120px;
  --leading-display: 0.86;
  --tracking-display: -9.6px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-30: 30px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-70: 70px;
  --spacing-120: 120px;
  --spacing-150: 150px;

  /* Layout */
  --section-gap: 30px;
  --card-padding: 27px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-3xl: 26px;
  --radius-3xl-2: 30px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 5px;
  --radius-badges: 0px;
  --radius-inputs: 2px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.75) 0px 1.5px 1.5px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.5) -2px -2px 0px 0px inset;
  --shadow-subtle-3: rgba(0, 0, 0, 0.75) 2px 2px 2px 0px;

  /* Surfaces */
  --surface-canvas-base: #e5e7eb;
  --surface-elevated-card: #f1d27a;
  --surface-input-highlight: #ffffff;
  --surface-secondary-card: #b0c4de;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midday-sand: #f1d27a;
  --color-ocean-blue: #23659f;
  --color-coral-sunset: #d1796d;
  --color-breezy-teal: #39aaa7;
  --color-electric-violet: #0048ff;
  --color-graphite: #333333;
  --color-parchment-white: #e5e7eb;
  --color-cloud-cover: #ffffff;
  --color-faded-cinder: #6a6966;
  --color-pale-ash: #dddddd;
  --color-slate-cloud: #778899;
  --color-sky-haze: #b0c4de;

  /* Typography */
  --font-helvetica-neue-lt-std: 'Helvetica Neue LT Std', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itcgaramondstd-ltcond: 'ITCGaramondStd-LtCond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-optimaltp: 'OptimaLTP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sansitalic: 'sansItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-metropolis: 'Metropolis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1;
  --tracking-caption: 0.4px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.256px;
  --text-subheading: 20px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.6px;
  --text-heading: 36px;
  --leading-heading: 0.9;
  --tracking-heading: -0.972px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 0.8;
  --tracking-heading-lg: -1.44px;
  --text-display: 120px;
  --leading-display: 0.86;
  --tracking-display: -9.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-30: 30px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-70: 70px;
  --spacing-120: 120px;
  --spacing-150: 150px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-3xl: 26px;
  --radius-3xl-2: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.75) 0px 1.5px 1.5px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.5) -2px -2px 0px 0px inset;
  --shadow-subtle-3: rgba(0, 0, 0, 0.75) 2px 2px 2px 0px;
}
```