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

# AWE · Design System

> An editorial interface for the agentic economy

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

AWE pairs an immersive, colorful hero with a predominantly black, information-dense interface for its AI and crypto infrastructure. Editorial serif headlines, monospaced labels, and fine rules give the technical content a deliberate, publication-like rhythm.

## North star

Keep the page’s black editorial canvas quiet and structured, then let full-bleed media and selective blue accents provide the visual energy.

## Overview

The page is anchored by near-black #010101, which gives the long scroll a continuous canvas and lets the hero video carry the strongest color. Most later sections remain black, while #05060a and #040405 distinguish cards and inset content without breaking the dark field. Warm white text and restrained gray levels establish hierarchy; blue accents such as #4d94ff and #9cc2ff are reserved for links, labels, and selected technical details. Large, tightly set Office Times Round headlines contrast with Messina Sans body copy and ABC Laica Mono navigation and eyebrows. The opening is a full-bleed video with centered overlay copy and pill CTAs; subsequent content uses centered section introductions, multi-column cards, dense statistics, and a tabbed infrastructure module. Hairline borders organize cards and ecosystem listings. Spacing is compact within components but generous between major sections, maintaining a cinematic, technical editorial feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Cobalt | `#182e4e` | `--color-midnight-cobalt` | accent | Muted blue border on technical badges and selected controls; keep it secondary to brighter blue accents. |
| Glacier Blue | `#9cc2ff` | `--color-glacier-blue` | accent | Pale blue text on dark technical badges and occasional highlighted data labels. |
| Absolute Black | `#010101` | `--color-absolute-black` | brand | Primary page canvas, long section backgrounds, and footer foundation. |
| Gallery White | `#f3f3f3` | `--color-gallery-white` | neutral | Measured light section and inverse text or media surface; not the dominant page canvas. |
| Night Card | `#05060a` | `--color-night-card` | surface | Primary dark card and content-panel fill within black sections. |
| Ash Gray | `#8d8d8f` | `--color-ash-gray` | neutral | Muted supporting copy against dark backgrounds. |
| Soft Silver | `#e0e0e0` | `--color-soft-silver` | neutral | Common light text for navigation, cards, and section content. |
| Graphite Rule | `#1f1f23` | `--color-graphite-rule` | surface | Frequent hairline border and subdued dark control or section detail. |
| Quiet Silver | `#9a9a9b` | `--color-quiet-silver` | neutral | Secondary muted copy where supporting information needs less emphasis. |
| Charcoal Seam | `#19191b` | `--color-charcoal-seam` | surface | Subtle link, footer, card, and section boundaries on the black canvas. |
| Slate Text | `#6d6d6e` | `--color-slate-text` | neutral | Low-emphasis navigation and supporting text. |
| Blue-Black | `#0d1622` | `--color-blue-black` | surface | Deep blue-tinted fill in technical cards, buttons, or gradient details. |
| Carbon Panel | `#111214` | `--color-carbon-panel` | surface | Dark link and button surfaces set just above the page canvas. |
| Signal Blue | `#4d94ff` | `--color-signal-blue` | accent | Primary blue accent for selected headings, technical details, and restrained glow effects. |
| Warm Chalk | `#e8e8e4` | `--color-warm-chalk` | neutral | Warm light text on buttons and selected interface elements. |
| Umber Ink | `#2a211c` | `--color-umber-ink` | semantic | Minor warm-toned text detail; not a defining page-wide brand color. |
| Obsidian Panel | `#040405` | `--color-obsidian-panel` | surface | Near-black inset card background, distinct from the main canvas by a subtle tonal shift. |

### Semantic aliases

