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

# Aboard · Design System

> Calm HR software with a playful human touch

**Theme:** light · **Industry:** saas · **Source:** https://www.aboardhr.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 a restrained, near-white canvas and crisp dark typography with soft pastel panels to make HR software feel approachable. Centered product previews, compact feature descriptions, and rounded calls to action keep the long homepage calm and easy to scan.

## North star

Keep the canvas quiet and the typography clear; use pastel panels and product imagery to add warmth without crowding the content.

## Overview

Aboard’s page is built around a quiet off-white canvas (#fafafa), with dark charcoal headlines (#262626) and muted gray supporting copy (#757577). Color arrives in soft, broad section panels—pink, lavender, aqua, and sky blue—rather than heavy interface chrome; a small yellow panel and blue or orange details add a cheerful accent. The headline-led hero is centered, followed by generous product screenshots that make the software itself the primary visual. System sans-serif typography stays clean and contemporary: large, tightly tracked headings contrast with readable, relaxed body copy. The long page alternates centered statements with left-aligned feature explanations and product visuals, using a narrow content column and ample breathing room. Rounded panels, pill-shaped actions, and softly elevated cards temper the functional subject matter with a friendly, approachable feel. Treat brighter colors inside screenshots as product imagery, not as a replacement for the site’s restrained brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#fafafa` | `--color-soft-canvas` | neutral | Near-white page canvas behind the hero, feature sections, product previews, and footer. |
| Quiet Gray | `#757577` | `--color-quiet-gray` | neutral | Muted navigation, links, supporting paragraphs, captions, and secondary footer text. |
| Charcoal Ink | `#262626` | `--color-charcoal-ink` | neutral | Primary headlines and body text, including the prominent centered hero statement. |
| Citrus Spark | `#ff6800` | `--color-citrus-spark` | accent | Small warm accent in the gradient and select page details; not a dominant CTA fill. |
| Petal Pink | `#fbcfe8` | `--color-petal-pink` | surface | Large rounded hero product-showcase band, framing the HR dashboard screenshot. |
| Lilac Haze | `#e6dafb` | `--color-lilac-haze` | surface | Pastel product or feature panel, including lavender-toned employee portal imagery. |
| Mint Mist | `#c8edee` | `--color-mint-mist` | surface | Soft aqua feature surface used to distinguish a product section from the neutral canvas. |
| Sky Tint | `#afe4ff` | `--color-sky-tint` | surface | Blue card surface in the culture feature grid, notably the Posts product card. |
| Butter Yellow | `#ffe77a` | `--color-butter-yellow` | surface | Bright yellow card within product imagery, including the photo-library feature; keep it localized. |
| Clear Blue | `#008ae8` | `--color-clear-blue` | accent | Blue text accent and link-like emphasis; CTA appearance varies across measured component data. |
| Silver Gray | `#aeaeaf` | `--color-silver-gray` | semantic | Occasional subdued heading or link color; secondary to the more prevalent muted gray. |
| Mauve Gray | `#756871` | `--color-mauve-gray` | semantic | Minor warm-gray text detail, sometimes appearing in headings or small supporting text. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Soft Canvas) · `--color-surface` → `#fbcfe8` (Petal Pink) · `--color-surface-2` → `#e6dafb` (Lilac Haze) · `--color-surface-3` → `#c8edee` (Mint Mist) · `--color-surface-4` → `#afe4ff` (Sky Tint) · `--color-text` → `#262626` (Charcoal Ink) · `--color-text-muted` → `#757577` (Quiet Gray) · `--color-accent` → `#ff6800` (Citrus Spark) · `--color-accent-2` → `#008ae8` (Clear Blue) · `--color-accent-3` → `#afe4ff` (Sky Tint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#fafafa` | 14.5:1 | AAA |
| `#262626` | `#fbcfe8` | 10.95:1 | AAA |
| `#262626` | `#e6dafb` | 11.38:1 | AAA |
| `#262626` | `#c8edee` | 12.11:1 | AAA |
| `#757577` | `#fafafa` | 4.41:1 | AA-large |
| `#757577` | `#fbcfe8` | 3.33:1 | AA-large |
| `#757577` | `#e6dafb` | 3.46:1 | AA-large |
| `#757577` | `#c8edee` | 3.68:1 | AA-large |
| `#ff6800` | `#fafafa` | 2.78:1 | fail |
| `#ff6800` | `#fbcfe8` | 2.1:1 | fail |

### Gradients

- `linear-gradient(color(display-p3 0.9766 0.45 0.084) 0%, color(display-p3 0.0014 0.5301 0.8827 / 0) 100%)`
- `linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.95) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 23%, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0) 77%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 500, 600, 400 | All page text, from navigation and captions through feature copy and large headings. | Inter |

- **system-ui:** Use a clean sans-serif throughout; headings are semibold with subtly tight tracking, while body copy is medium-weight and comfortably spaced.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | -0.009em | — | system-ui | Large display statements and headline-led messaging. |
| h1 | 56px | 600 | 1 | -0.005em | — | system-ui | Primary hero heading and major page headline. |
| h2 | 44px | 600 | 1.1 | -0.006em | — | system-ui | Feature-section headings and prominent calls to action. |
| h3 | 24px | 600 | 1.4 | 0 | — | system-ui | Subsection titles and compact feature headings. |
| body | 20px | 500 | 1.6 | 0 | — | system-ui | Feature descriptions, hero supporting copy, and explanatory text. |
| caption | 12px | 400 | 1.4 | 0 | — | system-ui | Small labels and fine-print supporting details. |
| nav | 15px | 500 | 2 | -0.01em | — | system-ui | Top navigation links and menu items. |
| link | 16px | 500 | 1.5 | 0 | — | system-ui | Inline links and secondary action labels. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 976px.

Use a centered, narrow content frame with a measured max width of 976px, while allowing product-showcase panels to read as broader bands. The hero centers its announcement, large two-line headline, supporting copy, and paired actions; later sections alternate centered introductions with left-aligned feature copy and interface previews. Keep the page rhythm spacious despite compact feature lists. Use pastel backgrounds to mark product moments, not dense colored sectioning, and preserve generous separation between major content blocks.

## Shape & elevation

- Radius: button `9999px` · card `10px` · media `24px` · nav `12px` · link `9999px` · xs `6px` · sm `10px` · md `12px` · lg `24px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px`
- Shadow `hairline` (nav): `rgba(23, 23, 23, 0.08) 0px 0px 0px 0px`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.06) 0px 0.48175px 0.86715px -1.25px, rgba(0, 0, 0, 0.05) 0px 1.83083px 3.29549px -2.5px, rgba(0, 0, 0, 0.02) 0px 8px 14.4px -3.75px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, `
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.18) 0px 0.301094px 0.301094px -1.25px inset, rgba(0, 0, 0, 0.16) 0px 1.14427px 1.14427px -2.5px inset, rgba(0, 0, 0, 0.06) 0px 5px 5px -3.75px inset`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px, rgba(23, 23, 23, 0.1) 0px 0px 0px 1px`

