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

# Joby Aviation · Design System

> Cinematic flight framed by electric blue.

**Theme:** dark · **Industry:** travel · **Source:** https://www.jobyaviation.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._

A cinematic, video-led homepage introduces Joby's electric air taxi with a striking aircraft hero. Vivid blue sections and oversized cream typography keep the presentation confident and uncluttered.

## North star

Let cinematic aircraft media and an uninterrupted electric-blue canvas do the storytelling, with cream typography as the only strong interface contrast.

## Overview

The visual strategy is built around a saturated blue canvas (#007ae5) that continues well beyond the opening hero, making the page feel like one expansive brand environment. A cinematic aircraft video supplies the warm, atmospheric contrast; its natural beige and charcoal tones belong to the footage, not the core interface palette. Cream (#f5f4df) carries navigation, hero lettering, supporting copy and fine outlines, so content remains legible against blue and over dark video. Display headlines use Joby’s custom display face at a large scale, with tight negative tracking and compact line spacing. Text is sparse and centered over the hero, while the next section shifts to a broad, restrained headline and small edge-positioned labels. A floating blue tour card sits over the footage as a compact editorial promotion. The interface favors open space, full-bleed media, clean alignment and selective layering over dense grids or decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Flight Cream | `#f5f4df` | `--color-flight-cream` | surface | Navigation, hero headline and supporting text on blue or dark video; also card text and fine borders. |
| Electric Horizon | `#007ae5` | `--color-electric-horizon` | brand | Dominant page canvas and section background; also the blue promotional card surface. |
| Night Ink | `#0e1620` | `--color-night-ink` | neutral | Measured dark text color; use sparingly for dark text where a light surface appears, not as a dominant page background. |

### Semantic aliases

`--color-canvas` → `#007ae5` (Electric Horizon) · `--color-surface` → `#f5f4df` (Flight Cream) · `--color-text` → `#0e1620` (Night Ink) · `--color-text-muted` → `#f5f4df` (Flight Cream) · `--color-border` → `#f5f4df` (Flight Cream) · `--color-accent` → `#007ae5` (Electric Horizon)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e1620` | `#007ae5` | 4.26:1 | AA-large |
| `#0e1620` | `#f5f4df` | 16.36:1 | AAA |
| `#f5f4df` | `#007ae5` | 3.84:1 | AA-large |
| `#007ae5` | `#f5f4df` | 3.84:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| jobyText | `--font-body` | webfont | 450, 400, 550, 500 | Navigation, body copy, captions and promotional card text. | Inter |
| jobyDisplay | `--font-display` | webfont | 550 | Oversized hero and section headlines. | Manrope |
| Joby Sans Display | `--font-joby-sans-display` | system | 500 | System-served display fallback for branded display text. | Manrope |

- **jobyText:** Compact sans-serif text with subtly tight negative tracking; weights measured from 400 to 550.
- **jobyDisplay:** Use a confident display scale, medium weight, tight negative tracking and compact line height.
- **Joby Sans Display:** Medium-weight sans display fallback; keep headlines clean and avoid all-caps styling.

### Type scale — Custom (ratio ≈ 3.19, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 142.5px | 550 | 1 | -0.03em | — | jobyDisplay | Extra-large statement typography for prominent brand messaging. |
| h1 | 80px | 550 | 1 | -0.03em | — | jobyDisplay | Main hero headline, set across two compact lines. |
| body | 14px | 400 | 1.3 | -0.01em | — | jobyText | Short supporting copy and promotional card details. |
| caption | 12px | 450 | 1.2 | -0.02em | — | jobyText | Small secondary labels and supporting annotations. |
| nav | 16px | 500 | 0.89 | -0.02em | — | jobyText | Top-level navigation labels, including the Investors link. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 7, 10, 12, 14, 15, 16, 24, 32, 40, 46, 188 px.
- Section rhythm 32px · element gap 24px · card padding — · max content width 1360px.

The opening is a full-bleed, single-column media hero with navigation overlaid at the top and a centered headline anchored near its lower edge. The aircraft video has a curved lower boundary that reveals the blue canvas beneath it. A small promotional card floats near the upper-right of the hero. The page remains spacious and visually sparse through a long blue section; the following block centers a large headline and places small supporting links toward opposite edges. Measured page max width is 1360px, with comfortable density.

## Shape & elevation

- Radius: card `16px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 1.837px 1.837px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.3) 0px 16px 47.6px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.33, 1, 0.68, 1)` on interactive elements.

Most of the page is flat blue, with no decorative gradients or repeated card grid. Layer the promotional card above hero media with a soft, deep shadow and rounded corners. Its fine light border separates the card from the image. Keep other interface elements visually light and avoid adding unnecessary elevation.

## Imagery

Use cinematic video or high-quality aircraft photography as the primary visual, showing the eVTOL in an atmospheric urban setting. Frame the aircraft large against a warm, muted sky and skyline, with the media spanning nearly the full viewport. Preserve natural footage color rather than applying blue tinting; the vivid interface canvas provides the contrast. Small aircraft illustrations appear within the tour promotion card.

## Components

### Overlay navigation

Place a cream menu mark at the upper left, a small brand symbol near the top center, and the Investors link at the upper right over the hero media.

### Video hero

Use full-bleed aircraft footage, a curved lower media edge, and a centered cream two-line headline near the bottom.

### Tour promotion card

Float a blue card over the hero with cream copy, aircraft imagery, a fine light border, 16px radius, and a soft shadow.

### Hero supporting caption

Center a small cream sentence beneath the video on the blue canvas, separated from the headline.

### Statement section

Set a broad cream headline centered on the uninterrupted blue background, with small secondary links near opposing edges.

### Measured component styles

- **Primary button**: transparent background · text #f5f4df · radius 0px · padding 0px · 400 13.3333px Arial · shadow rgba(0, 0, 0, 0) 0px 1.837px 1.837px 0px
- **Link** (“Electric Skies: Joby's U.S. Tour 2026”): transparent background · text #f5f4df · radius 0px · padding 14px 15px · 400 16px jobyText
- **Card** (“Electric Skies: Joby's U.S. Tour 2026”): background #007ae5 · text #f5f4df · border 1px solid #f8f7e9 · radius 16px · padding 0px · 400 16px jobyText · shadow rgba(0, 0, 0, 0.3) 0px 16px 47.6px 0px
- **Navigation item** (“Investors”): transparent background · text #f5f4df · radius 0px · padding 0px · 400 16px jobyText

## Do

- Use #007ae5 as the dominant page canvas.
- Set interface text in #f5f4df over blue and dark media.
- Make the aircraft video the primary first-screen focal point.
- Keep display headlines large, centered and tightly tracked.
- Overlay navigation lightly instead of creating a separate header band.
- Reserve card styling for focused promotional content.

## Don't

- Do not turn warm footage colors into additional interface brand colors.
- Do not fill the blue sections with unnecessary content or decoration.
- Do not introduce gradients absent from the measured design.
- Do not add dense grids, multiple competing cards or heavy borders.
- Do not use small, loose-tracked display headlines.
- Do not make the interface rely on shadows for every element.

## Agent prompt

Build a new Joby Aviation page using a vivid Electric Horizon canvas (#007ae5) as the main visual field, with Flight Cream (#f5f4df) for navigation, headlines, captions and fine outlines. Keep Night Ink (#0e1620) limited to appropriate dark text on light surfaces. Lead with cinematic, full-bleed aircraft media in natural warm tones; overlay a minimal top navigation and an oversized, tightly tracked Joby-style display headline. Give the media a distinctive curved lower edge where it meets the blue page. Use Joby-like display and text fonts, substituting Manrope and Inter if unavailable. Keep content sparse, aligned and spacious. Add a single floating promotional card only when useful, with restrained border and shadow. Avoid gradients, dense grids and decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero; navigation overlays the top, headline centers near the lower edge, supporting copy sits below. | immersive video, overlay navigation, promotional card | curved media edge, centered display headline, cream-on-video text, floating blue card |
| 2 | other | A spacious blue section with a large centered statement and small secondary links near opposite sides. | statement-led storytelling, secondary experience links | uninterrupted blue canvas, oversized cream headline, edge-positioned small labels |

## Source CSS custom properties (selected)

```css
--ease-linear: cubic-bezier(.25,.25,.75,.75);
--ease-in-sine: cubic-bezier(.12,0,.39,0);
--ease-out-sine: cubic-bezier(.61,1,.88,1);
--ease-in-out-sine: cubic-bezier(.37,0,.63,1);
--ease-in-quad: cubic-bezier(.11,0,.5,0);
--ease-out-quad: cubic-bezier(.5,1,.89,1);
--ease-in-out-quad: cubic-bezier(.45,0,.55,1);
--ease-in-cubic: cubic-bezier(.32,0,.67,0);
--ease-out-cubic: cubic-bezier(.33,1,.68,1);
--ease-in-out-cubic: cubic-bezier(.65,0,.35,1);
--ease-in-quart: cubic-bezier(.5,0,.75,0);
--ease-out-quart: cubic-bezier(.25,1,.5,1);
--ease-in-out-quart: cubic-bezier(.76,0,.24,1);
--ease-in-quint: cubic-bezier(.64,0,.78,0);
--ease-out-quint: cubic-bezier(.22,1,.36,1);
--ease-in-out-quint: cubic-bezier(.83,0,.17,1);
--ease-in-expo: cubic-bezier(.7,0,.84,0);
--ease-out-expo: cubic-bezier(.16,1,.3,1);
--ease-in-out-expo: cubic-bezier(.87,0,.13,1);
--ease-in-circ: cubic-bezier(.55,0,1,.45);
--ease-out-circ: cubic-bezier(0,.55,.45,1);
--ease-in-out-circ: cubic-bezier(.85,0,.15,1);
--ease-in-back: cubic-bezier(.36,0,.66,-.56);
--ease-out-back: cubic-bezier(.34,1.56,.64,1);
--ease-in-out-back: cubic-bezier(.68,-.6,.32,1.6);
--ease-out-curve-cubic: cubic-bezier(.35,.2,0,1);
--ease-power1-in: cubic-bezier(.55,.085,.68,.53);
--ease-power1-out: cubic-bezier(.25,.46,.45,.94);
--ease-power1-inOut: cubic-bezier(.455,.03,.515,.955);
--ease-power2-in: cubic-bezier(.55,.085,.68,.53);
--ease-power2-out: cubic-bezier(.25,.46,.45,.94);
--ease-power2-inOut: cubic-bezier(.455,.03,.515,.955);
--ease-power3-in: cubic-bezier(.55,.085,.68,.53);
--ease-power3-out: cubic-bezier(.25,.46,.45,.94);
--ease-power3-inOut: cubic-bezier(.455,.03,.515,.955);
--ease-power4-in: cubic-bezier(.895,.03,.685,.22);
--ease-power4-out: cubic-bezier(.165,.84,.44,1);
--ease-power4-inOut: cubic-bezier(.77,0,.175,1);
--ease-snappy: cubic-bezier(.2,.21,0,1);
--title-duration: .667s;
```

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