`--color-canvas` → `#010101` (Absolute Black) · `--color-surface` → `#f3f3f3` (Gallery White) · `--color-surface-2` → `#05060a` (Night Card) · `--color-surface-3` → `#111214` (Carbon Panel) · `--color-surface-4` → `#040405` (Obsidian Panel) · `--color-text` → `#f3f3f3` (Gallery White) · `--color-text-muted` → `#8d8d8f` (Ash Gray) · `--color-text-subtle` → `#9a9a9b` (Quiet Silver) · `--color-border` → `#1f1f23` (Graphite Rule) · `--color-accent` → `#9cc2ff` (Glacier Blue) · `--color-accent-2` → `#4d94ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f3f3f3` | `#010101` | 18.81:1 | AAA |
| `#f3f3f3` | `#05060a` | 18.25:1 | AAA |
| `#f3f3f3` | `#111214` | 16.89:1 | AAA |
| `#8d8d8f` | `#010101` | 6.3:1 | AA |
| `#8d8d8f` | `#f3f3f3` | 2.99:1 | fail |
| `#8d8d8f` | `#05060a` | 6.11:1 | AA |
| `#8d8d8f` | `#111214` | 5.66:1 | AA |
| `#9a9a9b` | `#010101` | 7.42:1 | AAA |
| `#9a9a9b` | `#f3f3f3` | 2.53:1 | fail |
| `#9a9a9b` | `#05060a` | 7.2:1 | AAA |

### Gradients

- `linear-gradient(rgb(1, 1, 1) 15%, rgba(31, 31, 34, 0.8))`
- `radial-gradient(120% 80% at 100% 0px, rgba(77, 148, 255, 0.1), rgba(0, 0, 0, 0) 46%), none`
- `linear-gradient(115deg, rgba(77, 148, 255, 0.08), rgba(0, 0, 0, 0) 46%), none`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(1, 1, 1, 0.72) 18%, rgb(1, 1, 1) 42%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Messina Sans | `--font-body` | webfont | 400, 500, 700, 600 | Body copy, card text, and general interface content | Inter |
| ABC Laica Mono | `--font-mono` | webfont | 300, 400 | Navigation, buttons, captions, eyebrows, and technical labels | IBM Plex Mono |
| Office Times Round | `--font-display` | webfont | 400, 600 | Display headlines and major section titles | DM Serif Display |

- **Messina Sans:** Use regular body weights and heavier subsection labels; keep sentence-case prose and compact line lengths.
- **ABC Laica Mono:** Light-to-regular weights, uppercase, and generous tracking give small labels their instrument-panel character.
- **Office Times Round:** Use regular or semibold editorial serif forms, tight leading, and negative tracking for large headings.

### Type scale — Augmented Fourth (ratio ≈ 1.384, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 73.5px | 600 | 0.88 | -0.03em | — | Office Times Round | Hero and prominent display headlines. |
| h1 | 66.5px | 400 | 1.02 | -0.02em | — | Office Times Round | Primary hero headline. |
| h2 | 49px | 400 | 0.95 | -0.03em | — | Office Times Round | Major section titles such as stack and ecosystem. |
| h3 | 37.5px | 600 | 0.92 | -0.04em | — | Office Times Round | Module and feature headings. |
| h4 | 21.5px | 700 | 1.2 | 0 | — | Messina Sans | Card and subsection titles. |
| body | 14.5px | 400 | 1.4 | 0.01em | — | Messina Sans | Descriptions, explanatory copy, and supporting prose. |
| caption | 13px | 300 | 1.4 | 0.08em | uppercase | ABC Laica Mono | Uppercase metadata and compact annotations. |
| button | 11.5px | 400 | 1.4 | 0.12em | uppercase | ABC Laica Mono | Uppercase CTA and control labels. |
| nav | 13px | 300 | 1.3 | 0.08em | uppercase | ABC Laica Mono | Uppercase global navigation items. |
| link | 11.5px | 400 | 1.45 | 0.02em | — | Messina Sans | Text links in ecosystem and infrastructure content. |
| eyebrow | 13px | 300 | 1.4 | 0.08em | uppercase | ABC Laica Mono | Small uppercase labels above section headings. |
| code | 13px | 300 | 1.4 | 0.08em | uppercase | ABC Laica Mono | Compact uppercase technical or system labels. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 8, 10, 11, 12, 14, 15, 16, 17, 18, 22 px.
- Section rhythm 40px · element gap 11px · card padding 17px · max content width 1360px.

Use a centered content frame capped at the measured 1360px maximum, with full-bleed media at the opening. The hero overlays centered copy and actions on video; interior sections alternate centered introductions with three-column feature cards, four-column metrics, a five-part infrastructure navigation, and a dense ecosystem directory. Keep section transitions spacious against the black canvas, but make cards and listings compact. Thin horizontal rules and aligned columns provide structure without heavy containers.

