---
version: alpha
name: Status
description: Crypto-native confidence in deep indigo-to-violet — an electric blue accent over near-black canvas, oversized rounded surfaces, bold geometric sans headlines, and pill-shaped CTAs that read like a secure, self-custodial messenger and wallet.

colors:
  # Canvas + ink
  background: "#0d0d12"
  surface: "#16161f"
  surface-soft: "#1d1d29"
  ink: "#ffffff"
  ink-secondary: "#b4b4c2"
  ink-muted: "#7d7d8f"

  # Brand accent — Status Blue
  primary: "#4360df"
  primary-bright: "#5b73ff"
  primary-hover: "#3650cf"
  accent-violet: "#8c6cff"
  accent-cyan: "#3fb5f0"

  # Functional
  success: "#26a665"
  warning: "#ffb620"
  danger: "#f6635c"

  # Gradient stops (hero wash)
  gradient-start: "#4360df"
  gradient-end: "#8c6cff"

  # Borders + lines
  border: "#2a2a38"
  border-soft: "#22222e"
  divider: "#1f1f2b"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#0d0d12"

  # Neutral scale
  gray-100: "#e4e4ec"
  gray-300: "#b4b4c2"
  gray-500: "#7d7d8f"
  gray-700: "#3a3a48"
  gray-900: "#16161f"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.92px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.32px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 6px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-bright}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 24px
    borderColor: "{colors.border-soft}"
  chat-bubble:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
  pill-tag:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
---

# Status Design System

## Overview

Status presents itself as a self-custodial crypto wallet and encrypted messenger, and its design system carries that dual identity — secure, confident, and unmistakably crypto-native without falling into neon excess. The canvas is a near-black indigo (`{colors.background}`), warmer and deeper than pure black, that lets the brand's electric Status Blue (`{colors.primary}`) and violet (`{colors.accent-violet}`) read as energy rather than noise. White (`{colors.ink}`) text and generously rounded surfaces give the product a soft, approachable density on top of the dark base.

The system leans on a bold geometric sans for headlines — large display sizes with tight negative tracking that feel modern and engineered. Body copy relaxes to a comfortable reading rhythm in `{colors.ink-secondary}`, a desaturated lavender-gray that holds contrast against the dark surfaces without the harshness of pure gray. Monospace labels (`{typography.label-mono}`) appear in technical and wallet contexts, nodding to the on-chain, developer-adjacent audience.

The signature move is roundness at scale: pill CTAs (`{rounded.pill}`), and large radii on feature cards (`{rounded.xl}`) that echo the rounded corners of the mobile app itself. Brand color is deployed deliberately — blue and violet for primary actions, gradient washes (`{colors.gradient-start}` → `{colors.gradient-end}`) behind hero imagery and key feature blocks — while UI chrome stays in restrained neutral surfaces and hairline borders (`{colors.border}`).

**Key Characteristics:**
- Deep indigo-black canvas (`{colors.background}`) — warmer than pure black
- Electric Status Blue (`{colors.primary}`) and violet (`{colors.accent-violet}`) accents
- Blue-to-violet gradient washes behind hero and feature imagery
- Bold geometric sans headlines with tight negative tracking
- Pill-shaped CTAs and large card radii echoing the mobile app's rounded surfaces
- Lavender-gray secondary text (`{colors.ink-secondary}`) for soft contrast
- Monospace labels for wallet / on-chain technical context
- Neutral surface chrome (`{colors.surface}`, `{colors.border}`) keeping brand color reserved for action

## Colors

### Primary
- **Background** (`{colors.background}`): Near-black indigo page canvas.
- **Surface** (`{colors.surface}`): Card and panel fills, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, tags, nested panels.
- **Ink** (`{colors.ink}`): Primary white text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and descriptive copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, placeholder.

### Brand Accents
- **Status Blue** (`{colors.primary}`): Primary CTAs, links, active states.
- **Status Blue Bright** (`{colors.primary-bright}`): Highlights, badge text, hover glow.
- **Violet** (`{colors.accent-violet}`): Secondary accent, gradient endpoint.
- **Cyan** (`{colors.accent-cyan}`): Tertiary accent for illustrations / data.

### Functional
- **Success** (`{colors.success}`): Confirmations, positive balances.
- **Warning** (`{colors.warning}`): Cautions.
- **Danger** (`{colors.danger}`): Errors, destructive actions.

### Borders & Lines
- **Border** (`{colors.border}`): Card outlines, input borders.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers, nav underlines.
- **Divider** (`{colors.divider}`): Section separators.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a geometric, neutral sans that scales from billboard headlines to dense UI.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — for wallet addresses, technical labels, on-chain data.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — maximum impact, tight tracking |
| `section-heading` | Major feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature and product cards |
| `body-large` | Hero subtitles, feature intros |
| `body` | Standard reading text |
| `body-small` | UI text, dense copy |
| `button-ui` | Buttons and primary actions |
| `caption` | Metadata, badges |
| `label-mono` | Wallet / technical labels |