The page is mostly flat, with soft pastel panels providing the primary separation from the canvas. Product cards and overlapping interface previews use restrained, diffuse shadows rather than hard borders. Keep navigation and section boundaries subtle; layering should clarify product previews without making the layout feel heavy.

## Imagery

Product UI screenshots are the main visual asset, presented large inside softly colored, rounded showcase panels. Culture features combine colorful illustrated-style product cards with a lifestyle photograph of people outdoors. Keep screenshots crisp and naturally framed, and let their interface details carry their own brighter colors; avoid adding decorative imagery that competes with the product.

## Components

### Centered hero

Pair a small sky-blue announcement pill with a large centered charcoal headline, muted supporting copy, and two rounded actions.

### Pastel product showcase

Place a large UI screenshot inside a broad rounded pastel band; the first showcase uses Petal Pink (#fbcfe8).

### Feature introduction

Combine a small colored category label, clear section heading, muted description, rounded Learn more action, and concise feature list.

### Culture card grid

Mix bright product cards such as Sky Tint (#afe4ff) and Butter Yellow (#ffe77a) with a darkened lifestyle photo card.

### Rounded CTA

Use pill-shaped actions with short labels; measured examples include blue-text actions on pale blue or near-white fills.

### Quiet footer

Finish with a subtle divider, brief sign-off, compact link groups, and low-contrast copyright details on the neutral canvas.

### Measured component styles

- **Primary button** (“Try for free”): background #e0f2fe · text #0000ee · radius 99px · padding 10px 24px · 400 12px sans-serif
- **Secondary button** (“Learn more”): background #fdfdfd · text #0000ee · radius 99px · padding 10px 24px · 400 12px sans-serif
- **Link** (“Price”): transparent background · text #777777 · radius 0px · padding 0px · 500 16px system-ui
- **Card** (“Ask Co-pilot Hi there! I'm Co-pilot, Abo”): transparent background · text #000000 · radius 10px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.06) 0px 0.48175px 0.86715px -1.25px, rgba(0, 0, 0, 0.05) 0px 1.8
- **Navigation item** (“Product Price Resources Sign in”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif · shadow rgba(23, 23, 23, 0.08) 0px 0px 0px 0px

## Do

- Keep the near-white canvas dominant.
- Use charcoal for primary headings and gray for supporting copy.
- Reserve pastel colors for section panels and feature cards.
- Center the hero message and keep its supporting copy concise.
- Let product screenshots serve as the main visual proof.
- Use rounded panels and pill-shaped actions consistently.

## Don't

- Do not turn the page into a dark or high-contrast theme.
- Do not spread bright yellow or orange across large backgrounds.
- Do not clutter the hero with extra content or competing imagery.
- Do not treat screenshot colors as the global brand palette.
- Do not use hard borders or pronounced shadows on every card.
- Do not compress the sections into a dense dashboard-like layout.

## Agent prompt

Build a new Aboard-style SaaS page with a calm #fafafa canvas, #262626 headings, and #757577 supporting text. Use a centered hero with concise copy, a small announcement pill, and rounded actions. Introduce product sections with broad, softly rounded pastel surfaces such as Petal Pink (#fbcfe8), Lilac Haze (#e6dafb), Mint Mist (#c8edee), and Sky Tint (#afe4ff); keep Butter Yellow (#ffe77a) localized to feature cards. Use system-ui-style sans typography, large semibold tightly tracked headings, and relaxed body copy. Favor a narrow centered content frame, generous section breathing room, and clear alternation between text and large product UI previews. Keep shadows restrained and borders subtle. Bright accents such as Clear Blue (#008ae8) should be selective, not dominant.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Two-column footer on the near-white canvas: short brand sign-off on one side, compact link groups on the other. | Grouped site links, Copyright and attribution | Subtle divider, Muted text, Minimal icon mark |

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