Aboard. Pastel paper notebook on a white desk.
- SaaS
- Light theme
- 14 colors
- 1 typeface
Aboard is a light, airy people-ops workspace that lives on a near-white canvas with a single vivid blue doing the work of a brand color and a palette of five pastel card surfaces doing the work of warmth. Typography leans on system-ui at compressed tracking: very large, very tight headlines (64px at -0.64px) sit above a neutral gray body, so the page reads confident and editorial rather than marketing-loud. Components are soft and rounded — 24px card radius, 99px pill buttons, 10px on small elements — and elevation is replaced by pastel color washes instead of shadows, which keeps the interface feeling like paper stationery rather than glass. Decorative emoji inlined into copy and pastel product-mockup cards give the brand a playful, almost notebook-like personality.
Aboard design system
Brand1
Blue outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
Accent6
Notification pill background, subtle blue wash on interactive surfaces — the muted echo of Signal Blue used for non-action highlights
Decorative card surface — warm pink wash that frames product screenshots and feature blocks
Decorative card surface — soft purple wash for variety blocks and callout cards
Decorative card surface — cool teal wash for product mockup containers and accent cards
Decorative card surface — light blue wash used alongside the other pastels for tonal rhythm
Decorative card surface — warm yellow wash, the highest-contrast pastel used sparingly for emphasis cards
Neutrals7
Hairline borders, icon strokes, divider lines at thin weights — provides structural edges without tonal noise
Primary headings and body text — softened black that reads warm rather than harsh
Secondary text, captions, nav labels, muted borders — the everyday gray for supporting copy
Tertiary text, disabled labels, faint dividers — the quietest gray in the system
Rare single-layer drop-shadow tone used for floating panels and the AI chat popover
Page background, default surface — sets the off-white, paper-like base for the entire system
Product UI panels, card surfaces, elevated content blocks — keeps content crisp against the off-white canvas
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Outline on Signal Blue
5.80 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