## Shape & elevation

- Radius: button `9999px` · media `11px` · link `16px` · xs `1px` · sm `11px` · md `16px` · pill `9999px`
- Shadow `md` (other): `rgba(77, 148, 255, 0.35) 0px 0px 12px 0px`
- Shadow `md-2` (other): `rgba(77, 148, 255, 0.75) 0px 0px 16px 0px`
- Shadow `inset` (other): `rgba(77, 148, 255, 0.16) 0px 0px 22px 0px inset`
- Shadow `md-3` (other): `rgba(77, 148, 255, 0.55) 0px 0px 14px 0px`
- Shadow `lg` (button): `rgba(70, 36, 16, 0.08) 0px 10px 28px 0px`
- Shadow `inset-2` (link): `rgba(58, 48, 42, 0.28) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat, dark surfaces and fine borders over conventional raised cards. Card outlines and section rules are more important than shadows; reserve subtle blue glows for select technical details or interactive emphasis. Keep layered content legible through tonal differences among the black canvas, charcoal panels, and blue-black inset areas.

## Imagery

The hero’s full-bleed video is the most vivid element, featuring colorful, playful agent-world imagery that can shift between scenes. Treat it as environmental media rather than a palette specification: sampled warm orange and muted colors belong to the screenshot imagery, not the core interface. Lower sections use product and interface visuals inside dark cards, with restrained framing and ample black space around them.

## Components

### Video hero

Full-bleed video backdrop with centered serif headline, concise supporting copy, and pill-shaped uppercase CTA controls.

### Top navigation

Compact uppercase monospaced links and rounded dark controls sit over the hero media.

### Stack cards

Three-column dark feature cards combine numbered blue labels, compact copy, and product imagery within fine borders.

### Network metrics

A centered section introduction leads into a four-column set of large values and supporting labels.

### Infrastructure module

Five-part category navigation controls a dark feature panel with a large serif title and compact capability cards.

### Ecosystem directory

A dense, multi-column list of linked names uses low-contrast rules and compact typography for scanning.

### Pill CTA

Rounded action buttons use uppercase ABC Laica Mono labels; use light fills for primary hero actions and dark treatments for navigation.

### Measured component styles

- **Primary button** (“REALYSE (1)”): background #1f1f23 · text #e0e0e0 · radius 100px · padding 0px · 300 13px ABC Laica Mono · uppercase
- **Secondary button** (“DOCS”): transparent background · text #e8e8e4 · border 1px solid #192e4d · radius 0px · padding 0px 15.2px · 400 11.52px ABC Laica Mono · uppercase
- **Link** (“AERODROME”): transparent background · text #e0e0e0 · radius 0px · padding 8px 0px · 400 16px Messina Sans
- **Card** (“01 X402 Payment verification Confirm an ”): background #05060a · text #e0e0e0 · border 1px solid #1c1e1f · radius 0px · padding 16.8px 18.4px 16.8px 15.2px · 400 16px Messina Sans
- **Badge** (“X402”): background #0a121d · text #9cc2ff · border 1px solid #182e4e · radius 0px · padding 0px 7.2px · 400 9.6px ABC Laica Mono · uppercase
- **Navigation item** (“REALYSE”): transparent background · text #e0e0e0 · radius 0px · padding 0px · 300 13px ABC Laica Mono · uppercase

## Do

- Keep the main canvas near-black and uninterrupted.
- Use editorial serif faces for large section headlines.
- Set navigation and utility labels in tracked uppercase mono.
- Reserve bright blue for selective technical emphasis.
- Use fine borders to organize dark cards and lists.
- Let full-bleed media supply the hero’s strongest color.

## Don't

- Do not turn the whole page into a light interface.
- Do not reuse hero-image colors as global brand accents.
- Do not round every card or content panel.
- Do not replace editorial headlines with generic geometric sans.
- Do not make every label bright blue or high contrast.
- Do not crowd major section transitions with extra decoration.

## Agent prompt

Build a new AWE-style page on an Absolute Black (#010101) canvas, using Gallery White (#f3f3f3) only where an inverse surface is appropriate. Let full-bleed media create the hero’s color; do not promote imagery colors to interface tokens. Use Office Times Round or a close editorial serif for large, tightly set headlines, Messina Sans or Inter for prose, and ABC Laica Mono or IBM Plex Mono for tracked uppercase navigation, labels, and CTAs. Structure content with centered section intros, compact dark cards, fine Graphite Rule (#1f1f23) borders, and selective Signal Blue (#4d94ff) or Glacier Blue (#9cc2ff) accents. Keep the layout aligned within the measured 1360px frame, with spacious section breaks and denser interior data. Favor flat surfaces and restrained effects over heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with centered headline, short supporting copy, and paired actions. | overlay navigation, primary and secondary CTA | full-bleed video, centered serif headline, pill buttons |
| 2 | feature-grid | Centered section heading above three dark, side-by-side feature cards. | numbered features, card-to-detail links | dark panels, blue numbering, product imagery |
| 3 | stats | Centered title and context above a four-column metrics layout. | scannable metrics, snapshot context | large numeric values, compact labels, subtle rules |
| 4 | product-showcase | Centered introduction, five-part category navigation, and a wide selected-module panel. | tabbed category selection, capability discovery | dark feature panel, compact bordered cards, selective blue emphasis |
| 5 | integrations | Left-aligned section title above dense multi-column linked directories and filtering controls. | browse by sector, category filtering | compact link lists, fine horizontal rules, minimal controls |
| 6 | footer | Closing CTA band followed by a dark, multi-column footer. | repeat primary action, grouped footer navigation | media-backed CTA, logo lockup, muted link columns |

## Source CSS custom properties (selected)

```css
--colors--black: #010101;
--colors--light: #e0e0e0;
--font--size: 1rem;
--_type---type-h1--font-size: 6.25rem;
--_type---type-h2--font-size: 1.625rem;
--colors--dark: #1f1f23;
--background-color--background-success<deleted|variable-879e2a57-3170-38fd-0ae7-d0e890873ab2>: #cef5ca;
--text-color--text-success<deleted|variable-17518f72-fb93-45b5-ad9e-fdd3f2b1833a>: #114e0b;
--border-color--border-primary<deleted|variable-d4c54ba4-ee41-67ce-58a5-5216ca039f83>: #eee;
--_type---text-size--label: .8125rem;
--_type---text-size--small: 1rem;
--colors--forest: #293033;
--_type---text-size--x-small: .875rem;
--text-color--text-secondary<deleted|variable-0a60224d-1a94-b160-ae24-af3c6d95a994>: #222;
--spacing--7-5rem: 7.5rem;
--_type---text-size--large: 1.25rem;
--background-color--background-secondary<deleted|variable-2dd539ce-5be2-4493-8245-a883e87dab6d>: #2d62ff;
--background-color--background-tertiary<deleted|variable-6632d948-2d2d-2556-731d-05a71c92f234>: #1f1f23;
--background-color--background-error<deleted|variable-89aecd3e-2fe8-312c-65a2-e3e7c57d326c>: #f8e4e4;
--text-color--text-error<deleted|variable-4a51c5d2-820c-a0d9-b49e-0e5d273c964f>: #3b0b0b;
--_type---text-size--medium: 1.125rem;
--background-color--background-warning<deleted|variable-0aa1a7ce-e851-b6b5-66db-1a1a96e8e04b>: #fcf8d8;
--text-color--text-warning<deleted|variable-825aa1d8-b093-0b89-37c5-87d980df10f5>: #5e5515;
--_type---type-h3--font-size: 1.5rem;
--base-color-neutral--black<deleted|variable-419fddc9-288d-5141-33c5-0873c4ce2f53>: #000;
--_type---type-h4--font-size: 1.25rem;
--font--body: Arial,"Helvetica Neue",Helvetica,sans-serif;
--spacing--0-25rem: .25rem;
--spacing--0-5rem: .5rem;
--spacing--0-75rem: .75rem;
--spacing--0-875rem: 0px;
--spacing--1rem: 1rem;
--spacing--1-25rem: 1.25rem;
--spacing--1-5rem: 1.5rem;
--spacing--2rem: 2rem;
--spacing--2-5rem: 2.5rem;
--spacing--3rem: 3rem;
--spacing--3-5rem: 3.5rem;
--spacing--4rem: 4rem;
--spacing--4-5rem: 4.5rem;
```

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