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

# Aurora · Design System

> Precision engineering, framed with cinematic restraint.

**Theme:** light · **Industry:** automotive · **Source:** https://aurora.tech/ · **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._

Aurora’s homepage pairs a cinematic, video-led hero with clean editorial sections that explain self-driving freight technology. Deep navy typography, electric blue accents, and restrained pale surfaces keep the presentation technical and confident.

## North star

Let cinematic freight imagery command attention, then use restrained typography, white space, and precise blue accents to make the technology feel credible.

## Overview

The visual strategy alternates expansive cinematic media with quiet, bright editorial sections. White is the primary canvas, while near-black frames the hardware and truck imagery; a later black integration section and saturated blue closing panel provide deliberate contrast. Deep navy carries headings and key interface text, and electric blue marks primary actions, links, and small navigation cues. Inter supplies the large, tightly tracked headline and compact supporting copy; IBM Plex Mono appears sparingly in uppercase technical labels and metrics. Layouts feel spacious and confident, using a broad centered content area, left-aligned headlines, and measured gaps between sections. Product and road imagery is presented large and clean, often against pale, low-detail scenes that let the vehicle remain prominent. Cards and buttons use modest rounded corners, while fine borders and flat surfaces keep the interface crisp rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and light content sections; also appears in hero text, reversed labels, and soft image overlays. |
| Midnight Navy | `#001733` | `--color-midnight-navy` | brand | Primary heading and interface text, including dark secondary buttons against light sections. |
| Mist Surface | `#f3f4f8` | `--color-mist-surface` | surface | Pale card and section surface, separating content from the white canvas without heavy framing. |
| Slate Muted | `#68748d` | `--color-slate-muted` | semantic | Muted body copy and secondary explanatory text on light backgrounds. |
| Aurora Blue | `#006aed` | `--color-aurora-blue` | accent | Primary CTA, inline links, navigation action, and the bold closing section band. |
| Cloud Hairline | `#e6e9f0` | `--color-cloud-hairline` | semantic | Subtle dividers and footer borders, especially around logo and content areas. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Cinematic hero and truck-platform integration section backgrounds; also appears inside media. |
| Fog Gradient | `#b2b2b2` | `--color-fog-gradient` | semantic | Gradient stop detected in navigation treatment; a supporting transition tone, not a core flat surface. |
| Silver Gradient | `#d9d9d9` | `--color-silver-gradient` | semantic | Gradient stop detected in navigation treatment; use only as a subtle tonal transition. |
| Steel Copy | `#576175` | `--color-steel-copy` | semantic | Secondary text shade in limited copy instances; subordinate to the measured muted slate. |
| Pale Text | `#d1d6e0` | `--color-pale-text` | semantic | Occasional low-emphasis text tone, used sparingly for supporting information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f4f8` (Mist Surface) · `--color-surface-2` → `#000000` (Stage Black) · `--color-text` → `#001733` (Midnight Navy) · `--color-text-muted` → `#68748d` (Slate Muted) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e6e9f0` (Cloud Hairline) · `--color-accent` → `#006aed` (Aurora Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#001733` | `#ffffff` | 17.94:1 | AAA |
| `#001733` | `#f3f4f8` | 16.33:1 | AAA |
| `#001733` | `#000000` | 1.17:1 | fail |
| `#68748d` | `#ffffff` | 4.7:1 | AA |
| `#68748d` | `#f3f4f8` | 4.27:1 | AA-large |
| `#68748d` | `#000000` | 4.47:1 | AA-large |
| `#ffffff` | `#f3f4f8` | 1.1:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#006aed` | `#ffffff` | 4.9:1 | AA |
| `#006aed` | `#f3f4f8` | 4.46:1 | AA-large |

### Gradients

- `radial-gradient(125.56% 321.42% at 124.48% 18.89%, rgba(0, 0, 0, 0) 37.72%, rgba(0, 0, 0, 0.3)), radial-gradient(55.78% 55.78% at 66.49% 44.22%, rgba(0, 0, 0, 0) 40.31%, rgba(0, 0, 0, 0.15))`
- `linear-gradient(rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5)), linear-gradient(150deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 600, 500 | Display headlines, section titles, body copy, navigation, links, and buttons. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 600 | Uppercase eyebrow labels, technical captions, and compact performance metrics. | IBM Plex Mono |

- **Inter:** Use measured semibold and medium weights; headlines are tightly tracked and compact, with sentence case rather than all caps.
- **IBM Plex Mono:** Use semibold monospace with pronounced positive tracking and uppercase labels; keep it rare and utility-like.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 600 | 0.97 | -0.04em | — | Inter | Oversized hero headline over cinematic media. |
| h1 | 44px | 600 | 0.95 | -0.03em | — | Inter | Primary page or major section headline. |
| h2 | 36px | 600 | 0.96 | -0.03em | — | Inter | Section titles such as capability and integration headings. |
| body | 20px | 600 | 1.2 | -0.04em | — | Inter | Prominent explanatory copy and testimonial text. |
| caption | 14px | 500 | 1.4 | -0.03em | — | Inter | Compact supporting descriptions and image captions. |
| nav | 14px | 600 | 1.3 | -0.04em | — | Inter | Top navigation links and menu labels. |
| link | 14px | 600 | 1.3 | -0.04em | — | Inter | Inline actions such as fleet and video links. |
| eyebrow | 9px | 600 | 1.2 | 0.16em | uppercase | IBM Plex Mono | Uppercase technical labels above section content. |
| code | 9px | 600 | 1.2 | 0.16em | uppercase | IBM Plex Mono | Small monospace metric and technical-style labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 14, 16, 18, 20, 24, 32, 34, 36, 44, 45, 48 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width 1350px.

Use a broad centered content region capped by the measured page max width, with comfortable density and clear separation between major sections. The page moves from full-bleed hero media to airy single-column editorial content, then product and capability showcases, a two-column testimonial, and logo rows. Most headings align to the left; cards and imagery sit within the grid rather than filling every section. Preserve the measured section rhythm and generous gaps, with tighter spacing reserved for related controls and labels.

## Shape & elevation

- Radius: button `8px` · card `8px` · nav `8px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: no measured shadows define the system. Use subtle borders for separators and logo rows, pale surfaces for cards, and modest rounded corners on cards and buttons. Create depth through dark video, image crops, and contrast between section backgrounds rather than stacked panels or heavy shadow.

