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

# Cosmos · Design System

> Interoperable finance, framed in quiet precision.

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

Cosmos presents blockchain infrastructure for financial institutions through a predominantly black canvas, restrained typography, and evidence-led content. Bright blue media and a single pale section create contrast without disrupting the calm, technical visual system.

## North star

Keep the page grounded in black and precise typography, using contrast and content structure—not decoration—to guide attention.

## Overview

The page uses black as its defining canvas, giving white headings and labels strong contrast while muted gray body text keeps dense institutional copy quiet. A pale gray-white band interrupts the dark sequence for the Cosmos Stack, making its rounded white rows and dark text feel like a deliberate product explainer rather than a separate visual identity. The Future is used throughout in a clean, regular-weight sans serif; oversized hero text and measured heading hierarchy provide editorial emphasis without heavy bolding. A wide hero pairs left-aligned messaging with a dark, data-like globe illustration. Lower sections alternate split layouts, customer cards, statistics, and news cards, with occasional blue media imagery acting as a contained highlight. Thin borders, charcoal panels, and generous section breathing room define structure instead of shadows. Rounded cards and pill-shaped actions soften the otherwise precise, technical presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cosmos Black | `#000000` | `--color-cosmos-black` | brand | Dominant page canvas and dark section background; anchors the hero, customer stories, metrics, news, and footer. |
| Starlight | `#ffffff` | `--color-starlight` | neutral | Primary headings, navigation, and high-contrast text; also appears on inverse surfaces and pill controls. |
| Graphite Line | `#333333` | `--color-graphite-line` | semantic | Fine card and section borders that separate dark content without adding visual weight. |
| Carbon Panel | `#1e1f20` | `--color-carbon-panel` | surface | Charcoal card and link panels, including dark content surfaces against the black canvas. |
| Stack Mist | `#f1f4f4` | `--color-stack-mist` | surface | Full-width light Cosmos Stack section, with dark copy and bright rounded content rows. |
| Quiet Gray | `#8f8f90` | `--color-quiet-gray` | neutral | Muted supporting copy and secondary text against black or charcoal surfaces. |
| Midnight Gray | `#808080` | `--color-midnight-gray` | neutral | Secondary link and body-text color; use sparingly for less prominent information. |
| Signal Blue | `#40b3ff` | `--color-signal-blue` | accent | Bright blue contained in selected product media and cards; it is not a broad page background or dominant CTA color. |
| Navigation Silver | `#a3a3a3` | `--color-navigation-silver` | neutral | Subdued navigation text and minor interface details. |
| Deep Panel | `#181818` | `--color-deep-panel` | surface | Near-black navigation or menu surface that distinguishes overlay content from the canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Cosmos Black) · `--color-surface` → `#1e1f20` (Carbon Panel) · `--color-surface-2` → `#f1f4f4` (Stack Mist) · `--color-surface-3` → `#ffffff` (Starlight) · `--color-text` → `#ffffff` (Starlight) · `--color-text-muted` → `#8f8f90` (Quiet Gray) · `--color-text-subtle` → `#000000` (Cosmos Black) · `--color-border` → `#333333` (Graphite Line) · `--color-accent` → `#40b3ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1e1f20` | 16.51:1 | AAA |
| `#ffffff` | `#f1f4f4` | 1.11:1 | fail |
| `#8f8f90` | `#000000` | 6.5:1 | AA |
| `#8f8f90` | `#1e1f20` | 5.11:1 | AA |
| `#8f8f90` | `#f1f4f4` | 2.92:1 | fail |
| `#8f8f90` | `#ffffff` | 3.23:1 | AA-large |
| `#000000` | `#1e1f20` | 1.27:1 | fail |
| `#000000` | `#f1f4f4` | 18.99:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |

### Gradients

- `linear-gradient(to right in oklab, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| The Future | `--font-body` | webfont | 400 | Site-wide display, headings, body copy, navigation, captions, and links. | Jost |

- **The Future:** Use regular weight throughout; measured body and navigation use slight positive tracking, while display headings stay clean and untracked.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.13 | 0 | — | The Future | Large homepage hero statement and other high-impact display messaging. |
| h1 | 36px | 400 | 1.33 | 0.02em | — | The Future | Primary page and major section headings. |
| h2 | 32px | 400 | 1.2 | 0 | — | The Future | Section titles and prominent product or editorial headings. |
| h3 | 24px | 400 | 1.33 | 0 | — | The Future | Card titles, subsection headings, and stack feature labels. |
| body | 16px | 400 | 1.5 | 0.02em | — | The Future | Explanatory paragraphs, product descriptions, and supporting content. |
| caption | 12px | 400 | 1.33 | 0 | — | The Future | Compact category labels, metadata, and small supporting notes. |
| nav | 16px | 400 | 1.5 | 0.02em | — | The Future | Header navigation and footer navigation links. |
| link | 16px | 400 | 1.5 | 0.02em | — | The Future | Inline links and text-based actions across cards and sections. |

OpenType features in use: `"ss02", "ss09"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 8, 10, 12, 15, 16, 20, 24, 30, 32, 36, 40, 50, 80 px.
- Section rhythm 100px · element gap 12px · card padding 18px · max content width 1240px.

The page uses a centered content frame capped at the measured 1240px maximum width, with wide hero and section compositions. The hero and several feature blocks use two-column layouts; customer stories and news use multi-column card rows. Alignment is mostly left-led, with occasional centered messaging. Sections follow a spacious rhythm, while tightly grouped card content and compact footer columns create local density. A full-width light band gives the long dark sequence a clear pause.

## Shape & elevation

