Ember Orange
#fa5c40Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Lightship
lightshiprv.com
Website preview
The design language
Lightship is a photography-first editorial system built on a warm cream canvas (#faf6ef) with full-bleed cinematic imagery doing all the storytelling. The UI is deliberately invisible: a single custom geometric sans (F37Bolton) with tight negative tracking, hairline borders, 20px rounded photo cards, and pill-shaped navigation chips. The entire palette is near-monochrome with one warm orange (#fa5c40) reserved as a rare surface accent. Density is generous — large breathing room around elements, 100px section gaps — letting landscape photography and short editorial headlines command attention. No shadows, no gradients, no decorative chrome: the product and the places it goes are the interface.
Color palette
accent
neutral
Warm Cream
#faf6efPrimary page canvas, card surfaces — warm off-white replaces stark white to soften the photography-first layout and avoid the cold SaaS feel
Pure White
#ffffffImage borders, elevated card surfaces, contrast panel behind embedded media
Obsidian
#000000Primary text, hairline borders, icon strokes, navigation typography — the structural anchor of the entire system
Pebble
#999999Muted body text, secondary borders, disabled states — the one step above placeholder gray
Driftwood
#a1a1a1Helper text, low-emphasis captions, subtle dividers
Mist
#d9d9d9Light hairline dividers, nav separators, input borders in resting state
Typography
Type scale
Minor Third (1.2) · 16px basetext-75
75px · 400 · 1The quick brown fox jumps
display
72px · 400 · 1 · -3.6px trackingThe quick brown fox jumps
text-64
64px · 400 · 1The quick brown fox jumps
heading-lg
48px · 400 · 1 · -2.4px trackingThe quick brown fox jumps
heading
34px · 400 · 1.2 · -1.02px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.2 · -0.72px trackingThe quick brown fox jumps
subheading
22px · 400 · 1.2 · -0.66px trackingThe quick brown fox jumps
body-lg
20px · 400 · 1.25 · -0.6px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
F37Bolton
- Weights
- 400, 700
- Sizes
- 12, 14, 16, 20, 22, 24, 34, 48, 64, 72, 75px
- Line height
- 1.00, 1.20, 1.25
- Letter spacing
- -0.05em at 48px and above, -0.03em at 34px and below
- Fallback
- Söhne, Inter, or DM Sans — pick the variant with the most geometric (non-humanist) character to preserve the industrial tone
Sole typeface across the entire system. Custom geometric sans with tight aperture and industrial DNA. Weight 400 for body, 700 only for display headlines and the wordmark. Tracking runs -0.05em at display sizes down to -0.03em at body, giving headlines a compressed editorial feel and body text a quiet, compact rhythm
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 100px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
20pximages
20pxinputs
100pxbuttons
100pxSpacing scale
4px8px12px16px20px24px28px40px52px64px99px100px123px149px155px199px206px241pxGuidelines
Do
- Let photography fill the viewport — use full-bleed images (100vw) with no border-radius for hero and section breaks
- Use 20px border-radius on all framed photographs and content cards — this is the system's signature softness
- Use 100px border-radius for all interactive elements (nav links, buttons, inputs) to create the pill geometry
- Set type at -0.05em letter-spacing on anything 48px and above, -0.03em on 34px and below — tight tracking is non-negotiable for the editorial feel
- Keep the entire UI monochromatic — black text, white/cream surfaces, hairline borders. The only chromatic color in the system is #fa5c40, used as a surface accent strip, not as a button fill
- Separate hero text to opposite viewport edges (left + right split) at 72–75px display weight to create compositional tension across the photograph
- Use whitespace as the primary separator between sections — 100px vertical gaps, no visible dividers needed
Don’t
- Do not use filled buttons or saturated CTA backgrounds — the system has no primary action color; interactions are ghost text links and pill nav items
- Do not introduce shadows or elevation effects — the design is intentionally flat, relying on border-radius and whitespace for depth
- Do not use gradients anywhere — surfaces are solid (cream, white, black, or ember orange)
- Do not use rounded type, decorative serifs, or display scripts — F37Bolton's geometric sans is the only voice
- Do not place content in equal-width grid columns — photo layouts use asymmetric, offset collage positioning
- Do not use #ffffff as the page background — the warm cream #faf6ef is the canvas; pure white is reserved for card elevation
- Do not use the ember orange #fa5c40 at large surface areas — it should appear only as small accent strips or focused-state washes
Components
Full-Bleed Hero Frame
Cinematic opening image spanning the entire viewport100vw × 100vh image, no border-radius, no overlay tint. Text sits directly on the photograph in white (#ffffff) at 72px / 75px display weight 400, letter-spacing -3.6px, line-height 1.0. Headline and supporting phrase anchor to opposite edges of the viewport (left + right split) to create compositional tension against the centered image.
Navigation Bar
Minimal top bar over hero and subsequent sectionsThree-zone layout: left cluster (hamburger icon + nav links: AE1, Technology, Specs), centered wordmark (LIGHTSHIP at 16px weight 400, letter-spacing 0.4em for the brand mark treatment), right cluster (Experience, Buy it now as text links). All type at 14px, weight 400, #ffffff over hero / #000000 over cream sections. No background fill — sits transparently over content.
Pill Navigation Link
Text link styled as a rounded chip14px F37Bolton weight 400, no background fill, no border. Sits inline within the nav bar. The 100px radius token governs interactive elements (links, buttons) when a pill shape is needed.
Photo Mosaic Card
Asymmetrically arranged editorial photo blockPhotograph framed with 20px border-radius, no border, no shadow. Cards are placed in an off-grid collage layout (not equal columns) at varying sizes and vertical offsets. The 20px radius is the signature — it softens editorial photography without looking app-like or corporate.
Editorial Headline Pair
Two-line complementary headline layoutLeft-aligned statement (
Hamburger Menu Trigger
Mobile/utility menu openerTwo thin horizontal lines, #ffffff over hero / #000000 over cream, 2px stroke weight, 24px wide. Sits in a pill-shaped touch target (100px radius) with 12px padding all sides.
Scroll Indicator
Fixed-bottom-right prompt to continue readingSmall downward arrow icon (1.5px stroke, #ffffff) above 12px caption text (
Ghost Text Button
Secondary action link (Buy it now, Experience)Text-only, no fill, no border. 14px F37Bolton weight 400, #000000 or #ffffff depending on surface. Underline appears on hover. This is the system's only interactive pattern — there are no filled buttons anywhere on the site.
Hairline Divider
Section separator1px solid #d9d9d9 or #000000 horizontal rule. Used sparingly — the system prefers whitespace and full-bleed image transitions over visible dividers.
Pill Input Field
Form input (newsletter, configuration)100px border-radius, 1px border in #d9d9d9 resting state, focus shifts border to #000000. Cream or white fill, 16px F37Bolton weight 400, generous 20px horizontal padding.
Surfaces & elevation
Level 1
Canvas
#faf6efFull-page warm cream background
Level 2
Card
#ffffffElevated white surface for content cards, image frames, embedded panels
Level 3
Accent Wash
#fa5c40Rare ember-orange highlight strip or focused-state surface
Layout & imagery
Layout
Hero is full-viewport (100vw × 100vh) with a single cinematic photograph and a two-column headline split (left statement + right statement at opposite viewport edges). The navigation bar sits transparently over the hero with three zones (left nav / centered wordmark / right utility links). Below the hero, the layout shifts to an asymmetric photo mosaic on the warm cream canvas — images of varying sizes offset vertically rather than aligned to a strict grid, with generous 100px vertical breathing room between major sections. Content blocks alternate between editorial two-column (text + image) and pure photography passages. The layout is max-width contained at 1440px for content areas but allows sections to break to full-bleed when the visual demands it. There is no sidebar, no sticky header that persists aggressively, and no footer chrome visible in the initial scroll.
Imagery
Photography is the dominant visual element — full-bleed cinematic landscape shots (mountains, meadows, open roads) serve as hero backdrops, while asymmetric collages of lifestyle and product photography populate content sections. All photographs share a warm, slightly desaturated treatment that complements the cream canvas. Product shots show the trailer in use: towed on mountain roads, parked at campsites, integrated into family life. No illustrations, no 3D renders, no abstract graphics. Images are framed with 20px border-radius, never sharp-cornered, and are placed in off-grid compositions with varying vertical offsets. Icons are minimal thin-line (1.5–2px stroke) monochrome.
Design notes
Agent Guide
## Quick Color Reference\n- Canvas: #faf6ef (warm cream)\n- Card surface: #ffffff (pure white)\n- Primary text: #000000\n- Hairline border: #d9d9d9\n- Muted text: #999999\n- Accent: #fa5c40 (ember orange — surface washes only)\n- primary action: no distinct CTA color
Similar brands
Patagonia
Same full-bleed landscape photography as the primary visual, warm/natural color palette, minimal text overlay, editorial headline weight on product pages
Airstream
Same product-lifestyle photography approach with cinematic outdoor settings, generous whitespace, and near-monochrome UI that lets the product imagery lead
Rivian
Same premium adventure-brand visual language: large display type with tight tracking, photography-first layout, minimal UI chrome, warm accent restraint
Fellow (fellowproducts.com)
Same warm cream canvas, custom geometric sans with tight tracking, rounded product photography, and near-invisible UI chrome that lets product imagery dominate
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