## Imagery

Prioritize cinematic video and high-quality truck, road, and autonomous hardware imagery. The hero uses dark, full-width footage with a large white headline and a compact video card. Product imagery can contrast against bright, nearly monochrome environments; capability cards use framed driving scenes. Keep overlays restrained and avoid decorative illustration—measured gradient colors are transition artifacts, not the core brand palette.

## Components

### Primary CTA

Electric blue #006aed button with white text, an 8px radius, and compact Inter semibold labeling; use for the main contact action.

### Dark secondary button

Midnight Navy #001733 button with white text and an 8px radius, used for secondary actions such as the safety approach.

### Hero media card

Small rounded video preview over the hero footage, with a compact title, watch cue, and blue circular forward action.

### Metric strip

Four terse performance facts aligned along the hero base; present labels in tiny, tracked uppercase monospace.

### Feature card

Pale #f3f4f8 surface with Midnight Navy content and an 8px corner radius; keep decoration minimal.

### Capability gallery

A row of large driving-scene thumbnails with blue play controls and short descriptive captions.

### Partner logo rows

Monochrome partner marks arranged in aligned columns, separated by fine #e6e9f0 hairlines.

### Measured component styles

- **Primary button** (“Schedule a call”): background #006aed · text #ffffff · radius 8px · padding 14px 16px · 600 14px Inter
- **Secondary button** (“Our approach to safety”): background #001733 · text #ffffff · radius 8px · padding 14px 16px · 600 14px Inter
- **Link** (“Add Aurora Driver to your fleet.”): transparent background · text #006aed · radius 0px · padding 0px · 600 14px Inter
- **Card**: background #f3f4f8 · text #001733 · radius 8px · padding 0px · 400 16px Inter
- **Navigation item** (“Self-driving. Game-changing. WATCH Meet ”): transparent background · text #001733 · radius 0px · padding 0px · 400 16px Inter

## Do

- Lead with cinematic freight or hardware media.
- Use Gallery White as the default content canvas.
- Reserve Aurora Blue for actions, links, and selected bands.
- Keep headings left-aligned and tightly tracked.
- Use IBM Plex Mono only for compact technical labels.
- Create depth with imagery and contrast, not shadows.

## Don't

- Do not introduce unmeasured colors into the interface palette.
- Do not make every section dark or saturated blue.
- Do not add heavy shadows or decorative gradients.
- Do not use playful illustration in place of real vehicle imagery.
- Do not turn technical labels into large display text.
- Do not crowd the page with dense card grids.

## Agent prompt

Build a new Aurora-style page with a cinematic freight or autonomous-hardware hero, then transition into calm editorial content on Gallery White (#ffffff). Use Midnight Navy (#001733) for headings and controls, Slate Muted (#68748d) for supporting copy, and Aurora Blue (#006aed) selectively for the primary CTA and links. Use Mist Surface (#f3f4f8) for restrained cards and Cloud Hairline (#e6e9f0) for fine dividers. Keep Inter as the main sans-serif with tightly tracked semibold headlines; reserve IBM Plex Mono for tiny uppercase metrics and eyebrows. Favor broad centered layouts, left-aligned titles, ample section separation, and large authentic truck imagery. Use Stage Black (#000000) only where cinematic contrast supports the story. Keep surfaces flat, corners modest, and interaction cues clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen cinematic hero with left-aligned headline and a compact media card. | watch video, scan proof metrics | dark full-bleed media, white display headline, compact preview card, monospace metrics |
| 2 | feature-split | Editorial mission copy paired with a sequence of supporting images. | learn about the mission | white canvas, editorial copy, supporting image sequence |
| 3 | other | Short standalone heading section on a white canvas. | set product context | large section headline, open white space |
| 4 | product-showcase | Product video or image beside concise copy and a blue fleet link. | view product, add to fleet | media-and-copy split, primary CTA, inline link |
| 5 | video | Full-bleed video section with minimal surrounding interface. | watch product story | edge-to-edge media, minimal chrome |
| 6 | gallery | Editorial heading followed by large scenario-based video thumbnails. | browse videos, play scenario | capability gallery, play controls, caption overlays |
| 7 | testimonials | Two-column testimonial with quote content beside a truck photograph. | browse testimonial | large quotation, image pairing, carousel controls |
| 8 | logo-cloud | Single row of partner marks in equal columns. | scan partner logos | monochrome logos, hairline cell dividers |
| 9 | logo-cloud | A second, denser logo row divided into multiple columns. | scan ecosystem logos | monochrome logos, grid alignment, fine dividers |
| 10 | integrations | Dark integration section with left-aligned headline, copy, and partner list. | review platform partnerships | black section band, white heading, muted supporting copy |
| 11 | cta | Saturated blue full-width closing band with a dark CTA. | explore safety approach | Aurora Blue field, centered brand mark, dark button |

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