### Principles
- **Bold headlines, calm body**: Display weights (700) with negative tracking up top; relaxed 400 body in `{colors.ink-secondary}`.
- **Mono for trust**: Monospace signals on-chain authenticity in wallet contexts.
- **Three weights, clear roles**: 400 (read), 600 (UI/interactive), 700 (headlines).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a generous jump to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column with device mockup imagery
- Feature sections: 2–3 column card grids
- Repeated download CTA bands punctuate the scroll

### Whitespace Philosophy
- **Breathing dark space**: Large vertical padding between sections lets the dark canvas frame brand color.
- **Rounded density**: Cards are large and well-padded; roundness softens the dark, technical subject.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas fill | Page background |
| Bordered (Level 1) | 1px `{colors.border}` on `{colors.surface}` | Standard cards, inputs |
| Raised (Level 2) | `{colors.surface-soft}` fill + soft border | Feature cards |
| Glow (Accent) | Blue/violet gradient wash behind imagery | Hero, feature highlights |
| Focus (A11y) | 2px `{colors.primary}` outline | Keyboard focus |

**Depth Philosophy**: Elevation comes from surface-tier stepping (canvas → surface → surface-soft) and hairline borders rather than heavy drop shadows. Brand gradient washes provide atmospheric depth behind hero and feature imagery.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 6px | Inline elements, small chips |
| `sm` | 10px | Compact controls |
| `md` | 16px | Inputs, chat bubbles |
| `lg` | 24px | Cards, panels |
| `xl` | 32px | Large feature cards |
| `pill` | 9999px | CTAs, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Status Blue fill, white text, pill radius. The default CTA.
- **`button-secondary`** — Surface fill with `{colors.border}`, white text, pill radius.

### Cards
- **`card`** — Surface fill, `{colors.border}`, 24px radius.
- **`card-feature`** — Surface-soft fill, 32px radius for highlighted feature blocks.

### Badges & Tags
- **`badge`** — Surface-soft with bright-blue text, pill.
- **`pill-tag`** — Surface-soft with monospace label for technical tags.

### Inputs
- **`input`** — Surface fill, bordered. Focus switches border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark canvas header, white links, soft bottom border, pill CTA right.

### Distinctive Components
- **Chat bubble** (`{components.chat-bubble}`) — Status Blue messenger bubble, white text, large radius — the product's core encrypted-messaging metaphor.

## Do's and Don'ts

### Do
- Use the near-black indigo canvas (`{colors.background}`), not pure black
- Reserve Status Blue and violet for actions, highlights, and gradient washes
- Use pill radius for CTAs and tags; large radii for cards
- Use monospace labels in wallet / on-chain contexts
- Keep body copy in `{colors.ink-secondary}` for soft, readable contrast

### Don't
- Don't paint UI chrome in brand color — keep surfaces neutral
- Don't use pure black or pure gray; the indigo and lavender tints matter
- Don't use heavy drop shadows — depth comes from surface tiers and gradients
- Don't tighten body tracking — negative tracking is for headlines only
- Don't introduce warm decorative colors outside functional states

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs |
| Tablet | 600–1024px | 2-column feature grids |
| Desktop | 1024–1400px | Full 3-column layout, max content width |
| Large | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero: 64px display scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu with pill CTA
- Feature cards: 3-column → 2-column → single column
- Device mockups: maintain aspect ratio, center on mobile
- Section spacing: 96px → 48px on mobile

### Touch Targets
- Pill CTAs use 14px vertical padding for comfortable tap height
- Nav links and tags have adequate spacing for touch

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Status Blue `{colors.primary}`
- Background: Indigo-black `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: Lavender-gray `{colors.ink-secondary}`
- Border: `{colors.border}`
- Accent gradient: `{colors.gradient-start}` → `{colors.gradient-end}`

### Example Component Prompts
- "Create a hero on `{colors.background}`. Headline 64px Inter weight 700, line-height 1.05, letter-spacing -1.92px, `{colors.ink}`. Subtitle 20px weight 400 `{colors.ink-secondary}`. Pill CTA: `{colors.primary}` fill, white text, 9999px radius, 14px 28px padding."
- "Design a feature card: `{colors.surface-soft}` fill, 32px radius, 1px `{colors.border-soft}`. Title 22px Inter weight 600. Body 17px weight 400 `{colors.ink-secondary}`."
- "Build a chat bubble: `{colors.primary}` fill, white text, 24px radius, 12px 16px padding, 15px Inter weight 400."

### Iteration Guide
1. Canvas is indigo-black `{colors.background}`, never pure black
2. Brand color (blue/violet) is for action and atmosphere, not chrome
3. Pill for CTAs and tags; large radii for cards
4. Headlines bold (700) with negative tracking; body calm (400) in `{colors.ink-secondary}`
5. Monospace for wallet/on-chain labels only

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Status. Brand names and trademarks belong to their respective owners.