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

# Aboard · Design System

> Editorial warmth meets cinematic AI consulting

**Theme:** dark · **Industry:** ai · **Source:** https://aboard.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._

Aboard pairs cinematic, full-bleed video with restrained editorial typography and generous pale sections. A near-black process story gives way to warm case-study and company bands, then a vivid orange contact area.

## North star

Balance cinematic imagery and generous editorial whitespace with a precise mono-text voice and deliberate orange accents.

## Overview

The visual strategy alternates calm, light editorial sections with a deep near-black process narrative and a high-energy orange contact/footer finish. The hero is a full-bleed video with a darkened treatment, centered white serif headline, compact monospaced copy, and orange pill CTA. Tobias supplies the elegant, lightweight display voice; Atkinson Hyperlegible Mono gives body copy a technical, deliberate texture, while Work Sans handles navigation and controls. Layouts favor broad whitespace, clear two-column text blocks, centered headings in the company section, and image-led storytelling rather than dense card grids. The case-study band uses warm parchment, followed by a soft off-white company section and saturated orange contact area. Thin rules and restrained outlines separate sections; the page relies on contrast, photography, and generous spacing rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Ink | `#040c06` | `--color-forest-ink` | brand | Near-black canvas for the process sections and dark image-led storytelling. |
| Roasted Umber | `#271503` | `--color-roasted-umber` | semantic | Measured muted text tone; keep it for subdued copy where it appears. |
| Soft Parchment | `#fbf3ec` | `--color-soft-parchment` | surface | Warm pale section and link surface, including light case-study content. |
| Gallery White | `#fffefb` | `--color-gallery-white` | surface | Hero and light-section canvas, plus navigation, headings, and CTA text. |
| Signal Orange | `#de4c00` | `--color-signal-orange` | accent | Primary contact buttons and the bold contact and footer bands. |
| Quiet Stone | `#a8a29b` | `--color-quiet-stone` | neutral | Measured neutral section surface and gradient stop; use sparingly. |
| Mist Gray | `#d0cecc` | `--color-mist-gray` | neutral | Soft gradient transition tone within a section treatment. |
| Pencil Line | `#c1bdba` | `--color-pencil-line` | neutral | Fine section and footer dividers, not prominent framing. |
| Apricot Trace | `#efa680` | `--color-apricot-trace` | accent | Minor measured border accent; not a dominant page color. |
| Oxblood Ink | `#490101` | `--color-oxblood-ink` | semantic | Dark text on the pale secondary CTA. |
| Taupe Detail | `#9e9486` | `--color-taupe-detail` | neutral | Subtle navigation detail rather than a core surface color. |
| Ember Detail | `#d56e38` | `--color-ember-detail` | accent | Small footer border detail adjacent to the orange band. |

### Semantic aliases

`--color-canvas` → `#040c06` (Forest Ink) · `--color-surface` → `#fffefb` (Gallery White) · `--color-surface-2` → `#fbf3ec` (Soft Parchment) · `--color-surface-3` → `#a8a29b` (Quiet Stone) · `--color-text` → `#fffefb` (Gallery White) · `--color-text-muted` → `#271503` (Roasted Umber) · `--color-border` → `#c1bdba` (Pencil Line) · `--color-accent` → `#de4c00` (Signal Orange) · `--color-on-accent` → `#fffefb` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fffefb` | `#040c06` | 19.64:1 | AAA |
| `#fffefb` | `#fbf3ec` | 1.09:1 | fail |
| `#fffefb` | `#a8a29b` | 2.51:1 | fail |
| `#271503` | `#040c06` | 1.13:1 | fail |
| `#271503` | `#fffefb` | 17.43:1 | AAA |
| `#271503` | `#fbf3ec` | 16.01:1 | AAA |
| `#271503` | `#a8a29b` | 6.95:1 | AA |
| `#de4c00` | `#040c06` | 4.85:1 | AA |
| `#de4c00` | `#fffefb` | 4.05:1 | AA-large |
| `#de4c00` | `#fbf3ec` | 3.72:1 | AA-large |

### Gradients

