Land of Ride

# Land of Ride — Style Reference
> Editorial adventurer's journal

**Theme:** dark

Land of Ride evokes an adventurous, editorial spirit with a high-contrast dark theme punctuated by vivid, energetic accents. Typography is a rich blend of elegant serifs for headlines and navigation, grounded by clear sans-serifs for body text, creating a layered, magazine-like feel. Components are lean and functional, often using ghost styling and thin borders, allowing striking photography to take center stage. The interplay of deep blacks and sharp whites with a spectrum of dynamic colors makes interactive elements feel distinct and alive.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Page backgrounds, primary text, dark mode surfaces, text button borders |
| Canvas White | `#ffffff` | `--color-canvas-white` | Content surfaces, light mode backgrounds, primary text on dark, ghost button borders |
| Ash Gray | `#f5f5f5` | `--color-ash-gray` | Subtle background for content sections, ghost button backgrounds |
| Ghostly Mist | `#eee7e7` | `--color-ghostly-mist` | Muted secondary text, subtle accent on dark backgrounds |
| Placeholder Gray | `#767676` | `--color-placeholder-gray` | Input placeholder text, inactive elements |
| Flamingo Pink | `#ffc2f7` | `--color-flamingo-pink` | Decorative heading accents, striking visual highlights on dark UI |
| Sunset Orange | `#ec542d` | `--color-sunset-orange` | Badge accents, error states, attention-grabbing headings |
| Goldenrod | `#ebb70b` | `--color-goldenrod` | Highlight elements, icon accents |
| Passion Red | `#fe5c5d` | `--color-passion-red` | Decorative heading accents, secondary calls to attention |
| Blaze Orange | `#f77408` | `--color-blaze-orange` | Decorative heading accents, vivid callouts |
| Ocean Blue | `#0b50b8` | `--color-ocean-blue` | Decorative heading accents |
| Forest Sage | `#8c988b` | `--color-forest-sage` | Decorative heading accents, earthy visual elements |

## Tokens — Typography

### Times — Foundational text for general content, navigation links, and subtle details. Its classic serif evokes a print aesthetic. · `--font-times`
- **Substitute:** Times New Roman
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Foundational text for general content, navigation links, and subtle details. Its classic serif evokes a print aesthetic.

### GaramondNarrow — Used for headlines and subheadings, offering an elegant, condensed serif contrast to the body text. Its range of weights and sizes provides clear hierarchy and visual appeal. · `--font-garamondnarrow`
- **Substitute:** Garamond
- **Weights:** 100, 300, 400
- **Sizes:** 16px, 18px, 20px, 22px, 24px, 48px, 60px, 72px
- **Line height:** 1.00, 1.10, 1.20, 1.40
- **Letter spacing:** 0.01em
- **Role:** Used for headlines and subheadings, offering an elegant, condensed serif contrast to the body text. Its range of weights and sizes provides clear hierarchy and visual appeal.

### FranklinGothicCondensed — A workhorse sans-serif for body text, badges, and smaller headings. The condensed form maintains efficiency while the slight negative letter-spacing keeps it compact and legible. · `--font-franklingothiccondensed`
- **Substitute:** Franklin Gothic Condensed
- **Weights:** 400, 500, 600
- **Sizes:** 14px, 16px, 20px, 22px
- **Line height:** 1.00
- **Letter spacing:** -0.02em
- **Role:** A workhorse sans-serif for body text, badges, and smaller headings. The condensed form maintains efficiency while the slight negative letter-spacing keeps it compact and legible.

### FranklinGothic — Used for input fields, navigation, and detailed body content. Its straightforward sans-serif form ensures clarity for functional elements. · `--font-franklingothic`
- **Substitute:** Franklin Gothic
- **Weights:** 400, 500, 600
- **Sizes:** 13px, 14px, 15px, 16px
- **Line height:** 1.00, 1.20
- **Letter spacing:** 0.01em
- **Role:** Used for input fields, navigation, and detailed body content. Its straightforward sans-serif form ensures clarity for functional elements.

