---
name: Landofride
description: "This site is a great example of using bold typography and immersive photography to create a premium, editorial feel."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  tertiary: "#ffc2f7"
  neutral: "#514444"
  bg-soft: "#f5f5f5"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"
  caption:
    fontFamily: transitional-serif
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "2px"

rounded:
  sm: 3px
  md: 4px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An editorial travel platform curating premium, active holiday experiences.

*A high-end travel magazine curated for active adventures.*

## Colors

A high-contrast monochromatic base of black and white, softened by warm neutral beiges, using vibrant pink as a single, bold editorial accent.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#ffc2f7`)** — uses `accent` token
- **Muted (`#514444`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** transitional-serif

- Use didone-serif for large display text.
- Use transitional-serif for body copy.
- Use grotesque-sans for UI elements and small labels.
- Use wide letter-spacing for uppercase labels.

## Layout

A centered, magazine-style layout with large, full-width hero images and generous vertical whitespace.

*Rhythm:* Generous vertical spacing with a base unit of 4px, emphasizing breathing room between elements.

## Elevation & Depth

- rgba(0,0,0,0.32) 3px 3px 8px 0px
- rgba(0,0,0,0.25) 0px 4px 10px 0px
- Borders: Thin solid black borders used sparingly, often on the bottom of elements.

## Shapes

- `sm`: 3px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** High-contrast pill-shaped buttons with a dark background and light text.
- **card:** Large, image-heavy editorial cards with bold typography overlays.
- **chip:** Small, uppercase text labels for categorization.
- **input:** Minimal, clean input fields with subtle borders.
- **hero:** Full-bleed, immersive photographic hero sections with large, centered typography overlays.

## Do's and Don'ts

**Don't:**
- Don't use a busy or cluttered layout — the screenshot shows a spacious, editorial layout with generous whitespace.
- Don't use a wide variety of font weights — the screenshot primarily uses regular (400) and light (300) weights.
- Don't use small, cramped typography — the screenshot features large, impactful display text and readable body copy.
- Don't use rounded corners on everything — the screenshot shows a mix of sharp corners (3-4px) and occasional pill shapes.
- Don't use a vibrant, multi-colored palette — the screenshot is primarily monochromatic with a single pink accent.
- Don't hide primary actions in menus — the screenshot shows prominent, persistent CTAs at the bottom of the viewport.

---

## System Prompt (paste into AI agent)

```
Land of Ride is an editorial travel platform curating premium, active holiday experiences. The design uses a high-contrast monochromatic base of black (#000000) and white (#ffffff), softened by warm neutral beiges (#f5f5f5), using vibrant pink (#ffc2f7) as a single, bold editorial accent. Typography relies on didone-serif for display headlines and transitional-serif for body copy, with grotesque-sans for UI elements. Critical donts: Don't use a busy layout; the design is spacious and editorial. Don't use multiple font weights; keep it regular and light. Don't use a wide color palette; stick to the monochrome base with a single accent.
```