Bone
#e5e7ebPage canvas, card surfaces, hairline dividers between sections, ghost-button borders — the lightest structural gray carries borders, surface, and the dominant background in a near-white mode
Arc
arcboats.comWebsite preview
The design language
Arc operates as an industrial white gallery suspended above dark ocean. The page alternates between full-bleed aerial marine photography and monastic white space dominated by type, with a single deep teal-navy band used as a rhythmic counterpoint between sections. Components are deliberately skeletal: thin ghost buttons with hairline borders, 5px corner radii on controls, almost no shadow, and generous negative space that lets the imagery and oversized type do the storytelling. The Soehne family carries a weight-300 display voice at 48–140px that reads as confident and engineering-precise, while body text sits at 16–18px weight 400 with tight tracking. Color is used as restraint — the system is 99% achromatic plus two near-black teals (#031e25, #1d1d1e) for image-driven sections, with no chromatic accent at all. Photography is always contained within generously rounded 32px frames against the flat canvas.
Color palette
neutral
Charcoal
#0a0a0aPrimary body and heading text, nav links, footer text, filled button text — near-black for maximum legibility without the harshness of pure black
Paper
#ffffffCard surfaces, filled button backgrounds, image overlays, reverse text on dark sections — the brightest structural white
Obsidian
#000000Headings on light canvas where maximum contrast is required, nav background accents — used sparingly only where absolute black is needed
Deep Current
#031e25Dark feature section backgrounds (alternating bands), large image containers — the navy-black that recedes like deep ocean water
Slate Depth
#1d1d1eSecondary dark section background, elevated panels over Deep Current — one step lighter to layer depth within dark bands
Typography
Type scale
Major Second (1.125) · 16px basedisplay
140px · 500 · 1 · -0.043px trackingThe quick brown fox jumps
heading-lg
48px · 500 · 1.16 · -0.021px trackingThe quick brown fox jumps
heading
32px · 500 · 1.3 · -0.016px trackingThe quick brown fox jumps
subheading
22px · 500 · 1.33 · -0.012px trackingThe quick brown fox jumps
body-lg
18px · 400 · 1.44 · -0.01px trackingThe quick brown fox jumps
body
16px · 400 · 1.44The quick brown fox jumps
body-sm
14px · 500 · 1.44The quick brown fox jumps
text-12
12px · 600 · 1.95The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Soehne
- Weights
- 300, 400, 500, 600
- Sizes
- 11px, 12px, 14px, 16px, 18px, 22px, 32px, 48px, 140px
- Line height
- 1.00, 1.30, 1.33, 1.44, 1.95
- Letter spacing
- -0.043em at 140px, -0.021em at 48px, -0.016em at 32px, -0.012em at 22px, -0.01em at 18px, normal at 16px and below, +0.15em–0.185em on uppercase labels at 11–12px
- Fallback
- Inter
- Features
- "ss01" on, "tnum" on
All interface type: weight 300 reserved for display headings (48–140px) to create a quiet engineering voice, 400 for body and subheadings, 500 for nav and meta, 600 for button labels. Soehne's geometric neutrality with the extreme -0.043em tracking on display sizes is the signature — it makes headlines feel architectural rather than editorial. Substitute: Inter (closest free analog with matching weights and tracking) or Untitled Sans.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 36-64px
- Card padding
- 20px
- Element gap
- 18-20px
Border radius
nav
2.25pxcards
0pximages
32pxinputs
5pxbuttons
5pxSpacing scale
2px4px5px6px9px10px14px18px20px30px36px45px72px80px81px100px215px248px311pxGuidelines
Do
- Use only Soehne (or Inter substitute) at the weights 300/400/500/600 — never introduce a second typeface family
- Set display headings at 48–140px weight 300 with tracking between -0.021em and -0.043em; the whisper-weight is the signature
- Use 5px radius for all controls (buttons, inputs) and 32px radius for all imagery — never mix or round to 8/12/16px
- Alternate between #e5e7eb / #ffffff light bands and #1d1d1 / #031e25 dark bands for section rhythm — no mid-gray bridges
- Reserve uppercase +0.15em–0.185em tracking for labels, meta, nav, and button text only — never for body or headings
- Let full-bleed aerial marine photography carry the visual weight of hero and feature sections; do not compete with overlaid illustrations or graphics
- Use #e5e7eb hairline 1px borders for all dividers and card edges; avoid colored borders
Don’t
- Never introduce a chromatic accent color — the system is deliberately monochromatic plus dark teal-navy
- Never use weight 700 or higher — the heaviest weight in the system is 600, and display text stays at 300
- Never add drop shadows, glows, or blur effects to elements beyond the single detected hero shadow
- Never use a border-radius between 6px and 31px — controls stay at 5px, images at 32px, nothing in between
- Never place text directly on a photograph without a darkening overlay or contained card surface
- Never use centered body copy longer than two lines; long-form content goes left-aligned in contained columns
- Never use illustrations, icons-as-decoration, or 3D renders — photography and type are the only visual vocabulary
- Never set body text above 18px or below 14px — the 14–18px range is the readable band
Components
Ghost Navigation Button
Header nav links (SPORT, COAST, COMMERCIAL) and CTAsTransparent background, #0a0a0a text at 12–14px weight 500, letter-spacing +0.15em uppercase. No border, no fill. Underline or weight shift on hover. 45px horizontal padding inside nav.
Outlined CTA Button
Primary action on hero (RECREATION, COMMERCIAL) and section CTAsTransparent or #ffffff fill, 1px #0a0a0a or #ffffff border, 5px radius, 20px vertical × 20px horizontal padding, 11–12px Soehne weight 500 uppercase at +0.15em tracking. Text color matches border color (reversible on dark sections).
Filled Reversed Button
Dark-section actions#ffffff fill on #031e25 background, #0a0a0a text, 5px radius, identical padding and tracking to outlined variant. Used sparingly — most actions remain outlined.
Hero Image Container
Full-bleed opening section with aerial marine photography100vw width, 100vh height, image object-fit cover. Text overlay positioned bottom-left at ~40px from edges. The photograph is the only content — no decorative border, no radius.
Feature Card
Three-column grid in dark feature section (Advanced Software, Quiet power, etc.)#031e25 background, 32px radius image at top filling 100% width, 20px padding, white Soehne weight 400 16px body text, white Soehne weight 400 22px heading. No border, no shadow — image and text sit directly on the dark panel.
Centered Statement Block
Section transition moments (e.g., 'Electric power built for everything the water demands.')Full-width #ffffff or #e5e7eb band, max-width 720px, centered text, 32–48px Soehne weight 300 heading with tight tracking, 48–64px vertical padding. No supporting copy, no decoration — the statement alone.
Hairline Divider
Section separators and grid lines1px #e5e7eb line, full width or column-width. No gradient, no shadow — just the bone-gray rule.
Logo Mark
Brand identity in navLowercase 'a' or 'arc' wordmark in Soehne weight 300 at 32–48px, #ffffff on dark hero, #0a0a0a on light sections. Tracking -0.021em. The logo IS the display type — no separate logomark.
Overlay Image Frame
In-section photography (product crops, dashboard screenshots)32px corner radius, contained within max-width column, no border, no shadow. Photographs are the surface — no card chrome around them.
Footer Link Row
Footer navigation12px Soehne weight 400–500, #0a0a0a or #ffffff depending on section, +0.15em uppercase tracking, 20px horizontal gap between items. No dividers, no bullets.
Hamburger Menu Trigger
Mobile or secondary navTwo stacked 1px #0a0a0a horizontal lines, 18px wide, 2.25px radius. No background, no animation chrome — the most minimal possible affordance.
Meta Label
Pre-headline tags (e.g., 'DESIGNED AND BUILT IN THE USA')11px Soehne weight 500 uppercase, +0.185em tracking, #0a0a0a. Prefixed with a small flag or icon mark. Sets the industrial-engineering tone before the headline.
Card Grid Container
Three-column feature layout in dark sectionEqual-width columns with 18–20px column gap, 36px row gap. No visible grid lines — separation comes from spacing and the dark panel background.
Surfaces & elevation
Level 0
Canvas
#e5e7ebDefault page background for light sections — a slightly warm light gray that feels industrial rather than clinical
Level 1
Paper
#ffffffSection backgrounds, card surfaces, button fills, image frames — the bright neutral that creates breathing room
Level 2
Deep Section
#1d1d1Dark band background for feature sections and image-forward blocks
Level 3
Ocean Floor
#031e25Deepest dark surface — the bottom of the elevation stack, used for hero overlays and full-bleed photographic sections
Arc avoids shadow almost entirely. The single detected shadow (rgba(0,0,0,0.05) 0 10px 15px -3px) is an isolated instance on the hero — likely a subtle text-lift on the headline. Depth comes from tonal jumps between #e5e7eb, #ffffff, #1d1d1, and #031e25, not from cast shadows. This reinforces the flat, engineering-precise aesthetic: surfaces sit on top of each other through color contrast, not blur.
Layout & imagery
Layout
Page model is full-bleed for all hero and feature imagery, with max-width 1200px contained for text and component grids. The hero is a 100vh full-bleed dark photograph with text overlaid in the bottom-left quadrant — no centered headline, no split layout. The first scroll section drops to a #ffffff band with a single centered statement (max-width ~720px), creating a moment of silence. The third section is a #031e25 dark band with a 3-column card grid of image-top / text-below cards. Section rhythm alternates: dark photo → white statement → dark feature grid → light detail blocks. Navigation is a minimal top bar with logo-left, links-center, hamburger-right, transparent background over the hero. Spacing is generous — 36–64px between sections, 18–20px between elements, 20px inside cards. No sidebar, no mega-menu, no sticky behavior visible in static frames.
Imagery
Photography is the primary visual medium and it is always marine and always aerial or high-angle. Shots are full-bleed or 32px-radius framed, never square, never with decoration. Color treatment is naturalistic — the deep teal-green of open water carries the only chromatic energy in the system. No illustration, no iconography beyond the smallest utility glyphs (hamburger, flag), no 3D renders, no abstract graphics. The product itself (boats) is always shown in motion from above, creating wake and speed lines. Screenshots of software interfaces appear as flat product evidence inside feature cards. Density is image-dominant in the hero and feature sections, text-dominant in transition and detail sections.
Design notes
Agent Guide
**Quick Color Reference** - text: #0a0a0a - background: #ffffff (cards/buttons) / #e5e7eb (canvas) / #031e25 (dark bands) - border: #e5e7eb (hairline) / #0a0a0a (ghost button) - accent: none — monochromatic system - primary action: no distinct CTA color **3 Example Component Prompts** 1. **Hero section with full-bleed photograph**: Full-viewport dark ocean aerial image as background, object-fit cover. Bottom-left overlay text: 11px Soehne weight 500 uppercase at +0.185em tracking in #ffffff with flag icon, reading 'DESIGNED AND BUILT IN THE USA'. Below it, 48px Soehne weight 300 in #ffffff at -0.021em tracking reading 'Electrifying the marine industry'. Two outlined ghost buttons below, each 5px radius, 1px #ffffff border, 11px Soehne weight 500 uppercase +0.15em, 20px padding, reading 'RECREATION' and 'COMMERCIAL'. 2. **Centered statement block**: Full-width #ffffff band, 64px vertical padding. Centered text, max-width 720px: 32px Soehne weight 300 in #0a0a0a at -0.016em tracking, two lines: 'Electric power built for / everything the water demands.' No other elements — statement alone. 3. **Feature card in dark section**: 32px-radius image filling 100% column width at top (aerial boat shot). Below, 20px padding, #031e25 background extending. Heading: 22px Soehne weight 400 in #ffffff at -0.012em tracking. Body: 16px Soehne weight 400 in #ffffff at default tracking, max 2 lines. No border, no shadow, no card chrome beyond the dark surface.
Animation Philosophy
Arc is a static, almost motionless site. The motion profile reads as 'none' — no detected transitions, no hover animations documented in the tokens. The one detected shadow is a static lift, not an animated effect. If animation is needed, it should be: instant or near-instant (0–150ms), no bounce or ease-out curves, no scroll-triggered reveals, no parallax. The stillness is part of the engineering aesthetic — the boats move, the interface does not.
Similar brands
Rivian
Same full-bleed aerial photography of vehicles in natural environments, same monochrome-plus-single-accent restraint, same engineering-precise type voice
Polestar
Minimalist type-driven layout with oversized headings, alternating light/dark section bands, and product photography as the sole chromatic content
Canoo
Industrial white gallery aesthetic with skeletal ghost buttons, hairline borders, and near-zero shadow — product-forward without chrome
Brunswick (marine)
Direct marine-industry peer using full-bleed ocean photography and minimal text overlays to let the product speak
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