### GaramondCondensed — Introduces visual variation for navigation and body text, maintaining a refined serif character at smaller sizes. · `--font-garamondcondensed`
- **Substitute:** Garamond
- **Weights:** 400
- **Sizes:** 18px, 19px, 20px, 23px, 29px
- **Line height:** 0.90, 1.00
- **Letter spacing:** 0.01em
- **Role:** Introduces visual variation for navigation and body text, maintaining a refined serif character at smaller sizes.

### Sequel — Used for larger headings and calls to action, providing a distinctive display sans-serif with tighter tracking for impact. The generous line height complements its scale. · `--font-sequel`
- **Substitute:** Neue Haas Grotesk Display
- **Weights:** 400
- **Sizes:** 24px, 30px, 59px, 77px
- **Line height:** 0.80, 1.00
- **Letter spacing:** -0.025em
- **Role:** Used for larger headings and calls to action, providing a distinctive display sans-serif with tighter tracking for impact. The generous line height complements its scale.

### Garamond — Dominant display serif for hero headlines, commanding attention with classic elegance. · `--font-garamond`
- **Substitute:** Garamond Premier Pro
- **Weights:** 500
- **Sizes:** 88px, 92px, 154px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Dominant display serif for hero headlines, commanding attention with classic elegance.

### Kabel — A geometric sans-serif for striking headings, offering a modernist contrast to the serifs. Its tight tracking enhances its presence. · `--font-kabel`
- **Substitute:** Kabel Std
- **Weights:** 400
- **Sizes:** 48px, 79px, 92px
- **Line height:** 0.80, 0.90
- **Letter spacing:** -0.025em
- **Role:** A geometric sans-serif for striking headings, offering a modernist contrast to the serifs. Its tight tracking enhances its presence.

### LookingGlass — Highly stylized, condensed serif for exceptional display headings, providing a unique personality through extremely tight letter spacing and a slender visual profile. · `--font-lookingglass`
- **Substitute:** Didot
- **Weights:** 300, 400
- **Sizes:** 46px, 92px
- **Line height:** 0.90
- **Letter spacing:** -0.139em
- **Role:** Highly stylized, condensed serif for exceptional display headings, providing a unique personality through extremely tight letter spacing and a slender visual profile.

### CheapsMan — Distinctive display font for specific, impactful headings, leveraging a unique character for brand moments. · `--font-cheapsman`
- **Substitute:** Abril Display
- **Weights:** 400
- **Sizes:** 92px
- **Line height:** 1.00
- **Letter spacing:** -0.005em
- **Role:** Distinctive display font for specific, impactful headings, leveraging a unique character for brand moments.

### Amarante — Elegant display font for prominent headings, chosen for its delicate yet assertive presence. · `--font-amarante`
- **Substitute:** Playfair Display
- **Weights:** 300
- **Sizes:** 46px, 92px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Elegant display font for prominent headings, chosen for its delicate yet assertive presence.

### VeryPopular — Display font used for large, isolated text, with ample line height to suggest generosity and openness. · `--font-verypopular`
- **Substitute:** Source Serif Pro
- **Weights:** 400
- **Sizes:** 88px
- **Line height:** 1.80
- **Letter spacing:** normal
- **Role:** Display font used for large, isolated text, with ample line height to suggest generosity and openness.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.2 | — | `--text-caption` |
| body | 16px | 1 | 0.16px | `--text-body` |
| subheading | 22px | 1 | -0.44px | `--text-subheading` |
| heading-sm | 24px | 1.1 | 0.24px | `--text-heading-sm` |
| heading | 48px | 0.9 | -1.44px | `--text-heading` |
| heading-lg | 77px | 0.8 | -2.31px | `--text-heading-lg` |
| display | 154px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 13 | 13px | `--spacing-13` |
| 14 | 14px | `--spacing-14` |
| 17 | 17px | `--spacing-17` |
| 22 | 22px | `--spacing-22` |
| 29 | 29px | `--spacing-29` |
| 38 | 38px | `--spacing-38` |
| 58 | 58px | `--spacing-58` |
| 64 | 64px | `--spacing-64` |
| 91 | 91px | `--spacing-91` |
| 115 | 115px | `--spacing-115` |
| 126 | 126px | `--spacing-126` |
| 147 | 147px | `--spacing-147` |
| 163 | 163px | `--spacing-163` |
| 230 | 230px | `--spacing-230` |

