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

# Status · Design System

> Private crypto tools, framed by bold simplicity

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

Status pairs a dark, high-contrast opening with broad white product sections to present a private messenger, wallet, and browser. Oversized Inter headlines, vivid blue actions, and colorful illustrated artwork balance technical product mockups with a human, expressive tone.

## North star

Let the product content breathe: pair a near-black or clean white canvas with bold Inter type, restrained blue actions, and expressive media.

## Overview

The page opens on a deep Ink Navy canvas (#09101c), where white display type and compact navigation make the product promise immediately legible. Most of the page then shifts to Gallery White (#ffffff), creating a clean stage for feature explanations and wallet or messenger screenshots. Black headings and body copy provide crisp contrast; blue buttons supply the clearest interaction cue, while purple, teal, and warm yellow appear as restrained gradients or illustration colors rather than a competing background system. Inter is used throughout, with very large, tightly tracked bold headlines and quieter, readable body text. Layout alternates between feature grids, text-and-product splits, and centered full-bleed artwork. Generous whitespace and a comfortable density keep the long page calm. Rounded media, fine pale borders, and restrained shadows soften interface mockups without making the overall system feel card-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for feature bands, content sections, and footer text on the dark closing area. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Primary heading and body text across the white feature sections. |
| Ink Navy | `#09101c` | `--color-ink-navy` | brand | Hero and closing-section canvas; also used for dark text and contrast. |
| Frosted Mist | `#f4f8fa` | `--color-frosted-mist` | surface | Pale surface and hairline border tone around light product media. |
| Status Cobalt | `#223bc4` | `--color-status-cobalt` | accent | Primary Windows download button against the dark hero canvas. |
| Action Blue | `#2a4af5` | `--color-action-blue` | accent | Secondary blue action treatment, including the Chrome download button and gradient details. |
| Electric Violet | `#7140fd` | `--color-electric-violet` | accent | Accent in gradients and colorful product or brand artwork, not a page-wide surface. |
| Harbor Teal | `#2a799b` | `--color-harbor-teal` | semantic | Teal gradient and text details, primarily within decorative or illustrative media. |
| Warm Marigold | `#f6b03c` | `--color-warm-marigold` | accent | Warm gradient and illustration detail; also appears in the announcement accent. |
| Deep Lagoon | `#216266` | `--color-deep-lagoon` | semantic | Supporting teal tone in decorative gradients and artwork. |
| Cloud Gray | `#dce0e5` | `--color-cloud-gray` | neutral | Muted button or interface detail, not a defining page canvas color. |
| Slate Bluegray | `#647084` | `--color-slate-bluegray` | neutral | Secondary text in the footer and quieter supporting details. |
| Midnight Slate | `#1b273d` | `--color-midnight-slate` | surface | Subtle dark border or interface detail within footer-related elements. |
| Soft Divider | `#f0f2f5` | `--color-soft-divider` | neutral | Fine border around announcement and content links on light backgrounds. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#09101c` (Ink Navy) · `--color-surface-2` → `#f4f8fa` (Frosted Mist) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#09101c` (Ink Navy) · `--color-border` → `#f4f8fa` (Frosted Mist) · `--color-accent` → `#223bc4` (Status Cobalt) · `--color-accent-2` → `#2a4af5` (Action Blue) · `--color-accent-3` → `#7140fd` (Electric Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#09101c` | 1.1:1 | fail |
| `#000000` | `#f4f8fa` | 19.65:1 | AAA |
| `#ffffff` | `#09101c` | 19.05:1 | AAA |
| `#ffffff` | `#f4f8fa` | 1.07:1 | fail |
| `#09101c` | `#ffffff` | 19.05:1 | AAA |
| `#09101c` | `#f4f8fa` | 17.83:1 | AAA |
| `#223bc4` | `#ffffff` | 8.43:1 | AAA |
| `#223bc4` | `#09101c` | 2.26:1 | fail |
| `#223bc4` | `#f4f8fa` | 7.89:1 | AAA |

### Gradients

- `linear-gradient(to top, rgba(246, 176, 60, 0.05), rgba(0, 0, 0, 0))`
- `radial-gradient(rgb(246, 176, 60), rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(rgb(113, 64, 253), rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(rgb(42, 121, 155), rgba(0, 0, 0, 0) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | All page typography, from oversized hero headlines to navigation, body copy, and buttons. | Inter |

- **Inter:** Bold, tightly tracked display headlines; regular body text; medium-weight compact navigation and buttons. Sentence case throughout.

### Type scale — Golden Ratio (ratio ≈ 1.667, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 700 | 0.95 | -0.021em | — | Inter | Oversized hero headline and prominent closing call to action. |
| h1 | 64px | 700 | 1.06 | -0.02em | — | Inter | Primary feature and section headlines throughout the page. |
| h2 | 27px | 400 | 1.19 | -0.021em | — | Inter | Supporting section statements and secondary feature headings. |
| body | 19px | 400 | 1.47 | -0.016em | — | Inter | Feature descriptions and hero supporting copy. |
| caption | 15px | 500 | 1.45 | -0.009em | — | Inter | Small labels, metadata, and supporting notes. |
| button | 15px | 500 | 1.45 | -0.009em | — | Inter | Download actions and compact interactive controls. |
| nav | 15px | 500 | 1.45 | -0.009em | — | Inter | Primary header navigation and footer category links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 40, 48, 80, 160 px.
- Section rhythm 68px · element gap 4px · card padding — · max content width 1432px.

A wide, centered page uses a measured maximum content width of 1432px and a comfortable density. The hero is a two-column composition, with left-aligned copy and right-side device mockups; later blocks alternate between three-column feature grids, split text-and-media sections, centered artwork, and editorial feeds. White sections dominate and are punctuated by deep navy hero, privacy, CTA, and footer bands. The measured section rhythm is 68px, with a 4px base spacing unit and ample whitespace around major content.

## Shape & elevation

- Radius: button `12px` · card `20px` · media `24px` · nav `10px` · link `12px` · xs `4px` · sm `10px` · md `12px` · lg `16px` · xl `20px` · 2xl `24px` · pill `9999px`
- Shadow `md` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 16, 28, 0.08) 0px 4px 20px 0px`
- Shadow `md-2` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 16, 28, 0.04) 0px 2px 20px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, relying on strong canvas changes and whitespace rather than stacked cards. Product media and selected links receive soft, dark-tinted shadows; pale borders and hairlines define limited controls and link modules. Rounded media and CTA corners soften the otherwise clean, high-contrast layouts.