- `radial-gradient(80% 120%, rgba(30, 19, 2, 0.39) 0px, rgba(19, 17, 15, 0.2) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atkinson Hyperlegible Mono | `--font-mono` | webfont | 400, 300 | Body copy, captions, and technical-feeling explanatory text. | Roboto Mono |
| Tobias | `--font-display` | webfont | 300 | Display and section headings, with a refined editorial serif voice. | Cormorant Garamond |
| Work Sans | `--font-work-sans` | webfont | 400, 500 | Navigation and buttons. | Work Sans |

- **Atkinson Hyperlegible Mono:** Use measured regular and light weights; compact line spacing and subtly tight tracking keep paragraphs precise.
- **Tobias:** Light weight, generous scale, and slightly tight tracking; preserve natural mixed-case headlines.
- **Work Sans:** Use regular navigation and medium controls; small, clean labels with slightly tight tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.506, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1.1 | -0.02em | — | Tobias | Large centered hero headline over the video. |
| h1 | 40px | 300 | 1.1 | -0.02em | — | Tobias | Primary page headline and major section headings. |
| h2 | 32px | 300 | 1.3 | 0 | — | Tobias | Section titles and secondary editorial headings. |
| h3 | 24px | 300 | 1.3 | 0.02em | — | Tobias | Supporting subsection and case-study titles. |
| body | 14px | 400 | 1.57 | -0.02em | — | Atkinson Hyperlegible Mono | Explanatory paragraphs and descriptive content. |
| caption | 12px | 300 | 1.83 | -0.02em | — | Atkinson Hyperlegible Mono | Small supporting labels and metadata. |
| button | 16px | 500 | 1.63 | -0.02em | — | Work Sans | Contact and secondary action labels. |
| nav | 12px | 400 | 1.17 | -0.02em | — | Work Sans | Compact header navigation labels. |
| code | 14px | 400 | 1.57 | -0.02em | — | Atkinson Hyperlegible Mono | Technical or process-oriented explanatory copy. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 8, 10, 12, 16, 20, 24, 32, 40, 64, 120 px.
- Section rhythm 64px · element gap 64px · card padding — · max content width 1120px.

The page uses a spacious, editorial rhythm with a measured max content width of 1120px and broad section gaps. The hero and process story use full-bleed media or dark canvas, while content sections shift to two-column reading layouts. The company section centers its heading and arranges copy and client marks below. Density stays low: short text blocks, large open areas, and distinct horizontal bands make the long homepage easy to scan.

## Shape & elevation

- Radius: button `9999px` · nav `4px` · link `8px` · xs `2px` · sm `4px` · md `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is predominantly flat: section backgrounds and full-bleed media establish depth instead of shadows. Fine horizontal rules divide the dark narrative and orange footer areas. Rounded pill buttons and the rounded navigation container are the main soft-edged elements; avoid adding card shadows or layered panels.

## Imagery

The hero is full-bleed video, darkened enough for white type to remain legible. Later content uses large workplace photography and client imagery, especially in the process and case-study sections. A fine wave-like graphic appears as a decorative process motif; it is secondary to photography. Keep image framing broad and editorial, with restrained overlays rather than cards or heavy effects.

## Components

### Floating navigation

Compact Work Sans links sit inside a translucent light rounded bar over the hero video; the contact action is a small orange pill.

### Hero

Full-bleed video with dark overlay, centered lightweight serif headline, mono supporting copy, and a prominent orange contact pill.

### Process narrative

Near-black section pairs workplace imagery and serif headings with narrow mono paragraphs, a pale secondary pill CTA, and a delicate wave motif.

### Case-study band

Warm parchment section presents client solutions in a two-column, image-led layout with editorial headings and minimal card framing.

### Company and client marks

Soft off-white section centers its heading, places two text columns beneath, and finishes with a horizontal client-logo row.

### Contact form

Orange full-width band with a serif heading, wide darkened form fields, and a small pale submit pill.

### Footer

Orange footer separated by a thin rule, with brand mark, compact multi-column link lists, and oversized low-contrast wordmark treatment.

