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

# Aaru · Design System

> A dark canvas for simulating real-world decisions.

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

Aaru pairs a near-black editorial layout with vivid blue simulation scenes and precise, data-led content. White typography, restrained interface details, and immersive imagery make the page feel analytical yet cinematic.

## North star

Keep the interface nearly black and typographically restrained, letting vivid simulation imagery carry the drama.

## Overview

The page contrasts a mostly black canvas with a cobalt-blue opening scene that immediately establishes the brand’s simulation world. White is reserved for high-contrast headings, navigation, and primary controls; muted grays handle supporting copy, while dark charcoal defines cards and hairlines. Blue is a prominent section color, and a bright green trace appears in a technical visual rather than as a general UI accent. ABC Oracle’s clean sans-serif typography is consistently regular-weight, with compact body copy and large, tightly tracked headings. The layout moves between open, spacious sections and focused two-column or multi-column content: a hero, partner marks, process explanation, case study, and domain cards. Image-led scenes use dark overlays and contained rounded frames, while most interface surfaces remain flat. Generous black space gives the long page a deliberate rhythm and keeps dense proof points readable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal White | `#ffffff` | `--color-signal-white` | brand | Primary headings, navigation, body copy, logos, and the face of white CTA buttons. |
| Deep Canvas | `#000000` | `--color-deep-canvas` | neutral | Dominant page background and the grounding color around content sections. |
| Graphite Edge | `#1a1a1a` | `--color-graphite-edge` | surface | Case-study card surface and the subtle borders that divide cards and content. |
| Simulation Cobalt | `#1019ec` | `--color-simulation-cobalt` | brand | Prominent blue hero and simulation section background; not a routine button color. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted supporting copy, especially secondary text and footer content. |
| Night Surface | `#0d0d0d` | `--color-night-surface` | surface | Near-black section and button surface, subtly distinct from the page canvas. |
| Soft Ash | `#8d8d8d` | `--color-soft-ash` | neutral | Secondary muted copy and low-emphasis footer text. |
| Silver Trace | `#767676` | `--color-silver-trace` | semantic | Gradient detail in visual treatments; not a defining interface color. |
| Mid Ash | `#888888` | `--color-mid-ash` | neutral | Occasional subdued supporting text with less emphasis than white copy. |
| Lavender Haze | `#cfd1fb` | `--color-lavender-haze` | semantic | Pale violet text accent visible in limited page content, not a core surface color. |
| Iron Line | `#313131` | `--color-iron-line` | surface | Subtle divider and border detail, particularly around low-emphasis content and footer elements. |
| Coal Button | `#262626` | `--color-coal-button` | surface | Dark secondary button fill and subdued interface details. |
| Signal Green | `#0ae77a` | `--color-signal-green` | accent | Fine green trace in a technical gradient illustration; do not apply as a general CTA color. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#1a1a1a` (Graphite Edge) · `--color-surface-2` → `#0d0d0d` (Night Surface) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#8d8d8d` (Soft Ash) · `--color-border` → `#1a1a1a` (Graphite Edge) · `--color-accent` → `#1019ec` (Simulation Cobalt) · `--color-accent-2` → `#0ae77a` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#ffffff` | `#0d0d0d` | 19.44:1 | AAA |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#808080` | `#1a1a1a` | 4.41:1 | AA-large |
| `#808080` | `#0d0d0d` | 4.92:1 | AA |
| `#8d8d8d` | `#000000` | 6.33:1 | AA |
| `#8d8d8d` | `#1a1a1a` | 5.24:1 | AA |
| `#8d8d8d` | `#0d0d0d` | 5.86:1 | AA |
| `#1019ec` | `#000000` | 2.37:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`
- `repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 7px)`
- `repeating-linear-gradient(90deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 7px)`
- `repeating-linear-gradient(90deg, rgb(10, 231, 122) 0px, rgb(10, 231, 122) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 7px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Oracle | `--font-body` | webfont | 400 | All measured headings, body copy, navigation, captions, and buttons. | Inter |

- **ABC Oracle:** Regular weight throughout; headings use tight negative tracking, while captions and eyebrows use uppercase with widely spaced letters.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.05 | -0.03em | — | ABC Oracle | Large hero headline, set tightly with a compact line height. |
| h2 | 30px | 400 | 1.1 | -0.02em | — | ABC Oracle | Major section headings and prominent case-study titles. |
| h3 | 24px | 400 | 1.1 | -0.01em | — | ABC Oracle | Feature, domain, and supporting content headings. |
| h4 | 20px | 400 | 1.2 | -0.01em | — | ABC Oracle | Smaller card or sub-section headings. |
| body | 14px | 400 | 1.26 | 0 | — | ABC Oracle | Descriptions, explanatory copy, and supporting paragraph text. |
| caption | 12px | 400 | 1.3 | 0.1em | uppercase | ABC Oracle | Compact uppercase labels, evidence notes, and small metadata. |
| button | 18px | 400 | 1.2 | 0 | — | ABC Oracle | Primary CTA labels and prominent pill-button text. |
| nav | 14px | 400 | 1.26 | 0 | — | ABC Oracle | Header navigation and compact link labels. |
| eyebrow | 12px | 400 | 1.3 | 0.1em | uppercase | ABC Oracle | Uppercase section labels and short contextual kickers. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 51, 64, 100, 140 px.
- Section rhythm 100px · element gap 40px · card padding — · max content width —.

Use a spacious, full-width page with a strong left-aligned content edge and carefully bounded content groups. The opening hero is a broad blue canvas with text on the left and floating simulation imagery on the right. Follow it with a partner strip, a dark framed process demonstration, and black-background content sections. Later blocks alternate between two-column evidence panels and multi-column use-case cards. Preserve substantial vertical breathing room; measured spacing is spacious, but no fixed page maximum width is specified.

## Shape & elevation

- Radius: button `9999px` · card `32px` · media `16px` · nav `16px` · link `32px` · xs `16px` · sm `32px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95)` on interactive elements.

The interface is predominantly flat, without measured shadows. Separate cards from the black canvas using charcoal fills and thin, low-contrast borders. The process demo and image panels gain depth through dark framing, tonal contrast, and layered media rather than elevated white cards or conspicuous shadow effects.

## Imagery

Use atmospheric simulation imagery as a defining counterpoint to the restrained interface: floating circular world scenes in the hero, particle-like behavior visualizations, and dark data-led case-study graphics. Real-world photography appears in the closing CTA. Keep imagery subdued, often tinted or darkened, and contained in generously rounded frames; logos remain small and quiet.

## Components

### Header navigation

White logo and compact links sit over the hero; a white Contact us button provides the single high-contrast header action.

### Hero CTA

Pair a white pill-shaped primary action with a quiet text link and arrow; keep the action copy short and high contrast.

### Partner strip

Place client logos in a restrained band beneath the hero, using subdued marks and subtle dividers rather than colorful tiles.

### Process showcase

Present a large dark rounded panel with a centered message, compact uppercase category controls, and a contained simulation result card.

### Case study card

Use a dark bordered, rounded card for study evidence, combining a title, short description, CTA, and concise comparison metrics.

### Domain cards

Arrange use-case categories in a multi-column row with concise descriptions and small circular arrow controls.

### Closing CTA

Layer short white copy and a compact white action over a darkened photographic scene.

### Measured component styles

- **Primary button** (“Contact us”): background #ffffff · text #000000 · radius 8px · padding 14px 16px · 400 14px ABC Oracle
- **Secondary button** (“INNOVATION”): background #262626 · text #ffffff · radius 100px · padding 12px 20px · 400 12px ABC Oracle · uppercase
- **Link** (“Product Innovation VIEW USE CASE”): background #1a1a1a · text #ffffff · radius 32px · padding 0px · 400 14px ABC Oracle
- **Card** (“EY Global Wealth Study How Aaru demonstr”): background #1a1a1a · text #ffffff · border 1px solid #1a1a1a · radius 32px · padding 0px · 400 14px ABC Oracle
- **Navigation item** (“Simulation About Publications Careers Us”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px ABC Oracle

## Do

- Use #000000 as the principal canvas.
- Reserve #1019ec for prominent simulation-led sections.
- Use white for primary copy and decisive CTA contrast.
- Set headings in regular-weight ABC Oracle or a close sans-serif substitute.
- Create hierarchy with whitespace and subdued borders.
- Treat blue and particle imagery as atmospheric product storytelling.

## Don't

- Do not introduce bright, colorful interface surfaces.
- Do not use #0ae77a as a general-purpose CTA color.
- Do not add pronounced drop shadows.
- Do not make cards look like elevated white panels.
- Do not use heavy bold typography or oversized uppercase navigation.
- Do not crowd the spacious section rhythm with dense decoration.

## Agent prompt

Build a new Aaru-style page using a nearly black #000000 canvas and restrained, regular-weight sans-serif typography. Use #ffffff for clear headings, navigation, and primary actions; #808080 and #8d8d8d for supporting copy; and #1a1a1a or #0d0d0d for subtle surfaces and borders. Introduce #1019ec only where a prominent simulation scene needs a vivid field. Treat #0ae77a as a technical visualization detail, not a generic action color. Keep the hero broad and image-led, with concise copy aligned opposite floating or particle-based simulation media. Build later sections from spacious black bands, occasional two-column evidence panels, logo strips, and concise category cards. Prefer flat surfaces, understated borders, darkened imagery, and ample breathing room over shadows or decorative chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide blue hero with left-aligned headline and copy, floating circular imagery to the right, and a client-logo strip below. | Primary CTA, Secondary text link, Client validation strip | Blue canvas, White type, Floating circular media, Compact top navigation |
| 2 | logo-cloud | Black section with a centered partner grid, compact section labels, and a centered pill CTA. | Partner proof, Contact-oriented CTA | Monochrome logos, Fine dividers, White pill button |
| 3 | how-it-works | Spacious black section with process heading and an oversized rounded simulation visual. | Step-based explanation, Simulation preview, Forward navigation | Two-column content, Dark media panel, Subtle progress cues |
| 4 | product-showcase | Two-column case study with a title and evidence card against the black canvas. | Case-study link, Outcome comparison, Evidence-led storytelling | Dark rounded card, Fine charcoal border, Compact metric rows |
| 5 | feature-grid | Section heading above a multi-column use-case row, followed by a wide image-led CTA. | Domain discovery, Card navigation, Closing conversion action | Compact text cards, Circular arrow controls, Darkened photographic CTA |
| 6 | footer | Single-column dark closing section with compact navigation and subdued supporting content. | Secondary navigation, Low-emphasis supporting links | Black canvas, Muted gray text, Subtle dividers |

## Source CSS custom properties (selected)

```css
--page-bg: #000;
--page-fg: #fff;
--page-accent-rgb: 56 140 255;
--page-accent: rgb(56 140 255);
--page-accent-label: #83b5ff;
--page-error-bg: #402722;
--page-shadow: #0008;
--chart-accent: #174be8;
--article-action-fg: #000;
```

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