## Imagery

Product screenshots and device mockups show the wallet, chat, communities, and portfolio interfaces in crisp, light UI against the page’s contrasting bands. Hand-drawn, colorful illustrations bring a more expressive tone to the crypto and privacy storytelling. Large media is framed as part of the section composition rather than as a detached card; one privacy section uses video, and hardware-wallet artwork sits beside its headline.

## Components

### Primary download button

Blue (#223bc4) filled button with white 15px, 500-weight Inter text and a measured 12px radius; a compact variant uses a 10px radius.

### Header navigation

Compact Inter navigation sits on the dark hero canvas, alongside product download controls and a language selector.

### Announcement strip

Narrow violet announcement band above the navigation, with centered white copy and a compact outlined action.

### Product media

Wallet, chat, and portfolio interface imagery placed within feature compositions; measured media radius is 24px.

### Feature grid

Open white section with a strong heading and three columns of concise benefit statements, small colorful icons, and minimal framing.

### Editorial link cards

Three-column update and article feed with understated borders, black text, and small author or date metadata.

### Closing CTA

Centered headline and download actions on Ink Navy (#09101c), followed by a dense multi-column footer.

### Measured component styles

- **Primary button** (“Download for Windows”): background #223bc4 · text #ffffff · radius 12px · padding 0px 16px · 500 15px Inter
- **Secondary button** (“Download for Chrome”): background #2a4af5 · text #ffffff · radius 12px · padding 0px 16px · 500 15px Inter
- **Link** (“Status 2.39: Reliable message delivery, ”): transparent background · text #000000 · border 1px solid #f0f2f5 · radius 20px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 16, 
- **Card** (“Ways to buy crypto with a credit card or”): transparent background · text #000000 · border 1px dashed #d1d4d8 · radius 20px · padding 0px · 400 16px Inter
- **Navigation item** (“Apps Ecosystem Organization Help Collabo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use Ink Navy (#09101c) for deliberate, high-contrast dark bands.
- Keep white content sections open and generous.
- Set headlines in bold Inter with tight tracking.
- Use blue fills for primary download actions.
- Alternate product screenshots with concise feature copy.
- Reserve vivid gradients and illustration colors for accents and media.

## Don't

- Do not turn every section into a bordered card.
- Do not spread vivid accent colors across large page backgrounds.
- Do not let interface mockups overwhelm the headline and copy.
- Do not use a different type family for isolated sections.
- Do not make all sections dark or all layouts identical.
- Do not add unmeasured colors, sizes, spacing, or corner radii.

## Agent prompt

Build a new Status-style page with a calm, comfortable rhythm and a clear editorial hierarchy. Use Ink Navy (#09101c) for a dramatic hero or CTA band and Gallery White (#ffffff) for most content. Set all text in Inter: bold, tightly tracked headlines; regular body copy; medium-weight controls. Use Status Cobalt (#223bc4) for primary actions and Action Blue (#2a4af5) sparingly for secondary emphasis. Arrange content in wide, centered grids and split layouts, pairing concise copy with realistic product-interface media. Use colorful illustrations as occasional story moments, not background decoration everywhere. Keep borders pale and fine, shadows soft, and rounded media intentional. Alternate section compositions to sustain interest, preserve generous whitespace, and ensure every CTA remains visually distinct.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark two-column hero with left-aligned headline and actions, device mockups on the right. | Download actions, Migration link, Announcement ticker | Navy canvas, Oversized white headline, Blue primary button |
| 2 | feature-grid | White three-column feature grid with a section heading and compact benefit descriptions. | Scanable benefits, Six feature points | Black heading, Small colorful icons, Open white layout |
| 3 | feature-split | Full-bleed split feature: copy on the left and wallet interface media on the right. | Wallet feature overview, Payment method callout | White background, Product UI screenshot, Small category label |
| 4 | product-showcase | Centered headline framed by expansive illustrative media, with supporting features below. | Self-custody explanation, Supporting feature captions | Light canvas, Large colorful illustration, Centered copy |
| 5 | feature-split | Text and messaging-interface split on a white, full-bleed feature section. | Privacy benefits, Feature explanations | Left-aligned headline, Chat UI screenshot, Small label |
| 6 | video | Full-width dark video band with centered text and large decorative artwork. | Privacy value statement, Video storytelling | Navy canvas, Centered white copy, Colorful illustrated edges |
| 7 | feature-split | White feature section with copy beside a community interface screenshot. | Community introduction, Product preview | Left-aligned headline, Screenshot media, Small category label |
| 8 | product-showcase | White product feature with copy and a layered portfolio interface visual. | Beta product introduction, Chrome download action | Product screenshot, Blue button, Feature label |
| 9 | feature-split | White split feature with illustrated hardware wallet on one side and copy on the other. | Hardware wallet promotion, Learn more link | Illustrated product artwork, Large heading, Open white space |
| 10 | content-feed | Three-column editorial feed with a heading and a small view-all link. | Article discovery, Author and date metadata | White canvas, Minimal card boundaries, Compact text |
| 11 | feature-grid | Three-column text-led row of short ecosystem and governance features. | Learn more links, Topic discovery | Black headings, Short descriptions, Fine separators |
| 12 | cta | Centered dark closing CTA with app mark, headline, supporting copy, and download actions. | Download for desktop, Download for mobile | Navy band, Centered white type, Blue action button |
| 13 | footer | Dark, dense multi-column footer with brand mark, grouped navigation, and legal links. | Grouped navigation, Legal and social links | Navy background, Muted secondary text, Compact columns |

## Source CSS custom properties (selected)

```css
--shadow-1: 0px 4px 40px 0px rgba(9,16,28,0.50);
--shadow-2: 0px 8px 40px 0px rgba(9,16,28,0.64);
--shadow-3: 0px 12px 50px 0px rgba(9,16,28,0.64);
--shadow-4: 0px 16px 64px 0px rgba(9,16,28,0.72);
--tw-ring-color: rgb(59 130 246/0.5);
--tw-ring-offset-color: #fff;
```

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