Overview
- Use full-bleed landscape media as the first impression.
- Let the page oscillate between cinematic outdoor scale and grounded technical panels.
- Keep the controls black, minimal, and secondary to the image story.
Lightship
Lightship is the first American all-electric recreational vehicle company bringing travel trailers into the electric age.
3.0
5
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Lightship Home design analysis
Use full-bleed landscape media as the first impression. Let the page oscillate between cinematic outdoor scale and grounded technical panels. Keep the controls black, minimal, and secondary to the image story. Favor moun...
Key Takeaways
- Use full-bleed landscape media as the first impression.
- Let the page oscillate between cinematic outdoor scale and grounded technical panels.
- Keep the controls black, minimal, and secondary to the image story.
- Favor mountain roads, open valleys, vehicle silhouettes, and cockpit or systems closeups.
- Inset warm bone information cards with subtle grid marks when the story turns technical.
- Let black and outdoor imagery drive the contrast.
Image Direction
- Favor mountain roads, open valleys, vehicle silhouettes, and cockpit or systems closeups.
- Inset warm bone information cards with subtle grid marks when the story turns technical.
Colors
- Let black and outdoor imagery drive the contrast.
- Use bone and stone only in contained technical panels.
- Bring warmth through earth-toned imagery rather than through saturated interface color.
Typography
- Use a monumental display face for the biggest statements.
- Keep the supporting copy direct and low-drama.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Expedition Cinema Ledger
A cinematic adventure-vehicle language built from full-bleed landscape motion, monumental headlines, warm bone information panels with plus-sign grids, and black utility pills layered over parallax storytelling.
Cinematic, expansive, and technically grounded.
Primary mode: lightadventure vehicle marketingeditorial-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Cinematic, expansive, and technically grounded.
Density
5
Variance
7
Motion
6
Signals
full-bleed landscapes · bone technical panels · giant headline overlays
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Carbon Black
#111111
Bone Field
#F2EEE8
Stone Gray
#C8C1B7
Dust Olive
#90896E
Sunset Rust
#B56D4E
Open White
#FFFFFF
Usage rules
Let black and the landscape do most of the contrast work.
Use bone fields only in inset information architecture, not across the whole page.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 7rem)
panel_padding
1.5rem
Token Radii
Corner radii tokens with a live surface sample.
sm
12px
md
20px
lg
28px
xl
36px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
F37 Bolton
cinematic modern headline voice
Body
F37 Bolton
clear high-contrast support copy
Accent
IBM Plex Mono
small technical label voice
Mono
IBM Plex Mono
tiny UI or spec annotation voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3.5rem, 8vw, 6.5rem)/—
Display
H2
clamp(2rem, 4vw, 3.2rem)/—
H2
H3
1.1rem/—
H3
Body
1rem/—
Body
Label
0.82rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep the biggest statements monumental and sparse. · Let small technical labels stay understated and secondary to the landscape imagery.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
240ms-420ms
Easing
cubic-bezier(.22, 1, .36, 1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 240ms-420ms |
easing | cubic-bezier(.22, 1, .36, 1) |
Layout Principles
Open with full-bleed landscape media and huge type directly on top.
Inset bone technical panels only when the story needs grounded information.
Use big white space or media pauses between technical chapters.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Actions black pill
Base Attributes
Background
#111111
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.85rem 1.25rem
Actions outline field
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #C8C1B7
Radius
20px
Padding
0.85rem 1rem
Panels bone panel
Base Attributes
Background
#F2EEE8
Text
#111111
Border
none
Radius
20px
Padding
1.5rem
Shadow
none
Scroll motion
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Scroll driver
native
Cadence
cinematic chapter drift
Patterns
- -sticky hero
- -stacked cards
- -parallax
Page logic
- -Let one cinematic hero or media chapter hold while nearby copy advances.
- -Use stacked proof cards to deepen the technical story rather than to decorate it.
Constraints
- -Never let the scroll treatment obscure navigation or CTA clarity.
- -Keep every chapter visually legible in a settled state.
Reduced motion
- -Remove parallax and stacked drift while preserving chapter order.
- -Hold the landscape media on still frames when motion is reduced.
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -landscape still
- -vehicle profile
- -technical panel
Subject patterns
- -mountain roads
- -wide valleys
- -vehicle silhouettes
- -bone cards with subtle grid marks
Composition logic
- -Cover the frame with one outdoor scene, then inset one warm technical panel where needed.
- -Use big headline overlays directly on the media.
Treatment rules
- -Favor natural light, open air, and grounded earth tones.
- -Keep UI or technical overlays simple and black-led.
Generation cues
- -Ask for a cinematic expedition page with full-bleed landscape media, giant headline overlays, black utility pills, and warm bone technical panels.
- -Mention subtle plus-sign grids and supportive scroll pacing.
Avoid
- -No glossy cybertruck futurism.
- -No maximal beige card stacks.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not swap the landscapes for generic studio renders.
- -Do not cover the whole shell in beige panels.
- -Do not collapse the headline scale into ordinary product-marketing sizing.