### Measured component styles

- **Primary button** (“Get in Touch”): background #de4c00 · text #fffefb · radius 9999px · padding 6px 12px · 500 12px Work Sans
- **Secondary button** (“Learn more”): background #eadfcf · text #490101 · radius 9999px · padding 10px 20px · 500 16px Work Sans
- **Link** (“Insurance Giant Saves Months of Work and”): background #fbf3ec · text #000000 · radius 8px · padding 32px 40px 40px 40px · 400 16px ui-sans-serif
- **Navigation item** (“How We Work Case Studies Perspectives Ab”): transparent background · text #fffefb · radius 0px · padding 0px · 400 12px Work Sans

## Do

- Use Tobias-style lightweight serif for major headlines.
- Keep explanatory copy in a legible mono face.
- Let full-width imagery define major transitions.
- Use orange for decisive contact actions and the closing band.
- Alternate light editorial sections with the dark process section.
- Separate long sections with subtle rules and open space.

## Don't

- Do not turn every section into a card grid.
- Do not add drop shadows to flat content blocks.
- Do not use orange as a general text color.
- Do not crowd the hero with extra controls or copy.
- Do not replace the editorial serif with heavy geometric headings.
- Do not invent colors outside the measured palette.

## Agent prompt

Build a new Aboard-style page with an editorial, cinematic feel. Use Forest Ink (#040c06) for a deep narrative canvas, Gallery White (#fffefb) for light sections and reverse text, Soft Parchment (#fbf3ec) for warm content bands, and Signal Orange (#de4c00) for primary actions and a bold closing contact area. Set large headings in a light Tobias-like serif, supporting copy in a compact mono face, and navigation/buttons in Work Sans. Use full-width video or photography with restrained dark overlays, then return to spacious two-column editorial layouts. Keep section transitions clear, favor thin divider rules over shadows, and reserve rounded shapes for pills and the navigation container. Maintain broad whitespace and avoid dense card grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with centered headline, copy, and contact action. | Centered hero message, Primary contact CTA | Darkened video overlay, Light serif headline, Orange pill button |
| 2 | feature-split | Open light section with a left-aligned heading and two-column content. | Problem framing, Editorial scan path | White canvas, Serif heading, Mono body copy |
| 3 | how-it-works | Dark section centered around a wide workplace image and prominent title. | Process introduction, Visual trust-building | Near-black canvas, Wide photography, Large serif title |
| 4 | feature-split | Dark editorial narrative with copy, link action, and decorative wave graphic. | Process explanation, Secondary learn-more action | Mono text column, Pale pill CTA, Fine wave motif |
| 5 | product-showcase | Warm two-column case-study section with image-led solution stories. | Case-study discovery, Learn-more links | Parchment band, Editorial headings, Large client imagery |
| 6 | logo-cloud | Centered heading, two text columns, then a horizontal client-logo row. | Company introduction, Client credibility | Soft off-white surface, Centered serif heading, Logo strip |
| 7 | contact | Full-width orange contact band with heading and wide form fields. | Lead capture, Direct inquiry | Orange background, Darkened inputs, Pale submit pill |
| 8 | footer | Orange footer with brand area and three compact navigation columns. | Site navigation, Social discovery | Thin top divider, Small link lists, Oversized low-contrast wordmark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--off-white: #FFFEFB;
--wp--preset--color--parchment: #F3F2EE;
--wp--preset--color--cream: #FBF3EC;
--wp--preset--color--tan-suit: #EADFCF;
--wp--preset--color--bright-citrus: #DE4C00;
--wp--preset--color--dark-citrus: #C44300;
--wp--preset--color--burnt-citrus: #712C03;
--wp--preset--color--orange-peel: #E67940;
--wp--preset--color--peach: #EFA680;
--wp--preset--color--forest-green: #053524;
--wp--preset--color--merlot: #490101;
--wp--preset--color--merlot-deep: #280000;
--wp--preset--color--ox-blood: #5B0202;
--wp--preset--color--black-black: #040C06;
--wp--preset--color--warm-black: #271503;
```

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