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

# Air · Design System

> A deep-blue canvas for bold creative work

**Theme:** dark · **Industry:** ai · **Source:** https://air.inc/ · **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._

Air’s homepage pairs an expansive deep-blue canvas with oversized condensed headlines and immersive creative imagery. The restrained interface lets the brand story, product footage, and conversion actions stand apart.

## North star

Keep the interface calm and sparse against a continuous deep-blue field, reserving oversized white type and vivid imagery for the story.

## Overview

The page is built around a nearly continuous deep-blue canvas (#13396a), which gives the long-form homepage a unified, cinematic field. White (#ffffff) carries high-contrast display messaging and key controls; muted blue-gray (#a1b0c3) softens supporting copy. The first viewport notably shifts into a full-bleed pastel visual, so treat that imagery as a distinct hero treatment rather than a replacement for the measured site canvas. Typography combines a heavy, condensed uppercase display face for emphatic statements with Control’s compact, practical sans-serif for navigation and body text. The layout is intentionally sparse: a slim top navigation, expansive vertical intervals, and centered media or content groups. Rounded outlined buttons and fine borders provide interface definition without relying on shadows. Product and creative visuals bring warmer colors into the otherwise controlled blue-and-white system, keeping the page expressive while its UI stays restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Air Deep Blue | `#13396a` | `--color-air-deep-blue` | brand | Dominant page canvas and primary brand field across the long-form sections. |
| Cloud White | `#ffffff` | `--color-cloud-white` | surface | High-contrast display text, navigation controls, outlined CTA edges, and occasional light surfaces. |
| Soft Black | `#1b1b1b` | `--color-soft-black` | neutral | Dark text on light controls and surfaces, including navigation and form content. |
| Haze Blue | `#a1b0c3` | `--color-haze-blue` | neutral | Muted supporting copy against the deep-blue canvas. |
| Quiet Line | `#e5e5e5` | `--color-quiet-line` | semantic | Fine borders around inputs and select controls. |
| Dusk Blue | `#2b4d79` | `--color-dusk-blue` | accent | Subtle card and media outlines within the blue-on-blue interface. |
| Paper Mist | `#f5f5f5` | `--color-paper-mist` | surface | Pale input and navigation surfaces, contrasting with dark text. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional dark control text and fine button borders; not the main page background. |
| Slate Blue | `#597496` | `--color-slate-blue` | accent | Minor card detail or border tone, secondary to the dominant deep-blue canvas. |

### Semantic aliases

`--color-canvas` → `#13396a` (Air Deep Blue) · `--color-surface` → `#f5f5f5` (Paper Mist) · `--color-surface-2` → `#ffffff` (Cloud White) · `--color-text` → `#ffffff` (Cloud White) · `--color-text-muted` → `#1b1b1b` (Soft Black) · `--color-text-subtle` → `#a1b0c3` (Haze Blue) · `--color-border` → `#e5e5e5` (Quiet Line) · `--color-accent` → `#13396a` (Air Deep Blue) · `--color-accent-2` → `#2b4d79` (Dusk Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#13396a` | 11.53:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#1b1b1b` | `#13396a` | 1.49:1 | fail |
| `#1b1b1b` | `#f5f5f5` | 15.8:1 | AAA |
| `#1b1b1b` | `#ffffff` | 17.22:1 | AAA |
| `#a1b0c3` | `#13396a` | 5.22:1 | AA |
| `#a1b0c3` | `#f5f5f5` | 2.02:1 | fail |
| `#a1b0c3` | `#ffffff` | 2.21:1 | fail |
| `#13396a` | `#f5f5f5` | 10.58:1 | AAA |
| `#13396a` | `#ffffff` | 11.53:1 | AAA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Control | `--font-body` | webfont | 500 | Primary sans-serif for navigation, body copy, labels, and standard interface text. | Inter |
| Control Compressed | `--font-display` | webfont | 900 | Oversized display statements and emphatic uppercase headings. | Oswald |
| Control Cursive | `--font-control-cursive` | webfont | 500 | Measured secondary heading role; use for select expressive heading moments. | Caveat |

- **Control:** Measured at medium weight for most usage; keep body copy readable and compact.
- **Control Compressed:** Very heavy, tightly condensed, uppercase display treatment; use sparingly for impact.
- **Control Cursive:** Measured at medium weight; preserve its contrasting expressive character rather than applying broadly.

### Type scale — Custom (ratio ≈ 2.006, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 259px | 900 | 0.85 | 0 | uppercase | Control Compressed | Oversized uppercase condensed statements such as the work-focused headline. |
| h1 | 40px | 400 | 1 | 0 | — | Control TNT | Primary page or section heading in the measured heading system. |
| h2 | 32px | 500 | 1.1 | 0 | — | Control Cursive | Expressive secondary section headings. |
| h3 | 20px | 500 | 1.4 | 0 | — | Control | Feature and card headings, including workflow concepts. |
| body | 16px | 500 | 1.5 | 0 | — | Control | Standard explanatory copy and product descriptions. |
| caption | 13px | 500 | 1.5 | 0 | — | Control | Small supporting labels and media details. |
| nav | 16px | 500 | 1.5 | 0 | — | Control | Top-level navigation links and header controls. |

## Spacing & layout

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

Use a spacious, vertically extended single-page composition with a measured maximum content width of 1150px. The header aligns navigation to the left and account or conversion actions to the right. Large areas of uninterrupted blue separate major content moments; feature content can use three columns, while media and form content sit in centered, contained groups. Keep alignment clean and typography-led, with measured section gaps of 120px and element gaps of 24px as the rhythm anchors. Avoid dense dashboard-like packing.

## Shape & elevation

- Radius: button `8px` · input `4px` · card `12px` · media `8px` · nav `8px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is mostly flat, with no measured shadow system. Separate elements using fine borders, blue-on-blue outlines, and contrast rather than raised cards. Rounded corners define buttons, media, and cards; light form surfaces create the strongest layer contrast against the deep-blue background.

## Imagery

Lead with full-bleed, soft pastel creative imagery featuring translucent sculptural forms; this hero visual is distinct from the measured deep-blue canvas. Farther down, use embedded product or brand video, creative assets, and restrained interface previews. Frame media as focal moments within generous blue space, with rounded edges where appropriate. Warm imagery is expressive content, not evidence of a broader warm UI palette.

## Components

### Top navigation

Compact Control sans links sit at the top; actions align opposite, with Login and outlined or filled-looking light CTA treatments.

### Outlined CTA

Use a measured 8px radius, white border, and 0 16px horizontal padding for the white-text “Get some Air” treatment.

### Workflow feature cards

Three-column story content introduces Understand, Organize, and Scale; cards use white text and subtle #2b4d79 outlines.

### Product video

Embedded creative footage acts as a visual pause within the blue page, with softly rounded media framing.

### Lead form

Light card surface with dark text; inputs use #f5f5f5 fill, #e5e5e5 borders, and a measured 4px radius.

### Large display statement

A high-impact, uppercase condensed headline in white, set apart from smaller practical copy.

### Measured component styles

- **Primary button** (“Login”): transparent background · text #1b1b1b · border 1px solid #000000 · radius 8px · padding 0px 16px · 500 16px Control
- **Input** (“Company size* 1-10 11-50 51-100 101-500 ”): background #f5f5f5 · text #1b1b1b · border 1px solid #e5e5e5 · radius 4px · padding 10px · 500 16px Control
- **Card** (“Organize Your library, structured and cu”): transparent background · text #ffffff · border 1px solid #2b4d79 · radius 12px · padding 0px · 500 16px Control
- **Navigation item** (“Creative Intelligence Understand everyth”): transparent background · text #1b1b1b · radius 0px · padding 0px · 500 16px Control

## Do

- Use #13396a as the main page canvas.
- Reserve oversized uppercase type for major statements.
- Keep navigation and supporting copy compact.
- Use white text to establish strong contrast on blue.
- Give media and major sections generous breathing room.
- Use fine borders instead of prominent shadows.

## Don't

- Do not replace the blue canvas with a generic white SaaS layout.
- Do not use display typography for every heading.
- Do not treat pastel hero imagery as the site-wide UI palette.
- Do not crowd the long-form page with dense content blocks.
- Do not add heavy shadows or excessive card elevation.
- Do not introduce unmeasured colors or arbitrary component dimensions.

## Agent prompt

Build a new Air-style page with a spacious, editorial SaaS feel. Use Air Deep Blue (#13396a) as the dominant canvas, Cloud White (#ffffff) for high-impact type and key controls, and Haze Blue (#a1b0c3) for quieter supporting copy. Keep the header slim, with navigation on one side and account or CTA actions on the other. Use a heavy condensed uppercase display face only for headline moments; set practical UI and body content in a clean medium-weight sans. Organize content into widely separated sections with occasional centered media and light form surfaces. Use restrained outlines such as Dusk Blue (#2b4d79), Quiet Line (#e5e5e5), and measured rounded corners rather than shadows. Let creative imagery add color without changing the interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed visual with navigation overlaid at the top. | Top-level navigation, Primary conversion actions | Pastel creative visual, Transparent header |
| 2 | how-it-works | Deep-blue field with centered prompt and three workflow columns. | Workflow overview, Three-step explanation | Muted supporting text, Subtle outlined feature card |
| 3 | video | Centered video within a short blue section. | Watch product story | Embedded video, Rounded media frame |
| 4 | other | Large condensed headline on the blue canvas. | Brand positioning | Oversized uppercase type, High contrast |
| 5 | other | Brief centered control or selection strip. | Choose a feature theme | Compact segmented control |
| 6 | other | Long-form feature area on a continuous blue background. | Explore product capabilities | Sparse interface preview, Large negative space |
| 7 | feature-split | Content-led section within the uninterrupted blue page. | Feature exploration | Blue-on-blue framing |
| 8 | product-showcase | Large showcase region with generous vertical separation. | Inspect product experience | Immersive showcase space |
| 9 | other | Short blue transition between major page regions. | Continue page narrative | Uninterrupted background |
| 10 | feature-grid | Three aligned columns with left-starting headings. | Understand the product benefits | Three-column grid, White headings, Muted copy |
| 11 | other | Very tall, mostly uninterrupted blue section. | Continue toward conversion | Large negative space, Continuous canvas |
| 12 | contact | Centered light form card on the blue background. | Submit contact details, Request a demo | Light form surface, Pale input fills, Fine borders |

## Source CSS custom properties (selected)

```css
--page-bg: #fff8dc;
--page-bg-rgb: 255,248,220;
--page-bg-text: #1b1b1b;
--black-text: #1b1b1b;
--white-text: #1b1b1b;
--accent: #4c96f7;
--accent-rgb: 76,150,247;
--accent-text: #1b1b1b;
--haze-text: #1b1b1b;
--red-text: #1b1b1b;
--green-text: #1b1b1b;
--blue-text: #1b1b1b;
--purple-text: #1b1b1b;
--black-void-text: #fff;
--whiteout-text: #1b1b1b;
--sky-text: #fff;
--altitude-text: #fff;
--sunflare-text: #1b1b1b;
--ember-text: #1b1b1b;
--flash-text: #fff;
--aurora-text: #1b1b1b;
--dust-text: #1b1b1b;
--soil-text: #1b1b1b;
--teal-text: #fff;
--canopy-text: #1b1b1b;
--tweet-border: 1px solid rgb(207,217,222);
--tweet-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--tweet-font-color: rgb(15,20,25);
--tweet-font-color-secondary: rgb(83,100,113);
--tweet-bg-color: #fff;
--tweet-bg-color-hover: rgb(247,249,249);
--tweet-quoted-bg-color-hover: rgba(0,0,0,0.03);
--tweet-color-blue-primary: rgb(29,155,240);
--tweet-color-blue-primary-hover: rgb(26,140,216);
--tweet-color-blue-secondary: rgb(0,111,214);
--tweet-color-blue-secondary-hover: rgba(0,111,214,0.1);
--tweet-color-red-primary: rgb(249,24,128);
--tweet-color-red-primary-hover: rgba(249,24,128,0.1);
--tweet-color-green-primary: rgb(0,186,124);
--tweet-color-green-primary-hover: rgba(0,186,124,0.1);
```

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