### Border Radius

| Element | Value |
|---------|-------|
| nav | 3px |
| other | 3px |
| inputs | 0px |
| buttons | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.32) 3px 3px 8px 0px` | `--shadow-sm` |
| md | `rgba(0, 0, 0, 0.25) 0px 4px 10px 0px` | `--shadow-md` |

### Layout

- **Section gap:** 115px
- **Card padding:** 29px
- **Element gap:** 22px

## Components

### Ghost Button Inverse
**Role:** Primary action button on dark backgrounds

Background transparent, text 'Canvas White' (#ffffff), border 'Canvas White' (#ffffff), 0px radius, 0px padding.

### Ghost Button Default
**Role:** Primary action button on light backgrounds

Background transparent, text 'Midnight Ink' (#000000), border 'Midnight Ink' (#000000), 0px radius, 0px padding.

### Pill Button Light
**Role:** Secondary action button for filtering or specific selections

Background 'Ash Gray' (#f5f5f5), text 'Midnight Ink' (#000000), 50% border radius (effectively pill-shaped), 0px padding. Used for categorical choices.

### Standard Input Light
**Role:** Text input field on light backgrounds

Background transparent, text 'Midnight Ink' (#000000), bottom border 'Midnight Ink' (#000000), 0px radius, 8px vertical padding. Placeholder text uses 'Placeholder Gray' (#767676).

### Standard Input Dark
**Role:** Text input field on dark backgrounds

Background transparent, text 'Canvas White' (#ffffff), bottom border 'Canvas White' (#ffffff), 0px radius, 8px vertical padding.

### Filled Input Light
**Role:** Text input field with clear background on light themes

Background 'Canvas White' (#ffffff), text 'Midnight Ink' (#000000), border 'Placeholder Gray' (#767676), 0px radius, 0px padding.

### Accent Badge
**Role:** Highlighting tags or categories

Background transparent, text 'Sunset Orange' (#ec542d), 0px radius, 0px padding. Used for short, informative labels.

## Do's and Don'ts

### Do
- Prioritize photography as the leading visual element, treating text as an overlay or complementary detail.
- Use 'Midnight Ink' (#000000) for distinct section backgrounds to create high contrast with 'Canvas White' (#ffffff) content.
- Apply 'Garamond' or 'Sequel' for large, impactful headlines, ensuring generous vertical spacing around them.
- Utilize ghost buttons with either 'Midnight Ink' (#000000) or 'Canvas White' (#ffffff) borders and text for all primary actions.
- Employ the 'Sunset Orange' (#ec542d) for badges and error states to bring a consistent, vivid call to attention.
- Maintain a 0px border radius for most interactive elements and inputs, preserving a crisp, structured aesthetic.
- Use 'Ash Gray' (#f5f5f5) as a subtle background distinction for secondary content blocks within light themes.

### Don't
- Avoid using filled primary buttons; stick to ghost outlines to keep attention on imagery and content.
- Do not introduce additional decorative gradients; the system relies on solid colors and high-contrast photography.
- Refrain from using strong shadows on general elements; reserve for subtle elevation of navigation or specific actions.
- Do not clump content; prioritize generous 'elementGap' (22px) and 'sectionGap' (115px) for a spacious feel.
- Avoid mixing display fonts excessively on a single screen; ensure a clear hierarchy with 1-2 primary display choices and 1-2 functional families.
- Do not use highly saturated colors for large text blocks; they are reserved for accents and small functional elements.
- Never compromise on high text contrast; always ensure 'Midnight Ink' (#000000) on 'Canvas White' (#ffffff) or vice versa for optimal readability.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Canvas | `#000000` | Dominant background for the overall site, setting a dark, immersive tone. |
| 1 | Content Card Light | `#ffffff` | Background for content cards and sections that need to stand out as readable blocks on dark surfaces. |
| 2 | Faded Surface | `#f5f5f5` | Subtle background for secondary content or interactive elements on lighter theme sections, indicating a slight demotion. |

