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

# Axelar · Design System

> Dark infrastructure, illuminated by vivid signals

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

Axelar pairs a near-black canvas with assertive orange actions and a vivid mint announcement strip. Oversized uppercase headlines, modular partner and insight grids, and geometric network artwork make the page feel technical and institution-oriented.

## North star

Use a near-black canvas and disciplined grid as the foundation, then reserve orange and mint for unmistakable signals.

## Overview

The visual strategy is built around a near-black canvas (#04070a) and restrained, high-contrast signals. A vivid orange (#ff6314) anchors primary calls to action and featured content; mint (#33ffac) is used sparingly for the live announcement and small visual accents. Pale blue-white sections interrupt the dark run of content, while white carries the strongest text and muted gray supports secondary labels. Clash Grotesk gives headlines a broad, uppercase, engineered presence; Inter handles readable body copy, and DM Mono adds a technical register to navigation, captions, and small labels. The hero uses a split composition: text and pill actions on the left, a large geometric network illustration on the right. Below, card groups and editorial columns align to a consistent grid. Section changes rely on strong light/dark bands rather than decorative framing; thin borders and restrained inset outlines define controls and cards. Generous section breaks let the dense content breathe.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#04070a` | `--color-obsidian-canvas` | brand | Main page canvas and dark section background; also appears in text and should not be mistaken for a light-page text color. |
| Signal Orange | `#ff6314` | `--color-signal-orange` | accent | Primary CTA fill and standout content-card accent. |
| Glacier Light | `#f0f5fa` | `--color-glacier-light` | surface | Pale inverse section background and prominent text or navigation color on dark areas. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Headlines, body text, footer content, and outlined link controls. |
| Graphite Rule | `#1a1d1f` | `--color-graphite-rule` | semantic | Fine card, section, and navigation borders; also used as a dark badge background. |
| Slate Copy | `#676f7a` | `--color-slate-copy` | neutral | Muted navigation, footer, and supporting text. |
| Carbon Panel | `#0f1214` | `--color-carbon-panel` | surface | Dark navigation, link, and button surfaces against the page canvas. |
| Ember Core | `#ff3d00` | `--color-ember-core` | accent | Hot endpoint of the orange gradient, mainly used in gradient accents rather than as a standalone block. |
| Night Panel | `#090d0f` | `--color-night-panel` | surface | Dark card surface, slightly lifted from the main canvas. |
| Absolute Black | `#000000` | `--color-absolute-black` | neutral | Minor measured dark area, including input-related or embedded visual regions; not the defining canvas color. |
| Mint Signal | `#33ffac` | `--color-mint-signal` | accent | Small announcement and interface accent; use sparingly rather than as a section fill. |

### Semantic aliases

`--color-canvas` → `#04070a` (Obsidian Canvas) · `--color-surface` → `#f0f5fa` (Glacier Light) · `--color-surface-2` → `#0f1214` (Carbon Panel) · `--color-surface-3` → `#090d0f` (Night Panel) · `--color-surface-4` → `#ffffff` (Clean White) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#676f7a` (Slate Copy) · `--color-text-subtle` → `#04070a` (Obsidian Canvas) · `--color-border` → `#1a1d1f` (Graphite Rule) · `--color-accent` → `#ff6314` (Signal Orange) · `--color-accent-2` → `#ff3d00` (Ember Core) · `--color-accent-3` → `#33ffac` (Mint Signal) · `--color-on-accent` → `#f0f5fa` (Glacier Light)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#04070a` | 20.19:1 | AAA |
| `#ffffff` | `#f0f5fa` | 1.1:1 | fail |
| `#ffffff` | `#0f1214` | 18.8:1 | AAA |
| `#ffffff` | `#090d0f` | 19.52:1 | AAA |
| `#676f7a` | `#04070a` | 3.97:1 | AA-large |
| `#676f7a` | `#f0f5fa` | 4.63:1 | AA |
| `#676f7a` | `#0f1214` | 3.7:1 | AA-large |
| `#676f7a` | `#090d0f` | 3.84:1 | AA-large |
| `#04070a` | `#f0f5fa` | 18.41:1 | AAA |
| `#04070a` | `#0f1214` | 1.07:1 | fail |

### Gradients

- `linear-gradient(270deg, rgb(255, 99, 20) 24%, rgb(255, 61, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Clashgrotesk | `--font-display` | webfont | 500, 600 | Display and section headings, navigation, eyebrow labels, and CTA text | Space Grotesk |
| Inter | `--font-body` | webfont | 400 | Body copy and card descriptions | Inter |
| DM Mono | `--font-mono` | webfont | 500, 400 | Navigation labels, captions, and code-like metadata | IBM Plex Mono |
| F77 Minecraft | `--font-f77-minecraft` | webfont | 400 | Small decorative or branded display detail | Press Start 2P |

- **Clashgrotesk:** Use measured 500/600 weights; large headings are tight-leading and often uppercase, with zero tracking.
- **Inter:** Regular weight supports readable explanatory text; keep sentence case and compact, even line spacing.
- **DM Mono:** Use regular or medium weight; captions and code labels are uppercase and compact.
- **F77 Minecraft:** Rare display accent only; it is a small measured share and should not drive the page typography.

### Type scale — Perfect Fourth (ratio ≈ 1.352, base 16.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 74.5px | 600 | 1 | 0 | — | Clashgrotesk | Oversized hero or campaign display headline. |
| h1 | 69.5px | 600 | 1 | 0 | uppercase | Clashgrotesk | Main hero headline, set in uppercase. |
| h2 | 37px | 500 | 1.25 | 0 | — | Clashgrotesk | Major section titles such as case studies. |
| h3 | 28px | 500 | 1.25 | 0 | — | Clashgrotesk | Subsection and card-group headings. |
| h4 | 21px | 400 | 1.25 | 0 | — | Inter | Supporting card or editorial item titles. |
| body | 16.5px | 400 | 1.25 | 0 | — | Inter | Paragraphs describing the network, products, and use cases. |
| caption | 14px | 500 | 1 | 0 | uppercase | DM Mono | Uppercase metadata, dates, and compact labels. |
| nav | 16.5px | 500 | 1.25 | 0 | — | Clashgrotesk | Primary navigation and prominent menu labels. |
| eyebrow | 14px | 600 | 1 | 0.033em | uppercase | Clashgrotesk | Short uppercase lead-ins above headings or sections. |
| code | 14px | 500 | 1 | 0 | uppercase | DM Mono | Technical, code-like labels and compact identifiers. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 7, 8, 12, 14, 16, 19, 24, 32, 43, 48, 64 px.
- Section rhythm 64px · element gap 5px · card padding — · max content width 1392px.

Use a centered content grid with a measured maximum width of 1392px and a comfortable density. The hero divides copy and geometric artwork into strong columns; later sections alternate between dark and pale full-width bands. Align section headings and card groups to the grid, with three-column content areas visible in measured sections and five-column footer navigation. Keep section transitions spacious: the measured section gap is 64px, while internal spacing follows the measured 4px-based scale. Preserve clean alignment and avoid crowding labels against cards.

## Shape & elevation

- Radius: button `8px` · input `9999px` · card `8px` · badge `4px` · nav `4px` · link `8px` · xs `4px` · sm `8px` · md `9px` · pill `9999px`
- Shadow `inset` (link, footer): `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `inset-2` (link): `rgb(240, 245, 250) 0px 0px 0px 1px inset`
- Shadow `inset-3` (input): `rgb(225, 230, 235) 0px 0px 0px 1px inset`
- Motion: standard transition `0.35s ease` on interactive elements.

The page is mostly flat: section color bands do the heavy lifting instead of drop shadows. Dark cards are separated from the canvas with thin graphite borders, and link controls use subtle inset outlines. Use measured rounded corners on cards and buttons, but keep surfaces visually crisp and avoid adding decorative shadow stacks.

## Imagery

The hero's defining artwork is a large, dark geometric network pattern with bright colored signal nodes, treated as a graphic field rather than photography. Partner marks and editorial thumbnails appear in modular cards and columns. Product-related orange cards use illustrative motifs. Keep imagery tightly framed within its grid area, with restrained contrast on dark sections; photographic color should remain secondary to the brand palette.

## Components

### Announcement strip

A full-width mint band at the very top, with compact uppercase mono messaging and a close control.

### Primary pill CTA

Orange-filled uppercase Clash Grotesk action with a pill silhouette; used for ecosystem exploration and newsletter subscription.

### Outlined link CTA

White or pale outlined pill link with uppercase Clash Grotesk text and a subtle inset border.

### Partner cards

Dark cards organized by vertical, separated with fine graphite borders and populated with partner marks.

### Orange feature cards

Orange-backed product or capability cards on the pale section band, with compact illustrative content.

### Newsletter form

Centered email field with a pill outline and a compact orange subscription action.

### Footer link columns

Multi-column navigation on the dark canvas, using small muted labels and compact link lists.

### Measured component styles

- **Primary button** (“EXPLORE ECOSYSTEM”): background #ff6314 · text #f0f5fa · radius 24px · padding 12px 24px 14.1px 24px · 500 14px Clashgrotesk · uppercase
- **Secondary button**: background #0f1214 · text #f0f5fa · radius 8px · padding 0px · 500 18.5747px Clashgrotesk · uppercase
- **Link** (“LEARN MORE”): transparent background · text #ffffff · radius 24px · padding 12px 24px 14.1px 24px · 500 14px Clashgrotesk · uppercase · shadow rgb(255, 255, 255) 0px 0px 0px 1px inset
- **Input**: transparent background · text #000000 · radius 24px · padding 12px 16px · 500 16.2529px DM Mono · shadow rgb(225, 230, 235) 0px 0px 0px 1px inset
- **Card** (“Enterprise”): background #090d0f · text #f0f5fa · border 1px solid #1a1d1f · radius 8px · padding 0px · 400 18.5747px Inter
- **Badge** (“USE CASE”): background #1a1d1f · text #e1e6eb · radius 4px · padding 4px 12.2px · 400 13.931px DM Mono · uppercase
- **Navigation item** (“Institutional Developers Mobius Developm”): background #0f1214 · text #f0f5fa · radius 0px · padding 24px · 400 18.5747px DM Mono

## Do

- Keep the core canvas near-black and use pale bands selectively.
- Reserve Signal Orange for primary actions and high-priority features.
- Use Mint Signal as a small, high-visibility accent.
- Set major headlines in bold, uppercase Clash Grotesk.
- Align cards, copy, and section headings to one consistent grid.
- Use thin graphite borders to define dark cards and controls.

## Don't

- Do not replace the dark canvas with a generic gradient background.
- Do not spread orange across large areas where it weakens CTA hierarchy.
- Do not use mint as a broad section background.
- Do not add heavy shadows or layered glow effects to ordinary cards.
- Do not mix many unrelated typefaces or decorative heading styles.
- Do not crowd the section rhythm with tightly packed content.

## Agent prompt

Build a new page in Axelar's technical, institution-focused visual style. Use Obsidian Canvas (#04070a) for the primary background, Clean White (#ffffff) and Glacier Light (#f0f5fa) for readable contrast, and Carbon Panel (#0f1214) or Night Panel (#090d0f) for raised dark surfaces. Apply Signal Orange (#ff6314) to primary CTA actions and use Mint Signal (#33ffac) only for small notices or accents. Set large, often uppercase headings in Clash Grotesk or Space Grotesk; use Inter for body copy and DM Mono for compact technical labels. Structure content on a centered grid, with deliberate full-width light/dark section changes, modular cards, and generous section breaks. Prefer geometric network artwork to decorative gradients. Keep borders thin and shadows minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero with left-aligned copy, split against geometric artwork on the right. | Top announcement strip, Primary and secondary pill actions, Trust signals | Near-black canvas, Uppercase display headline, Geometric network graphic, Orange CTA |
| 2 | logo-cloud | Dark section with heading and a three-column arrangement of partner categories and marks. | Partner credibility, Category scanning, Start-building prompt | Dark partner cards, Fine borders, Logo groupings, Orange action |
| 3 | feature-grid | Pale full-width band with heading and copy above a three-column orange feature-card row. | Capability overview, Three-card scanning | Pale background, Orange cards, Compact illustrative motifs |
| 4 | stats | Dark section with a section title, featured case-study content, and prominent metrics. | Case-study discovery, Outcome-led scanning | Dark canvas, Large metric figures, Editorial case-study presentation |
| 5 | content-feed | Three-column editorial area for insights, documentation, and video content. | Browse by content type, View more actions | Dark columns, Compact metadata, Editorial thumbnails, Outlined links |
| 6 | newsletter | Centered signup form within a dark band, with an email input and compact action. | Email capture, Single-field subscription | Outlined pill input, Orange subscribe button, Centered copy |
| 7 | footer | Dark footer with five link columns and a compact legal row. | Grouped navigation, Legal and policy links | Small muted labels, Multi-column links, Minimal separators |

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