Ember Orange
#de4c00Primary CTAs, active nav items, icon fills, link accents — the only chromatic color in the UI, it acts as a power-switch indicator against the muted neutrals
Aboard
aboard.comWebsite preview
The design language
Aboard reads as an editorial dossier drafted inside a working warehouse: Tobias serif headlines at weight 300 float over Atkinson Hyperlegible Mono body copy, a pairing that treats the page as a technical specification rather than a marketing surface. The system alternates full-bleed dark documentary bands with warm off-white reading sections, the rhythm controlled by a single vivid ember-orange that punctuates CTAs, icons, and active states against an otherwise achromatic palette. Components are deliberately thin: pill-shaped CTAs, translucent floating nav, hairline borders at 1px, almost no shadow or elevation — the interface recedes so the photography and the prose can carry the page. The warmth of the neutrals (bone white, linen, warm graphite) keeps the dark sections from feeling cold, while the orange never decorates — it always signals an action or a live status.
Color palette
brand
Soft Ember
#efa680Hover-state borders, subdued accent outlines, tag strokes — a desaturated echo of Ember Orange for quieter accents
neutral
Bone White
#fffefbPage canvas on light sections, text color on dark/image sections
Linen
#f3f2eeWarm secondary surface, elevated card backgrounds, subtle shadow tint
Hairline Gray
#e5e7ebHairline borders across cards, images, dividers, and form fields
Stone Border
#c1bdbaMedium-strength borders where hairline is too faint
Warm Taupe
#a49784Translucent nav background tint, muted UI surfaces
Graphite
#333833Strong dark borders, deep separators
Warm Graphite
#271503Primary body and heading text on light surfaces — a warm near-black with brown undertone instead of pure black
Ink
#000000Pure black for maximum-contrast text and image overlay scrims
Deep Forest
#040c06Dark section canvases — nearly black with a green-warm undertone that complements the orange
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
72px · 300 · 1.1 · -1.44px trackingThe quick brown fox jumps
heading-lg
32px · 300 · 1.3 · -0.64px trackingThe quick brown fox jumps
heading
24px · 300 · 1.3 · -0.48px trackingThe quick brown fox jumps
body
16px · 400 · 1.57 · -0.32px trackingThe quick brown fox jumps
body-sm
14px · 300 · 1.63 · 0.7px trackingThe quick brown fox jumps
caption
12px · 300 · 1.63 · 0.6px trackingThe quick brown fox jumps
micro
10px · 300 · 1.6 · 0.5px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ui-sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
ui-sans-serif — detected in extracted data but not described by AI
Additional typeface
Tobias
- Weights
- 300
- Sizes
- 24px, 32px, 72px
- Line height
- 1.10–1.30
- Letter spacing
- -0.48px at 24px, -0.64px at 32px, -1.44px at 72px
- Fallback
- Cormorant Garamond, Playfair Display, or system serif
Display and heading serif. Weight 300 across all sizes — the whisper-weight is anti-convention for 72px display, creating authority through restraint rather than volume. Used for hero headlines, section titles, and editorial pull-quotes.
Additional typeface
Atkinson Hyperlegible Mono
- Weights
- 300
- Sizes
- 10px, 12px, 14px, 16px
- Line height
- 1.57–1.83
- Letter spacing
- -0.32px at 16px, +0.5px at 10px, +0.6px at 12px, +0.7px at 14px
- Fallback
- JetBrains Mono, IBM Plex Mono, or system monospace
Body copy, labels, and micro-text. The mono body choice is the system's signature: it treats the page as a technical manual or terminal readout, not a marketing brochure. The wider tracking at 0.05em on small sizes (10–14px) creates generous rhythm for sidebar labels and captions.
Additional typeface
Work Sans
- Weights
- 400
- Sizes
- 12px, 16px
- Line height
- 1.63–1.83
- Letter spacing
- -0.0200em, -0.0170em
- Fallback
- Inter, system-ui, or Helvetica Neue
Navigation links, button text, and small UI controls where a humanist sans is preferable to mono. Acts as the utility face between the editorial headlines and the technical body.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 8px
Border radius
nav
30pxtags
8pxcards
12pxbuttons
9999pxSpacing scale
3px4px6px8px10px12px16px24px32px49px64px90px120px128px152pxGuidelines
Do
- Set all primary CTAs to 9999px border-radius with #de4c00 fill and Bone White text in Work Sans 400 16px.
- Use Tobias weight 300 for every heading at 24px, 32px, and 72px — never bold the serif.
- Write body copy in Atkinson Hyperlegible Mono weight 300 at 14–16px with line-height 1.63–1.83.
- Separate sections with 64px vertical padding, not dividers or background color changes alone.
- Apply 1px solid #e5e7eb borders to all cards and images — never use drop shadows for elevation.
- Use #fffefb for light canvases and #040c06 for dark bands; let photography fill the dark bands edge-to-edge.
- Limit color usage: Ember Orange (#de4c00) appears only on CTAs, active states, and icon fills — nowhere decorative.
Don’t
- Do not use bold (600–700) weights on Tobias headings — the whisper-weight 300 is the signature.
- Do not introduce drop shadows for card elevation; use Linen (#f3f2ee) surface color and hairline borders instead.
- Do not use a proportional sans-serif for body copy — the mono body is the system's defining choice.
- Do not apply Ember Orange to backgrounds, section bands, or decorative elements — it is action-only.
- Do not use radius values outside the four tokens: 8px (tags), 12px (cards), 30px (nav), 9999px (buttons).
- Do not break the two-tone canvas rhythm — do not insert a third surface color (e.g. blue or purple) into light or dark sections.
- Do not use stock photography, illustrations, or 3D renders — imagery must be documentary and candid.
Components
Ember Pill CTA
Primary call-to-action buttonFilled with #de4c00, white text in Work Sans 400 16px, 9999px border-radius, 10px vertical / 24px horizontal padding. Single-line label. No shadow. The pill shape is the only rounded element at full curvature — it makes the CTA unmistakable as the page's power switch.
Translucent Floating Nav
Top-of-page navigationPill-shaped container at 30px border-radius, warm taupe (#a49784) at low opacity over the page, containing the
Serif Display Heading
Hero and section headlinesTobias weight 300, 72px on hero, 32–24px on section titles. Line-height 1.10–1.30. Letter-spacing -0.02em. Color Bone White (#fffefb) on dark sections, Warm Graphite (#271503) on light sections. The light weight is non-negotiable — bolding it kills the editorial feel.
Mono Body Block
Paragraph copy in content sectionsAtkinson Hyperlegible Mono weight 300, 14–16px, line-height 1.63–1.83, letter-spacing -0.32px at 16px. Color Warm Graphite (#271503) on light surfaces, Bone White (#fffefb) on dark. Max-width ~480px to preserve the terminal-readout measure.
Two-Column Editorial Section
Content layout: heading left, body rightSide-by-side grid with 48–64px gap. Left column holds the Serif Display Heading at 32px. Right column holds Mono Body Block at 14–16px. Both vertically top-aligned. Background: Bone White or Linen. Section padding: 64px horizontal, 64px vertical.
Full-Bleed Documentary Image
Atmospheric image band between content sectionsEdge-to-edge photograph on Deep Forest (#040c06) background. Optional dark scrim (rgba(0,0,0,0.3–0.5)) for text contrast. White or Bone White overlay text in Tobias 300. Images are documentary/candid, not stock-polished.
Vertical Sidebar Label
Section indicator on page edgeRotated 90° text on the left page margin, positioned 24–49px from the edge. Atkinson Hyperlegible Mono 10–12px, letter-spacing 0.05em, uppercase or as-is. Color: Warm Graphite on light sections, Hairline Gray (#c1bdba) or Bone White on dark. Functions as a section marker, not navigation.
Ghost Text Link
Inline links in body copyNo background, 1px underline in #de4c00 or Warm Graphite depending on context. Work Sans or mono at 14–16px. Hover increases opacity or shifts to Ember Orange.
Hairline Divider
Section separator1px solid #e5e7eb or #c1bdba, full-width or contained. No ornamentation, no gradient fade. The division between sections is implied by spacing, not visual lines — this is a fallback.
Image Frame Card
Content card with image1px solid #e5e7eb border, 12px border-radius, Linen (#f3f2ee) interior, 24px padding. Image at top with 1px border in #e5e7eb. Body text in mono 14px below. Minimal elevation — no drop shadow.
Compact Pill Tag
Category or status badge8px border-radius (subtle pill, not full curvature), 4–8px vertical / 8–12px horizontal padding, Work Sans 12px or mono 10–12px. Border 1px in #e5e7eb or #efa680. Background: Bone White or transparent. Color: Warm Graphite or Ember Orange.
Surfaces & elevation
Level 1
Bone Canvas
#fffefbLight reading sections, default page background
Level 2
Linen Card
#f3f2eeElevated content blocks, secondary panels
Level 3
Taupe Nav
#a49784Translucent floating navigation surface
Level 4
Deep Forest
#040c06Dark documentary sections, image band canvases
The system deliberately avoids drop shadows. Elevation is expressed through surface color shifts (Bone White → Linen) and hairline borders (#e5e7eb at 1px). The only shadow-adjacent value is a faint box-shadow tinted with #f3f2ee on buttons — and even that is barely perceptible. The interface should feel printed, not floating.
Layout & imagery
Layout
The page alternates between two canvas states: full-bleed dark documentary bands (Deep Forest #040c06 with photo) and warm light reading sections (Bone White #fffefb). Content is center-constrained at 1200px max-width. The hero is a full-viewport dark image with centered Tobias headline and orange CTA. Subsequent content sections use a two-column editorial split — serif heading left, mono body right — with generous 64px vertical gaps. Vertical sidebar labels sit on the left page edge as section markers. Navigation is a floating pill capsule, not a full-width bar. The overall density is spacious and breathing; the page is text-and-photography dominant, not grid-of-cards dominant.
Imagery
Photography is documentary and candid: warehouse floors with workers in hi-vis vests, open-plan offices with natural light, real human activity rather than staged corporate stock. Images run full-bleed as section bands, often with a dark scrim for text overlay. They carry a muted, slightly desaturated color grade that matches the warm-neutral palette. No illustrations, no 3D renders, no product screenshots — the photography IS the visual content. Iconography is minimal: small mono-weight line icons in Warm Graphite or Ember Orange, never decorative.
Design notes
Agent Guide
Quick Color Reference:\n- text: #271503 (light) / #fffefb (dark)\n- background: #fffefb (light) / #040c06 (dark)\n- border: #e5e7eb (hairline) / #c1bdba (medium)\n- accent: #de4c00 (Ember Orange — icons, links, active states)\n- primary action: #de4c00 (filled action)
Similar brands
Linear
Shared dark editorial band + light reading section alternation, restrained color palette with a single vivid accent for actions
Vercel
Monospace micro-text for labels and metadata, generous whitespace, minimal border-radius tokens
Ramp
Full-bleed documentary photography sections, warm off-white reading surfaces, single warm accent color for CTAs
Pitch
Editorial serif-meets-mono typography pairing, spacious two-column content layouts, pill-shaped navigation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
