# Landofride · Design system migration spec

> Source: https://www.landofride.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of using bold typography and immersive photography to create a premium, editorial feel.

## 1. Identity DNA

Land of Ride operates as a high-end travel magazine curated for active adventures. The system is built on a foundation of immersive photography and bold, confident typography, treating each page as a composed editorial spread rather than a conventional website interface.

**One-liner:** An editorial travel platform curating premium, active holiday experiences.
**Keywords:** travel · adventure · curation · premium · editorial
**Analogy:** A high-end travel magazine curated for active adventures.

## 2. Color

The palette is built on a high-contrast monochromatic base of black and white, softened by warm neutral beiges. A single, vibrant pink serves as the sole editorial accent, used sparingly to command attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#514444` | placeholder |
| `--accent` | `#ffc2f7` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The principle is restraint; the accent derives its power from its singularity within an otherwise neutral field.

## 3. Typography

The typographic hierarchy is defined by a clear division of labor. A didone-serif handles the large display headlines, a transitional-serif carries the body narrative, and a grotesque-sans manages all functional UI elements and labels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 400 | -1px | Hero headlines and major features |
| heading | 48px | 1.1 | 400 | 0px | Section headings and secondary titles |
| body | 16px | 1.5 | 400 | 0.2px | Main body text and descriptions |
| caption | 12px | 1.4 | 400 | 2px | Small labels and UI text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a generous vertical rhythm based on a 4px unit, with generous breathing room between elements to maintain the editorial calm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with a base unit of 4px, emphasizing breathing room between elements.

## 5. Surfaces

Depth is suggested through carefully calibrated, subtle shadows that lift surfaces off the page. Thin, solid black borders are used sparingly, often as a bottom rule to delineate sections without adding visual weight.

- **Radius:** sm 3px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - 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.

## 6. Layout

The layout skeleton is a centered, magazine-style grid. It prioritizes large, full-width hero images and generous vertical whitespace, creating a structured yet open field for content.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is governed by a philosophy of subtlety and purpose. Transitions are fast, smooth, and used primarily to provide feedback on interaction—changing opacity or color—rather than for decorative effect.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
- **Patterns:**
  - Subtle opacity and color transitions on hover.
  - Smooth transform transitions for interactive elements.

- **Hover:** Subtle color or opacity changes.
- **Click:** Slight transform or opacity feedback.
- **Transition:** Smooth, fast transitions (0.25s) using ease-in-out curves.
- **Keyboard:** Standard focus states, though not heavily customized visually.

## 8. Voice & Don'ts

The editorial voice is aspirational, descriptive, and premium. Headlines are large, bold, and often overlaid directly on imagery, while calls to action are direct and action-oriented.

- **Tone:** Aspirational, descriptive, and premium.
- **Headline style:** Large, bold, and often overlaid directly on imagery.
- **CTA style:** Direct and action-oriented (e.g., 'Choose Land', 'Choose Ride').
- **Avoid:** Casual slang / Overly complex sentences / Technical jargon

### Don'ts
- ❌ 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.

The system deliberately avoids busy layouts, a wide variety of font weights, and a multi-colored palette in favor of a spacious, monochromatic focus.

## System Prompt (paste into AI tool)

```
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.
```