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

# Aira · Design System

> Editorial clarity meets dark, data-rich product storytelling

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

Aira’s homepage combines spacious editorial typography and restrained light sections with a predominantly dark, cinematic product story. Realistic CRM interfaces, business photography, and rounded calls to action make its AI and financial-data offering feel tangible.

## North star

Pair refined editorial headlines with tangible product evidence, using near-black storytelling bands and warm, quiet light surfaces.

## Overview

The page alternates between warm, pale surfaces and long near-black sections, with the dark canvas carrying most of the product story. White and cream CTA pills stand out clearly against those dark bands, while dark charcoal text and subtle gray rules keep the light sections composed. Gestura’s high-contrast editorial serif gives major headlines a distinctive, calm voice; Inter handles navigation, explanatory copy, and interface-like details. The opening hero overlays white serif type and muted supporting copy on a cinematic workspace image with a monitor showing Aira’s product. Below, pale CRM and data sections use large interface screenshots, followed by dark feature stories, device mockups, news, events, and a photographic gallery. Layouts shift between centered statements, two-column feature splits, and dense image or UI groupings. Rounded pill buttons and cards soften the otherwise crisp, restrained system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clean White | `#ffffff` | `--color-clean-white` | surface | Bright text on dark navigation and feature bands; also appears in product UI and the canvas. |
| Aira Black | `#080808` | `--color-aira-black` | brand | Primary dark section and navigation background, especially across the feature and events narrative. |
| Warm Paper | `#f9f8f6` | `--color-warm-paper` | surface | Warm pale surface for the footer and light CTA buttons against dark backgrounds. |
| Soft Stone | `#f0efed` | `--color-soft-stone` | surface | Light section band beneath the hero, with dark editorial text. |
| Charcoal Ink | `#2c2c2b` | `--color-charcoal-ink` | neutral | Muted body and link text on pale surfaces; also used on dark-text CTA variants. |
| Deep Fade | `#040404` | `--color-deep-fade` | neutral | Near-black gradient stop within dark media treatment, not a distinct section surface. |
| Graphite Text | `#1c1d1f` | `--color-graphite-text` | neutral | Primary text, links, and dark text on light CTA or badge surfaces. |
| Quiet Gray | `#848381` | `--color-quiet-gray` | neutral | Secondary muted text, including subdued explanatory copy. |
| Slate Gray | `#767675` | `--color-slate-gray` | neutral | Low-emphasis copy and supporting text on light surfaces. |
| Pencil Rule | `#d8d7d5` | `--color-pencil-rule` | semantic | Subtle borders and card hairlines; separates content without strong contrast. |
| Midnight Gray | `#525251` | `--color-midnight-gray` | neutral | Secondary text within subdued interface or supporting content. |
| Cloud Divider | `#e1e1df` | `--color-cloud-divider` | semantic | Pale border tone on cards and product UI details. |
| Muted Graphite | `#6a6967` | `--color-muted-graphite` | neutral | Low-emphasis text details and supporting labels. |
| Smoked Charcoal | `#3a3a38` | `--color-smoked-charcoal` | neutral | Occasional dark card and interface detail; not a primary background. |
| Ash Text | `#5a5a58` | `--color-ash-text` | neutral | Muted text detail, subordinate to main copy. |
| Silver Hush | `#989796` | `--color-silver-hush` | neutral | Very subdued supporting text and fine UI labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Clean White) · `--color-surface` → `#080808` (Aira Black) · `--color-surface-2` → `#f9f8f6` (Warm Paper) · `--color-surface-3` → `#f0efed` (Soft Stone) · `--color-text` → `#1c1d1f` (Graphite Text) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-text-subtle` → `#2c2c2b` (Charcoal Ink) · `--color-border` → `#d8d7d5` (Pencil Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1d1f` | `#ffffff` | 16.87:1 | AAA |
| `#1c1d1f` | `#080808` | 1.19:1 | fail |
| `#1c1d1f` | `#f9f8f6` | 15.89:1 | AAA |
| `#1c1d1f` | `#f0efed` | 14.68:1 | AAA |
| `#ffffff` | `#080808` | 20.03:1 | AAA |
| `#ffffff` | `#f9f8f6` | 1.06:1 | fail |
| `#ffffff` | `#f0efed` | 1.15:1 | fail |
| `#2c2c2b` | `#ffffff` | 13.98:1 | AAA |
| `#2c2c2b` | `#080808` | 1.43:1 | fail |
| `#2c2c2b` | `#f9f8f6` | 13.17:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))`
- `linear-gradient(rgb(8, 8, 8), rgba(8, 8, 8, 0.6) 25%, rgba(8, 8, 8, 0.6) 74%, rgb(8, 8, 8))`
- `linear-gradient(90deg, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.42) 34%, rgba(8, 8, 8, 0) 56%), linear-gradient(rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0) 96px)`
- `linear-gradient(158deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 34%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, buttons, captions, and product-interface text. | Inter |
| Gesturaheadline | `--font-display` | webfont | 400, 600 | Primary large editorial headlines, especially hero and feature statements. | Cormorant Garamond |
| Gestura Headline | `--font-gestura-headline` | webfont | 400 | Editorial article and link headlines. | Cormorant Garamond |
| Haffer Mono | `--font-mono` | system | 400 | Uppercase eyebrow labels and section identifiers. | Space Mono |
| SF Mono | `--font-sf-mono` | system | 400, 500 | Code-like and technical interface details. | IBM Plex Mono |

- **Inter:** Use measured regular to bold weights; compact, slightly negative tracking for body and headings; buttons and navigation stay sentence case.
- **Gesturaheadline:** Regular display weight with tight negative tracking and compact leading; preserve elegant serif contrast.
- **Gestura Headline:** Serif text at regular weight; use for news links and smaller editorial titles.
- **Haffer Mono:** Monospaced uppercase labels with visibly expanded tracking; keep usage sparse.
- **SF Mono:** Small monospaced supporting details; keep text compact and readable.

### Type scale — Perfect Fourth (ratio ≈ 1.349, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | -0.02em | — | Gesturaheadline | Hero headline and leading brand statement. |
| h2 | 36px | 400 | 1 | -0.02em | — | Gesturaheadline | Major section headlines and feature statements. |
| h3 | 32px | 500 | 1.2 | -0.004em | — | Inter | Inter subheads and supporting feature titles. |
| h4 | 27px | 400 | 1.08 | -0.025em | — | Gestura Headline | Smaller editorial serif headlines and card titles. |
| body | 14.5px | 400 | 1.4 | -0.01em | — | Inter | Supporting descriptions and explanatory copy. |
| caption | 14px | 400 | 1.55 | -0.01em | — | Inter | Compact supporting details, news summaries, and UI labels. |
| button | 14px | 500 | 1 | 0 | — | Inter | Pill CTA labels, set in medium-weight Inter. |
| nav | 14px | 500 | 1 | 0 | — | Inter | Header navigation links in compact Inter. |
| link | 20px | 400 | 1.2 | -0.01em | — | Gestura Headline | Editorial news and content links in serif type. |
| eyebrow | 20px | 400 | 1 | 0.12em | uppercase | Haffer Mono | Uppercase mono labels and numbered section markers. |
| code | 11.5px | 400 | 1.6 | -0.013em | — | SF Mono | Technical snippets and code-like interface text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 18, 20, 22 px.
- Section rhythm 43px · element gap 8px · card padding — · max content width 1354px.

The measured content max width is 1354px, with full-bleed media and section backgrounds. Use a comfortable density and a 4px-based spacing system; the measured section gap is 43px and element gap is 8px. The page rhythm alternates wide, image-led hero and product sections with compact editorial content. Align feature splits to a strong two-column structure, use four-column groupings for selected product content, and let cards or gallery tiles form denser grids. Headlines align left in most sections, with occasional centered statements and stats.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `8px` · badge `9999px` · nav `9999px` · link `9999px` · xs `1px` · sm `3px` · md `4px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (other, card): `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`
- Shadow `lg` (other): `rgba(255, 255, 255, 0.3) 0px 0px 30px 6px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 18px 48px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.08) 0px 1px 20px 3px`
- Shadow `sm` (other, card): `rgba(44, 44, 43, 0.05) 0px 1px 3px 0px`
- Shadow `sm-2` (other): `rgba(93, 205, 55, 0.45) 0px 0px 6px 1px`
- Motion: standard transition `0.2s ease` on interactive elements.

The visual system is mostly flat, with contrast between large light and dark section bands doing the structural work. Cards use subtle measured gray borders and restrained shadows; product media can sit above the canvas with more pronounced depth. Rounded cards and pill controls soften the crisp sections without excessive layered panels.

## Imagery

Use cinematic workplace photography and realistic product-interface imagery: monitor and phone mockups, CRM dashboards, research screens, and event photography. Hero and feature images are broad, darkened or naturally moody, with text layered where contrast allows. Product screenshots remain crisp and bright against dark surroundings. The gallery uses a varied masonry-like arrangement of business gatherings; avoid adding illustrative brand colors not established by the measured palette.

## Components

### Navigation

Dark top bar with white Aira identity and compact Inter links; sign-in and demo actions appear as rounded pills.

### Hero CTA pair

A light primary Book a demo pill and a dark outlined HubSpot integration action sit beneath the hero copy.

### Product feature split

Dark section, left-aligned serif feature copy and CTA, paired with a large product or device image.

### Light product panel

Warm or stone-colored section containing crisp CRM screenshots, dashboards, or integration details.

### News cards

Light-background editorial feed with image-led cards, serif story titles, and subdued supporting copy.

### Event gallery

Dark-background photo collage with rounded image tiles and small pale pill labels.

### Footer

Warm pale surface with Aira identity, grouped link columns, and understated legal details.

### Measured component styles

- **Primary button** (“Book a demo”): background #f9f8f6 · text #1c1d1f · border 1px solid #f9f8f6 · radius 999px · padding 8px 16px · 500 14px Inter
- **Secondary button** (“Book a demo”): background #2c2c2b · text #f0efed · radius 999px · padding 13px 24px · 500 14px Inter
- **Link** (“All news →”): transparent background · text #2c2c2c · radius 0px · padding 0px · 400 13px Inter
- **Card** (“Winsec Industries financials View financ”): background #ffffff · text #2c2c2b · border 1px solid #272e33 · radius 16px · padding 0px · 400 14.4px Inter · shadow rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 18px 48px 0px
- **Badge** (“Dubai Yacht Event”): background #b3b3b3 · text #1c1d1f · border 1px solid #262626 · radius 999px · padding 4px 10.4px · 400 14px Inter
- **Navigation item** (“About us CRM integrations News Events Re”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14.4px Inter

## Do

- Alternate near-black storytelling bands with warm pale information sections.
- Use serif display type for major editorial headlines.
- Keep body copy and controls in Inter.
- Place real product UI or business imagery beside feature explanations.
- Use rounded pill styling for primary actions and event labels.
- Keep borders and shadows restrained against strong section contrast.

## Don't

- Do not introduce bright accent colors absent from the measured palette.
- Do not make every section a card grid.
- Do not replace editorial headlines with generic heavy sans-serif typography.
- Do not overuse shadows or decorative gradients.
- Do not crowd supporting copy around large product imagery.
- Do not use bright white backgrounds where the warm pale surfaces are shown.

## Agent prompt

Build a new Aira-style page with a clear editorial/product balance. Use Aira Black (#080808) for cinematic storytelling sections, Warm Paper (#f9f8f6) and Soft Stone (#f0efed) for calm content bands, and Clean White (#ffffff) for contrast in navigation and product media. Set major headlines in a Gestura-like serif, with Inter for body text, navigation, and buttons; reserve Haffer Mono-style uppercase text for sparse eyebrow labels. Structure content in full-width bands with a centered content frame, alternating two-column feature splits and product-image groupings. Show credible CRM screens, monitor or phone mockups, and workplace photography rather than abstract decoration. Use pill-shaped CTAs, fine neutral borders, and minimal shadows. Keep copy concise and the layouts spacious.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cinematic workspace image; left-aligned headline and copy beside a large CRM monitor. | primary demo CTA, integration link | dark image overlay, serif headline, pill buttons |
| 2 | product-showcase | Warm gray band with a heading, market coverage line, and multiple wide product panels. | show product workflow, explain data coverage | dashboard screenshots, light panels, dense UI tables |
| 3 | stats | Centered statement on a dark, full-bleed earth image followed by four metric columns. | communicate scale, demo CTA | large numeric stats, dark media background |
| 4 | feature-split | Two stacked dark feature rows with copy on the left and monitor or phone media on the right. | feature explanation, demo CTA per feature | numbered eyebrow, device imagery, thin dividers |
| 5 | content-feed | Pale band with a left-aligned section heading and three image-led news cards. | browse news, open story | editorial serif titles, three-column cards, image thumbnails |
| 6 | feature-split | Dark two-column row with explanatory copy and layered phone or notification imagery. | explain monitoring, demo CTA | numbered eyebrow, device mockup, dark canvas |
| 7 | feature-split | Dark two-column feature row with left copy and a large research interface image. | introduce on-demand research, demo CTA | numbered eyebrow, large product media, dark canvas |
| 8 | feature-split | Dark split layout pairing concise left-side copy with a cluster of device and data visuals. | explain portfolio coverage, demo CTA | serif headline, layered product imagery, dark canvas |
| 9 | product-showcase | Centered prompt and product interface on a dark band, with a large browser-like screen. | show a research query, demonstrate answer flow | browser frame, chat interface, light screen on dark |
| 10 | feature-split | Dark two-column section with text and actions on the left, event listings on the right. | view events, request invitation | editorial event cards, small thumbnails, pill actions |
| 11 | gallery | Dark gallery area with a three-column collage of varied-height event photographs. | browse event moments | rounded photo tiles, overlaid pill labels, masonry-like grid |
| 12 | footer | Warm pale footer with Aira mark, grouped link columns, and compact legal details. | navigate site, access company details | two-column link groups, serif footer links, small legal text |

## Source CSS custom properties (selected)

```css
--background-color--background-primary: #f9f8f6;
--text-color--text-primary: #1c1d1f;
--text-color--text-secondary: #70706f;
--link-color--link-primary: #1c1d1f;
--link-color--link-alternate: white;
--background-color--background-alternate: #080808;
--text-color--text-alternate: white;
--base-color-neutral--white: white;
--_numbers---border-radius--round: 999px;
--background-color--background-tertiary: #aaa;
--base-color-neutral--neutral-darker: #1c1d1f;
--base-color-neutral--black: #080808;
--base-color-neutral--neutral-dark: #444;
--base-color-brand--white<deleted|relume-variable-color-primary-2>: white;
--_numbers---border-radius--medium: .5rem;
--border-color--border-secondary: #fafafb;
--border-color--border-primary: #edeff3;
--text-color--text-alternate-secondary: #ffffffb3;
--background-color--background-secondary: #fafafb;
--base-color-brand--black<deleted|relume-variable-color-primary-1>: black;
--background-color--background-error: #fef3f2;
--text-color--text-error: #b42318;
--base-color-neutral--neutral-lighter: #edeff3;
--base-color-neutral--neutral-lightest: #fafafb;
--_numbers---border-radius--large: .75rem;
--_apps---colors--background<deleted|variable-c12774f5-e0b5-8b56-88c2-8808c9cb777c>: #f9f8f6;
--border-color--section-divider: #edecea;
--_numbers---border-radius--small: .25rem;
--_fonts---display: Gesturaheadline,Georgia,sans-serif;
--_fonts---body: Inter,Arial,sans-serif;
--_interactions---section-grow--radius: 2rem;
--_numbers---border-radius--none: 0rem;
--base-color-brand--blue: #2d62ff;
--base-color-brand--brand-white: #f9f8f6;
--base-color-neutral--neutral-light: #aaa;
--base-color-neutral--neutral: #70706f;
--base-color-neutral--neutral-darkest: #101010;
--base-color-system--success-green: #027a48;
--base-color-system--success-green-light: #ecfdf3;
--base-color-system--error-red: #b42318;
```

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