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

# Waabi · Design System

> Editorial calm meets cinematic autonomous trucking.

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

Waabi presents autonomous trucking through oversized editorial typography, generous white space, and cinematic footage of trucks in real operating environments. A vivid pink accent punctuates otherwise restrained black, white, and warm-neutral sections.

## North star

Pair oversized, tightly tracked editorial headlines and generous white space with cinematic real-world truck imagery, reserving vivid pink for decisive accents.

## Overview

The page balances a quiet white canvas with cinematic, full-bleed truck footage. The first view uses a darkened operational scene as a backdrop for enormous white headline lettering, while most following content returns to white and lets imagery and large areas of negative space carry the rhythm. Warm gray-beige appears in selected content bands and cards; the saturated pink accent is reserved for small, high-visibility calls to action and occasional graphic emphasis. Zagma supplies the page’s distinctive display and interface voice: oversized headlines have tight tracking and compact line spacing, while navigation and body copy remain restrained. NeueHaas is used sparingly for small captions. Content alternates between open editorial compositions, image-led feature panels, compact card groups, and dark testimonial overlays. Fine gray borders and softly rounded cards define edges without introducing heavy shadows. Photography, video, and layered image compositions are central; colors found within truck imagery should not be mistaken for brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, navigation bar, light sections, and text on dark photography or surfaces. |
| Soft Ink | `#191818` | `--color-soft-ink` | brand | Default text and headings; also the dark testimonial card and inverse card surface. |
| Waabi Pink | `#ff2c6b` | `--color-waabi-pink` | accent | Primary CTA fill and small high-contrast accent details. |
| Fog Gradient | `#7f7f7f` | `--color-fog-gradient` | semantic | Measured gradient and secondary section tone; not a defining solid brand surface. |
| Warm Hairline | `#c9c8c5` | `--color-warm-hairline` | neutral | Most frequent measured border color, including fine outlines around links and buttons. |
| Muted Graphite | `#737373` | `--color-muted-graphite` | neutral | Secondary and supporting text on light backgrounds. |
| Oat Surface | `#e8e6e3` | `--color-oat-surface` | surface | Warm-gray card and section-band background, notably the editorial content area. |
| Concrete Gray | `#a6a6a6` | `--color-concrete-gray` | surface | Measured inverse section surface; use as a restrained neutral band, not a headline color. |
| True Black | `#000000` | `--color-true-black` | semantic | Small number of dark link or media treatments; distinct from the usual Soft Ink. |
| Pale Divider | `#d9d9d9` | `--color-pale-divider` | neutral | Occasional low-contrast navigation or component border. |
| Cool Card Gray | `#d1d5dc` | `--color-cool-card-gray` | semantic | Measured card background, likely localized to a component rather than a defining brand surface. |
| Stone Text | `#8c8b8b` | `--color-stone-text` | neutral | Occasional subdued text tone on light content. |
| Warm Ash | `#7c7a78` | `--color-warm-ash` | neutral | Occasional muted text tone; keep subordinate to Soft Ink. |
| Blush Pink | `#ffabc4` | `--color-blush-pink` | accent | Paler supporting pink, seen in footer details rather than as the main CTA color. |
| Button Charcoal | `#262626` | `--color-button-charcoal` | semantic | Minor measured button border tone on dark treatments. |
| Deep Charcoal | `#303030` | `--color-deep-charcoal` | semantic | Occasional dark detail or border; not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#191818` (Soft Ink) · `--color-surface-2` → `#e8e6e3` (Oat Surface) · `--color-surface-3` → `#a6a6a6` (Concrete Gray) · `--color-surface-4` → `#000000` (True Black) · `--color-text` → `#191818` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#737373` (Muted Graphite) · `--color-border` → `#c9c8c5` (Warm Hairline) · `--color-accent` → `#ff2c6b` (Waabi Pink) · `--color-accent-2` → `#ffabc4` (Blush Pink) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191818` | `#ffffff` | 17.72:1 | AAA |
| `#191818` | `#e8e6e3` | 14.22:1 | AAA |
| `#191818` | `#a6a6a6` | 7.28:1 | AAA |
| `#ffffff` | `#191818` | 17.72:1 | AAA |
| `#ffffff` | `#e8e6e3` | 1.25:1 | fail |
| `#ffffff` | `#a6a6a6` | 2.43:1 | fail |
| `#737373` | `#ffffff` | 4.74:1 | AA |
| `#737373` | `#191818` | 3.74:1 | AA-large |
| `#737373` | `#e8e6e3` | 3.81:1 | AA-large |
| `#737373` | `#a6a6a6` | 1.95:1 | fail |