- Radius: card `20px` · media `12px` · nav `9999px` · link `20px` · xs `10px` · sm `12px` · md `20px` · lg `30px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with no measured shadow system. Use thin #333333 borders to define dark cards and section boundaries, charcoal fills for selected panels, and the pale stack band for strong contrast. Rounded cards and pill-like controls provide the main depth cues; avoid floating layers and heavy shadow.

## Imagery

Imagery is used as supporting evidence, not as a decorative wallpaper system. The hero features a dark globe with network markers and data-like detailing; customer cards use cropped real-world photographs. The Cosmos Stack section is largely typographic, while news thumbnails introduce saturated blue and magenta. Keep media framed within cards or columns, with dark surroundings and restrained labels.

## Components

### Pill action

Compact rounded link or CTA with regular white text on dark or inverse light fill; the header includes a standout white Contact Us pill.

### Customer story cards

Dark cards with thin #333333 borders and rounded corners, pairing customer imagery, a brand mark, copy, and a small category label.

### Product split panel

Two-column product showcase: dark explanatory content sits beside a bright blue-tinted media panel, with a small centered exploration link.

### Stack feature rows

On the #f1f4f4 band, wide white rounded rows pair a small icon, feature heading and description with a compact product label.

### Metric rows

Dark two-column metrics place concise labels opposite oversized white values, separated by subtle horizontal rules.

### News cards

Three dark charcoal cards combine colorful thumbnail media, headline, summary, and a small rounded Read More link.

### Newsletter form

A compact email input and Submit action sit within the dark footer, using a muted field surface and pill-like controls.

### Measured component styles

- **Primary button** (“Solutions”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px The Future
- **Link** (“Contact Us”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px The Future
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 400 16px The Future
- **Card** (“Figure Figure unlocked $20B+ in home equ”): transparent background · text #ffffff · border 1px solid #333333 · radius 20px · padding 20px 15px · 400 16px The Future
- **Navigation item** (“Solutions Solutions Tokenized Deposits D”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px The Future

## Do

- Use #000000 as the default canvas for the dark page.
- Reserve #f1f4f4 for a clear, full-width contrast section.
- Set headings and body copy in regular-weight sans serif.
- Use white for primary text and muted gray for supporting copy.
- Structure content with split layouts, cards, and metric rows.
- Let borders and spacing define hierarchy before adding decoration.

## Don't

- Do not turn #40b3ff into a site-wide background or dominant accent.
- Do not use heavy shadows to lift cards off the canvas.
- Do not use bold typography as the default hierarchy tool.
- Do not fill dark sections with large, bright photographic backgrounds.
- Do not crowd separate content groups together.
- Do not add colors outside the measured palette as interface styling.

## Agent prompt

Build a new institutional blockchain page in Cosmos’s restrained visual style. Use #000000 as the primary canvas, #ffffff for key headings and navigation, #8f8f90 or #808080 for secondary copy, and #1e1f20 for occasional panels. Use #333333 for subtle card borders. Keep #40b3ff contained within product media, not as a broad interface accent. Set a regular-weight geometric sans serif similar to The Future, with large editorial headings, calm body copy, and generous whitespace. Compose the page from wide split sections, restrained customer or editorial cards, and clear data-led metrics. Use rounded cards and pill actions, but rely on flat surfaces rather than shadows. A #f1f4f4 full-width section may serve as a deliberate visual pause. Keep illustrations technical and dark, and frame photographs within their content cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width opening with a left-aligned message, right-side globe illustration, top navigation, and bottom metrics. | Primary contact action, Headline-first introduction, At-a-glance metrics | Black canvas, White display text, Pill contact link, Network globe graphic |
| 2 | product-showcase | Two-column section with explanatory content and product media. | Tabbed solution categories, Explore product action, Feature bullet list | Dark panel, Blue-tinted media, Rounded product card |
| 3 | testimonials | Short introduction above a horizontal row of customer stories. | Customer proof, Carousel-style browsing | White section heading, Thin dark borders, Story-card row |
| 4 | logo-cloud | Wide horizontal customer-story grid, followed by a compact brand-logo strip. | Customer evidence, Partner recognition | Image-led story cards, Outlined dark cards, Monochrome logos |
| 5 | cta | Large dark visual area with an inset rounded benefits panel and centered follow-up message. | Benefit summary, Contact conversion | Charcoal rounded panel, Benefit chips, Dark textured background |
| 6 | feature-grid | Full-width pale band with centered introduction and stacked feature rows. | Feature overview, Explore-stack action | #f1f4f4 section, White rounded rows, Dark text and icons |
| 7 | stats | Dark two-column metrics section with an introduction on the left and stacked figures on the right. | Scanable proof points, Institutional credibility | Large white figures, Fine horizontal separators, Spare black background |
| 8 | content-feed | Three-column editorial card grid below a left-aligned section heading. | Latest updates, Read-more navigation | Dark cards, Colorful image thumbnails, Rounded link pills |
| 9 | team | Two-column dark footer-adjacent block with organization details and social or support links. | Organization introduction, Social links, Technical support access | Small brand marks, Thin divider, Compact text links |
| 10 | newsletter | Compact horizontal signup row on the black background. | Email capture, Submit action | Muted input surface, Pill submit control, Small label |
| 11 | footer | Three-column navigation groups beneath the Cosmos wordmark. | Grouped site navigation, Support discovery | Black canvas, Small white headings, Compact link lists |
| 12 | footer | Single-column legal notice below the navigation footer. | Legal information, External-site disclaimer | Small muted text, Black canvas, Inline links |

## Source CSS custom properties (selected)

```css
--foreground: #fff;
--background: #000;
--layout-bg-max-width: 2600px;
--layout-bg-max-gradient-width: 300px;
--swiper-theme-color: #007aff;
```

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