---
title: "Lightship design system"
variant: extended
source: https://lightshiprv.com/
captured_at: 2026-10-12
theme: light
industry: automotive
generator: Design DNA (https://four.wiralomi.com/style/lightshiprv-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lightship · Design System

> Quiet electric adventure, framed with editorial restraint

**Theme:** light · **Industry:** automotive · **Source:** https://lightshiprv.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lightship pairs a restrained, editorial interface with cinematic imagery of electric travel trailers in the American outdoors. Oversized typography and generous white space keep the product story clear, while warm neutral surfaces and black accents give the page a crafted, premium feel.

## North star

Let expansive outdoor photography and confidently oversized type carry the story, while keeping the interface nearly monochrome and unornamented.

## Overview

The page uses a quiet palette led by pure white (#ffffff), black (#000000), and warm off-white (#faf6ef), with a subtly distinct pale stone band (#f2efea) for the newsletter area. Color stays out of the way of the landscape photography; the dominant dark and earthy tones belong mainly to the trailer, vehicles, and outdoor scenes rather than interface decoration. F37Bolton carries the entire hierarchy, using regular-weight, tightly tracked display headlines against compact, calm body copy. The opening hero is a full-bleed landscape image with white overlay text, followed by broad white intervals and image-led product storytelling. Later sections alternate between centered feature cards, a wide media panel, editorial copy, a team photograph, and a restrained content carousel. Hairline borders and flat surfaces keep components crisp without adding visual weight. The overall rhythm is spacious and deliberate, letting the photography and oversized type supply the drama.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and occasional reversed text over dark photography. |
| Trail Ink | `#000000` | `--color-trail-ink` | brand | Primary headings, body text, links, footer content, and dark interface details. |
| Canvas Linen | `#faf6ef` | `--color-canvas-linen` | surface | Warm neutral product and content card backgrounds. |
| Quiet Line | `#d9d9d9` | `--color-quiet-line` | semantic | Subtle separators and footer hairlines. |
| Dust Grey | `#999999` | `--color-dust-grey` | neutral | Minor subdued text and incidental grey details. |
| Mist Grey | `#a1a1a1` | `--color-mist-grey` | neutral | Muted supporting text and secondary copy. |
| Stone Haze | `#f2efea` | `--color-stone-haze` | surface | Distinct pale newsletter section background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf6ef` (Canvas Linen) · `--color-surface-2` → `#000000` (Trail Ink) · `--color-surface-3` → `#f2efea` (Stone Haze) · `--color-text` → `#000000` (Trail Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#a1a1a1` (Mist Grey) · `--color-border` → `#d9d9d9` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#faf6ef` | 19.49:1 | AAA |
| `#000000` | `#f2efea` | 18.31:1 | AAA |
| `#ffffff` | `#faf6ef` | 1.08:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f2efea` | 1.15:1 | fail |
| `#a1a1a1` | `#ffffff` | 2.58:1 | fail |
| `#a1a1a1` | `#faf6ef` | 2.4:1 | fail |
| `#a1a1a1` | `#000000` | 8.13:1 | AAA |
| `#a1a1a1` | `#f2efea` | 2.25:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| F37Bolton | `--font-body` | webfont | 400, 700 | All page typography, from display headlines and navigation to body copy and links. | DM Sans |

- **F37Bolton:** Mostly regular weight; display headings use tight negative tracking, while body and navigation stay compact, unembellished, and mixed case.

### Type scale — Perfect Fourth (ratio ≈ 1.366, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 76px | 400 | 1 | -0.05em | — | F37Bolton | Oversized hero and prominent editorial display headlines. |
| h1 | 72px | 400 | 1 | -0.05em | — | F37Bolton | Primary page and product-story headline. |
| h2 | 64px | 400 | 1 | -0.05em | — | F37Bolton | Major product, feature, and editorial section headings. |
| h3 | 48px | 400 | 1 | -0.05em | — | F37Bolton | Feature-card and secondary story headings. |
| h4 | 34px | 400 | 1.2 | -0.05em | — | F37Bolton | Smaller content headings and supporting feature titles. |
| body | 16px | 400 | 1.25 | 0 | — | F37Bolton | Paragraphs, product descriptions, and explanatory copy. |
| caption | 14px | 400 | 1.25 | 0 | — | F37Bolton | Dates, image notes, and fine-print supporting labels. |
| nav | 14px | 400 | 1.25 | 0 | — | F37Bolton | Primary navigation and compact interface labels. |
| link | 24px | 400 | 1.25 | -0.03em | — | F37Bolton | Prominent editorial story links and large text calls to action. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 28, 40, 100, 124, 150, 200 px.
- Section rhythm 150px · element gap 16px · card padding — · max content width —.

The page is a long, spacious sequence on a predominantly white canvas, with a full-bleed media-led opening followed by centered product imagery, feature cards, split editorial sections, a content carousel, newsletter band, and footer. Use broad horizontal compositions where photography leads, and narrow reading measures for copy; measured maximum width is unavailable, so preserve proportions rather than assume a fixed value. Alignment shifts intentionally between centered feature areas and left-aligned editorial blocks. Large section intervals contrast with compact text and navigation, producing a low-density, premium rhythm.

## Shape & elevation

- Radius: button `50%` · input `9999px` · link `9999px` · xs `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.9s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

Keep the interface predominantly flat: no measured shadows or gradients define the design. Separate areas through white space, changes between Gallery White, Canvas Linen, and Stone Haze, and occasional thin Quiet Line rules. Photography creates depth naturally; avoid elevated, heavily outlined UI cards or decorative effects.

## Imagery

Use cinematic, natural-light photography of the trailer, tow vehicle, landscapes, campsites, interiors, and manufacturing team. Hero and feature imagery should feel immersive, with overlay copy kept legible over darker image areas. Product and editorial cards use straightforward rectangular crops; photography supplies most of the palette and visual texture. The measured page includes photographic assets rather than a defining illustration or 3D-rendered interface style.

## Components

### Announcement and navigation

Compact announcement strip above the hero, with centered delivery message and pill-shaped action; navigation overlays the opening image with light text.

### Hero

Large landscape photograph with white, widely separated headline phrases, a transparent navigation layer, and a bottom hairline with scroll cue.

### Product story cards

Image-led AE.1 sequence with generous white surroundings, simple rectangular photography, and concise black copy.

### Technology carousel

Centered heading above a horizontal row of image-backed feature cards, with compact labels and understated carousel controls.

### Editorial media panel

Broad photographic feature panel with centered white heading and a small action placed over the image.

### Newsletter signup

Two-column section on Stone Haze, pairing editorial copy and rounded zip-code/email fields with a rectangular landscape image.

### Footer

Open, white footer with brand statement, grouped text links, fine separators, and simple black brand marks.

### Measured component styles

- **Primary button** (“Open / Close menu”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16.001px F37Bolton
- **Link** (“Lightship Expands Colorado Facility, Mor”): transparent background · text #000000 · radius 0px · padding 0px · 400 24.0014px F37Bolton
- **Input**: transparent background · text #000000 · radius 100px · padding 0px 24px · 400 14.0008px F37Bolton
- **Card**: background #faf6ef · text #ffffff · radius 0px · padding 0px · 400 16.001px F37Bolton
- **Navigation item** (“Open / Close menu AE.1 Technology Specs ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16.001px F37Bolton

## Do

- Use the measured palette exactly and keep interface color restrained.
- Let large outdoor photographs establish mood and scale.
- Set display headlines in regular-weight F37Bolton with tight tracking.
- Preserve broad whitespace around major product and editorial blocks.
- Use white overlay text only when imagery provides sufficient contrast.
- Keep borders and controls understated and functional.

## Don't

- Do not add bright accent colors absent from the measured palette.
- Do not introduce gradients, shadows, or decorative elevation.
- Do not compress the long-form section rhythm into a dense dashboard.
- Do not cover product photography with unnecessary interface elements.
- Do not use heavy, all-caps typography as the default.
- Do not style image-derived earth tones as interface brand colors.

## Agent prompt

Create a new Lightship page using the measured visual language: an editorial, spacious automotive experience built around outdoor travel photography. Use Gallery White (#ffffff) as the primary canvas, Trail Ink (#000000) for type and key controls, Canvas Linen (#faf6ef) for warm cards, and Stone Haze (#f2efea) for a quiet newsletter or signup band. Use F37Bolton or a close sans-serif substitute, with regular-weight headlines, tight tracking, and compact supporting copy. Arrange content in broad image-led sections, punctuated by centered feature cards and narrow editorial text blocks. Keep components flat, with thin Quiet Line (#d9d9d9) separators and no shadows or gradients. Preserve generous breathing room, let photographs supply natural color, and use restrained overlays and simple controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width landscape hero with overlaid navigation and split headline. | announcement bar, scroll cue | image overlay, white display text, bottom hairline |
| 2 | other | Centered, narrow paragraph within a broad white section. | brand introduction | muted small copy, large whitespace |
| 3 | product-showcase | Oversized title followed by a vertically paced sequence of product and lifestyle images. | product exploration, lifestyle storytelling | large black headline, rectangular image cards |
| 4 | feature-grid | Centered heading above a horizontal three-column feature carousel. | carousel navigation, feature discovery | image-backed cards, compact labels, minimal controls |
| 5 | video | Wide, full-bleed media panel with centered overlay copy. | explore action | darkened photographic backdrop, white heading |
| 6 | other | Large left-aligned editorial statement on white. | brand storytelling | oversized black copy, open white canvas |
| 7 | team | Two-column editorial block pairing narrow copy with a team photograph. | company story, about link | small body copy, wide team image |
| 8 | content-feed | Centered section heading above a horizontal row of article cards. | article browsing, carousel navigation | thumbnail images, black headlines, muted dates |
| 9 | newsletter | Two-column signup band with copy and form alongside a landscape image. | newsletter signup, zip and email entry | Stone Haze background, rounded fields, dark register action |
| 10 | footer | White footer with brand statement, grouped navigation, and social links. | site navigation, newsletter access | link columns, subtle separators, brand marks |

## Source CSS custom properties (selected)

```css
--font-size: 16px;
--transition-duration-fast: .15s;
--transition-duration: .3s;
--transition-duration-slow: .6s;
--transition-duration-slower: .9s;
--transition-duration-slowest: 1.2s;
--wysiwyg-heading-font-size: 30px;
--anim-text-enter-duration: .8s;
--anim-text-enter-stagger: 10ms;
--anim-text-leave-duration: .4s;
--anim-text-easing: cubic-bezier(.38,0,.215,1);
--anim-slide-enter-duration: 1.8s;
--anim-slide-leave-duration: .4s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lightshiprv-com