### Gradients

- `linear-gradient(oklab(0 0 0 / 0.5) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Zagma | `--font-body` | webfont | 400, 700 | Display, headings, body copy, navigation, and most interface text | DM Sans |
| NeueHaas | `--font-neuehaas` | webfont | 500, 400 | Small captions and supporting metadata | Inter |

- **Zagma:** 400 and 700 measured; use tight negative tracking on large headings, compact line-height, and natural mixed case.
- **NeueHaas:** Measured at 400 and 500; reserve for compact captions with slight positive tracking.

### Type scale — Golden Ratio (ratio ≈ 1.565, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 150px | 400 | 0.85 | -0.048em | — | Zagma | Oversized hero and campaign-style display headlines. |
| h1 | 129.5px | 400 | 0.9 | -0.04em | — | Zagma | Primary page headline and major statements. |
| h2 | 80px | 400 | 0.9 | -0.04em | — | Zagma | Large section headlines, such as trust and hiring content. |
| h3 | 60px | 400 | 0.9 | -0.03em | — | Zagma | Secondary editorial section headings and feature statements. |
| h4 | 40px | 400 | 1.1 | -0.03em | — | Zagma | Smaller card and feature headings. |
| body | 16px | 400 | 1.4 | -0.02em | — | Zagma | Explanatory paragraphs, card copy, and general content. |
| caption | 12px | 500 | 1.4 | 0.02em | — | NeueHaas | Compact image labels, dates, and metadata. |
| nav | 20px | 400 | 1.2 | -0.03em | — | Zagma | Main navigation labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 6, 8, 10, 11, 12, 16, 20, 24, 32, 36, 48, 90, 96, 103 px.
- Section rhythm 103px · element gap 16px · card padding 48px · max content width 1234px.

The measured content max width is 1234px, with a spacious density and a 103px section-gap reference. Keep the page predominantly single-column and editorial, varying it with image cards, side-by-side feature content, and three-column groupings. Major statements align to a clear content edge rather than being centered by default. Broad white intervals separate the hero, narrative, feature, and content-feed zones. Use the warm-gray editorial band as a deliberate change of pace before returning to white. Avoid compressing the long-form scroll into a tight dashboard grid.

## Shape & elevation

- Radius: button `50%` · card `12px` · nav `12px` · xs `12px` · 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 interface is mostly flat, with no measured shadow system. Separate content through large whitespace, pale hairlines, warm-gray bands, and image cropping. Cards use a measured 12px radius; the testimonial presentation layers a dark text panel over truck photography. Buttons are pill-shaped, with pink fill for primary actions.

## Imagery

Use real-world truck photography and video as the primary storytelling material: fleet yards, highways, vehicles, and operational settings. The hero is full-bleed and darkened enough for white headline contrast. Later media appears in large rounded panels, small floating image tiles, and editorial cards. Keep crops cinematic and grounded; avoid treating colors sampled from photos as interface palette.

## Components

### Announcement bar

A slim white top strip with centered contact prompt and an understated close control.

### Floating navigation

White rounded navigation panel over the hero image, with Waabi mark, Home label, and compact menu control.

### Primary CTA

Pink #ff2c6b pill button with white text; use sparingly for key actions such as exploring technology or viewing details.

### Editorial image card

Rounded image-led card; use photography, subtle overlaid labels, and restrained supporting copy.

### Testimonial overlay

A #191818 rounded panel layered over a large truck image, with compact partner labels, quote, attribution, and pink action.

### Section band

Broad #e8e6e3 background break used to distinguish editorial or insight content from white sections.

### Measured component styles

- **Primary button** (“Explore the tech”): background #ff2c6b · text #ffffff · radius 50px · padding 0px 24px · 400 10px Zagma
- **Secondary button**: background #ffffff · text #000000 · radius 3.35544e+07px · padding 0px · 400 10px Zagma
- **Link** (“Company news October 5, 2026 Volvo and W”): transparent background · text #191818 · radius 0px · padding 0px 0px 24px 0px · 400 10px Zagma
- **Card** (“Volvo Uber Uber Freight NVIDIA Partnersh”): background #191818 · text #ffffff · radius 12px · padding 48px · 400 10px Zagma
- **Navigation item** (“Home”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Zagma

## Do

- Use #ffffff as the dominant canvas.
- Set major headlines in Zagma with tight tracking and compact lines.
- Use #ff2c6b for primary actions, not broad page backgrounds.
- Let real truck imagery anchor major storytelling sections.
- Preserve generous space between editorial blocks.
- Use #e8e6e3 for occasional warm section contrast.

## Don't

- Do not introduce unmeasured brand colors.
- Do not turn the page into a dense dashboard layout.
- Do not apply pink to large content surfaces.
- Do not add heavy drop shadows to cards.
- Do not mistake photo or video colors for interface colors.
- Do not use all-caps as the default headline treatment.

## Agent prompt

Build a new Waabi page as a spacious editorial experience, not a conventional SaaS dashboard. Use Gallery White (#ffffff) for the main canvas, Soft Ink (#191818) for text, Oat Surface (#e8e6e3) for occasional section bands, and Waabi Pink (#ff2c6b) only for primary actions and small accents. Set large, naturally cased headlines in a Zagma-like sans with tight tracking and compact line spacing; use a restrained NeueHaas-like face for captions. Create a strong image-led opening with real autonomous-truck photography or video and white headline text over a darkened image. Alternate open white content, broad image panels, and editorial cards, preserving generous whitespace. Keep borders subtle, surfaces flat, and cards softly rounded. Do not add decorative shadows or invent colors from the photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video or photography with a floating navigation panel and oversized lower-left headline. | announcement close, menu access, hero CTA affordance | darkened media, white headline, floating white nav, pink accent |
| 2 | how-it-works | Open white field with dispersed image tiles, centered introduction, then an editorial feature split. | scroll-led narrative, feature exploration | floating image tiles, large whitespace, compact copy |
| 3 | product-showcase | Wide truck image followed by a three-card media row. | explore technology, select an experience | rounded media panel, pink pill CTA, three image cards |
| 4 | feature-split | Full-width road image with left-aligned text and CTA overlay. | safety explanation, learn more action | cinematic background, white overlay text, pink CTA |
| 5 | testimonials | Warm-gray section with editorial heading and truck image beneath; dark testimonial panel overlaps the image. | partner proof, testimonial detail | #e8e6e3 band, image-panel layering, dark quote card |
| 6 | content-feed | Editorial content cards arranged as a horizontal row in a warm-gray section. | browse updates, open article | image-led cards, compact metadata, pink view-all control |
| 7 | footer | White recruitment feature with large headline and staggered image strip, followed by full-width graphic media and footer links. | join the team, contact links, footer navigation | oversized heading, staggered photographs, bright pink graphic, multi-column footer |

## Source CSS custom properties (selected)

```css
--marquee-duration: 40s;
--rounded-unit: 1.2rem;
--background: #fff;
--foreground: #191818;
--button-primary: #335cff;
--button-primary-dark: #2547d0;
--button-primary-hover: #476fff1a;
--button-primary-hover-dark: #476cff1a;
--button-text: #5c5c5c;
--button-text-dark: #b3b3b3;
--button-text-hover: #171717;
--button-text-hover-dark: #e6e6e6;
--button-background-color: #fff;
--button-background-color-dark: #1a1a1a;
--button-border: #5c5c5c;
--button-border-dark: #414958;
--button-font: inherit;
--button-border-width: 0px;
--button-border-style: solid;
--button-border-color: transparent;
--button-border-radius: .375rem;
--button-font-weight: 500;
--button-font-size: .875rem;
--button-hover-transition-color: background-color .15s ease-in-out;
--button-shadow: 0px 1px 2px 0px #0e121b0f;
--button-shadow-dark: 0px 1px 2px 0px #8080800f;
--button-shadow-primary-focus: 0 0 0 2px #476cff;
--button-shadow-neutral-focus: 0 0 0 2px #476cff;
--button-shadow-primary-focus-dark: 0 0 0 2px #2547d0;
--button-shadow-neutral-focus-dark: 0 0 0 2px #2547d0;
--button-shadow-primary: 0px 1px 2px 0px #0e121b0f,inset 0 0 0 1px #335cff;
--button-shadow-primary-dark: 0px 1px 2px 0px #8080800f,inset 0 0 0 1px #2547d0;
--button-shadow-primary-hover: none;
--button-shadow-primary-hover-dark: none;
--button-shadow-neutral: 0px 1px 2px 0px #0e121b0f,inset 0 0 0 1px #ebebeb;
--button-shadow-neutral-dark: 0px 1px 2px 0px #8080800f,inset 0 0 0 1px #414958;
--button-shadow-neutral-hover: none;
--button-shadow-neutral-hover-dark: none;
--legal-links-gap: .75rem;
--legal-links-font-size: .875rem;
```

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