## Elevation

- **Navigation Bar:** `rgba(0, 0, 0, 0.25) 0px 4px 10px 0px`
- **Button Shadow:** `rgba(0, 0, 0, 0.32) 3px 3px 8px 0px`

## Imagery

The site uses high-quality, full-bleed photography featuring extreme sports (surf, ski, snowboard, motorbike) and vast landscapes. Images are often raw and natural, with vibrant colors emphasizing the adventure. They serve as atmospheric backdrops and aspirational content rather than product showcases. There's a strong focus on action shots and scenic views. Icons, when present, are minimal and conceptual, lacking distinct stroke weight in the provided context (no specific icon data). The density is image-heavy, with photography often occupying large viewport areas, creating an immersive experience.

## Layout

The page primarily uses a full-bleed layout for hero sections, often with captivating imagery. Content sections are typically max-width constrained, creating a focused reading area on wide screens, but the overall page model uses both full-bleed and contained sections fluidly. The hero pattern displays a large image with text overlaid at the center. Section rhythm alternates between text-dominant blocks and image-heavy showcases. Content is often arranged in grid formats for community content, typically 3-4 columns of image-text pairs. A standard top navigation bar (often transparent over the hero, then sticky) is present, with secondary navigation sometimes appearing as stacked links. The layout is spacious, with considerable breathing room between elements and sections.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #000000
border: #000000
accent: #ffc2f7
primary action: no distinct CTA color

Example Component Prompts:
1. Create a hero section: full-bleed image with an overlay. Headline 'Your Next Ride' in Garamond 92px, weight 500, #ffffff. Subtitle 'Discover new horizons' in Times 16px, weight 400, #ffffff. A ghost button below: background transparent, text 'Explore Adventures' #ffffff, border #ffffff, 0px radius, 0px padding.
2. Create a content card for 'Community': Background 'Canvas White' (#ffffff), 3px radius. Body text 'Previously riding' in GaramondNarrow 22px, weight 400, #000000. Underneath, a smaller text 'KYRGYZSTAN 2022' in FranklinGothicCondensed 14px, weight 400, #000000. Add a small 'Accent Badge' with text '#travelresolutions' in 'Sunset Orange' (#ec542d).
No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.

## Similar Brands

- **Open Space** — Shares a similar editorial aesthetic with strong photography, minimal UI, and a focus on content over heavy componentry.
- **Airbnb** — Uses large, immersive imagery in hero sections and throughout content to convey travel and experience, much like Land of Ride's emphasis on adventurous destinations.
- **VSCO** — Exhibits a clean, photography-driven UI with high-contrast text and a minimalist approach to interactive elements, letting visuals dominate.
- **The New York Times (digital)** — Employs an editorial serif-heavy typography blending classic elegance with modern readability, akin to Land of Ride's mixed font strategy.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-canvas-white: #ffffff;
  --color-ash-gray: #f5f5f5;
  --color-ghostly-mist: #eee7e7;
  --color-placeholder-gray: #767676;
  --color-flamingo-pink: #ffc2f7;
  --color-sunset-orange: #ec542d;
  --color-goldenrod: #ebb70b;
  --color-passion-red: #fe5c5d;
  --color-blaze-orange: #f77408;
  --color-ocean-blue: #0b50b8;
  --color-forest-sage: #8c988b;

  /* Typography — Font Families */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamondnarrow: 'GaramondNarrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-franklingothiccondensed: 'FranklinGothicCondensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-franklingothic: 'FranklinGothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamondcondensed: 'GaramondCondensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sequel: 'Sequel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamond: 'Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-kabel: 'Kabel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lookingglass: 'LookingGlass', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-cheapsman: 'CheapsMan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-amarante: 'Amarante', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-verypopular: 'VeryPopular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --text-body: 16px;
  --leading-body: 1;
  --tracking-body: 0.16px;
  --text-subheading: 22px;
  --leading-subheading: 1;
  --tracking-subheading: -0.44px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.24px;
  --text-heading: 48px;
  --leading-heading: 0.9;
  --tracking-heading: -1.44px;
  --text-heading-lg: 77px;
  --leading-heading-lg: 0.8;
  --tracking-heading-lg: -2.31px;
  --text-display: 154px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-13: 13px;
  --spacing-14: 14px;
  --spacing-17: 17px;
  --spacing-22: 22px;
  --spacing-29: 29px;
  --spacing-38: 38px;
  --spacing-58: 58px;
  --spacing-64: 64px;
  --spacing-91: 91px;
  --spacing-115: 115px;
  --spacing-126: 126px;
  --spacing-147: 147px;
  --spacing-163: 163px;
  --spacing-230: 230px;

  /* Layout */
  --section-gap: 115px;
  --card-padding: 29px;
  --element-gap: 22px;

  /* Border Radius */
  --radius-sm: 3px;

  /* Named Radii */
  --radius-nav: 3px;
  --radius-other: 3px;
  --radius-inputs: 0px;
  --radius-buttons: 0px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.32) 3px 3px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.25) 0px 4px 10px 0px;

  /* Surfaces */
  --surface-page-canvas: #000000;
  --surface-content-card-light: #ffffff;
  --surface-faded-surface: #f5f5f5;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-canvas-white: #ffffff;
  --color-ash-gray: #f5f5f5;
  --color-ghostly-mist: #eee7e7;
  --color-placeholder-gray: #767676;
  --color-flamingo-pink: #ffc2f7;
  --color-sunset-orange: #ec542d;
  --color-goldenrod: #ebb70b;
  --color-passion-red: #fe5c5d;
  --color-blaze-orange: #f77408;
  --color-ocean-blue: #0b50b8;
  --color-forest-sage: #8c988b;

  /* Typography */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamondnarrow: 'GaramondNarrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-franklingothiccondensed: 'FranklinGothicCondensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-franklingothic: 'FranklinGothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamondcondensed: 'GaramondCondensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sequel: 'Sequel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-garamond: 'Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-kabel: 'Kabel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lookingglass: 'LookingGlass', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-cheapsman: 'CheapsMan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-amarante: 'Amarante', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-verypopular: 'VeryPopular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --text-body: 16px;
  --leading-body: 1;
  --tracking-body: 0.16px;
  --text-subheading: 22px;
  --leading-subheading: 1;
  --tracking-subheading: -0.44px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: 0.24px;
  --text-heading: 48px;
  --leading-heading: 0.9;
  --tracking-heading: -1.44px;
  --text-heading-lg: 77px;
  --leading-heading-lg: 0.8;
  --tracking-heading-lg: -2.31px;
  --text-display: 154px;
  --leading-display: 1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-13: 13px;
  --spacing-14: 14px;
  --spacing-17: 17px;
  --spacing-22: 22px;
  --spacing-29: 29px;
  --spacing-38: 38px;
  --spacing-58: 58px;
  --spacing-64: 64px;
  --spacing-91: 91px;
  --spacing-115: 115px;
  --spacing-126: 126px;
  --spacing-147: 147px;
  --spacing-163: 163px;
  --spacing-230: 230px;

  /* Border Radius */
  --radius-sm: 3px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.32) 3px 3px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.25) 0px 4px 10px 0px;
}
```