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

# Capital · Design System

> Quiet fintech, built around the product

**Theme:** dark · **Industry:** fintech · **Source:** https://capital.xyz/ · **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._

Capital pairs a near-black canvas with oversized, airy typography and bright, restrained calls to action. Product interfaces and founder portraits provide the visual detail, while a single warm ivory band creates a deliberate pause in the long page.

## North star

Let near-black space and oversized, light typography frame credible product imagery, reserving coral for the clearest action.

## Overview

The visual strategy is built on contrast: near-black (#000000) and deep charcoal (#040503) carry most sections, while warm ivory (#efece6) handles the main display text and a full-width mobile-and-web feature band. Headlines are exceptionally large, light-weight Muoto, centered in the opening hero and used with generous line breaks; smaller supporting copy stays muted. GT America Mono appears in compact uppercase eyebrow labels, giving announcements and section markers a technical counterpoint. Layout alternates between broad, immersive product imagery and comparatively quiet black space. Interface screenshots and founder portraits are presented as evidence rather than decoration. The coral-red accent (#ed5145) is reserved for the primary Start action, keeping the call to action distinct without introducing a competing palette. Subtle charcoal borders separate controls, while cards and interface mockups create most of the page’s depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#000000` | `--color-carbon-canvas` | brand | Primary page canvas for the hero, feature sections, founder stories, and footer. |
| Soft Pewter | `#bfbcb7` | `--color-soft-pewter` | semantic | Muted copy and low-emphasis control text against dark backgrounds. |
| Warm Ivory | `#efece6` | `--color-warm-ivory` | surface | Main text and links on dark sections; full-width background for the mobile and web showcase. |
| Deep Charcoal | `#040503` | `--color-deep-charcoal` | surface | Near-black surface tone used in the canvas and product-interface presentation. |
| Quiet Stone | `#8e8c87` | `--color-quiet-stone` | semantic | Secondary muted text for subdued supporting information. |
| Graphite Rule | `#302f2f` | `--color-graphite-rule` | neutral | Fine button and control borders that define edges without brightening the dark layout. |
| Signal Coral | `#ed5145` | `--color-signal-coral` | accent | Primary Start button and selective link emphasis; the main visual action cue. |
| Shadow Black | `#1a1a1a` | `--color-shadow-black` | neutral | Button and heading detail, also reflected in measured interface shadows. |

### Semantic aliases

`--color-canvas` → `#000000` (Carbon Canvas) · `--color-surface` → `#040503` (Deep Charcoal) · `--color-surface-2` → `#efece6` (Warm Ivory) · `--color-text` → `#efece6` (Warm Ivory) · `--color-text-muted` → `#bfbcb7` (Soft Pewter) · `--color-text-subtle` → `#8e8c87` (Quiet Stone) · `--color-border` → `#302f2f` (Graphite Rule) · `--color-accent` → `#ed5145` (Signal Coral) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#efece6` | `#000000` | 17.81:1 | AAA |
| `#efece6` | `#040503` | 17.32:1 | AAA |
| `#bfbcb7` | `#000000` | 11.09:1 | AAA |
| `#bfbcb7` | `#040503` | 10.79:1 | AAA |
| `#bfbcb7` | `#efece6` | 1.61:1 | fail |
| `#8e8c87` | `#000000` | 6.25:1 | AA |
| `#8e8c87` | `#040503` | 6.08:1 | AA |
| `#8e8c87` | `#efece6` | 2.85:1 | fail |
| `#ed5145` | `#000000` | 5.86:1 | AA |
| `#ed5145` | `#040503` | 5.7:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __muoto_7e5c91 | `--font-body` | webfont | 300, 400, 500 | Display headings, body copy, navigation, links, and buttons. | DM Sans |
| GT America Mono | `--font-mono` | webfont | 400 | Eyebrows and compact code-like labels. | Space Mono |

- **__muoto_7e5c91:** Use light weights for display and headings; body is also light. Buttons use medium weight, with restrained tracking.
- **GT America Mono:** Small uppercase labels with visibly expanded tracking; use sparingly for announcements and section markers.

### Type scale — Perfect Fifth (ratio ≈ 1.549, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 115px | 300 | 1.15 | -0.02em | — | __muoto_7e5c91 | Oversized homepage statement and other leading display moments. |
| h1 | 90px | 300 | 1.15 | -0.01em | — | __muoto_7e5c91 | Primary hero headline. |
| h2 | 72px | 300 | 1.15 | -0.01em | — | __muoto_7e5c91 | Major section headings, including founder stories. |
| h3 | 32px | 300 | 1.4 | -0.01em | — | __muoto_7e5c91 | Feature-level headings such as Raise and Invest. |
| body | 20px | 300 | 1.4 | 0 | — | __muoto_7e5c91 | Supporting product and service descriptions. |
| caption | 12px | 400 | normal | 0 | — | __muoto_7e5c91 | Fine-print captions and image or testimonial details. |
| button | 16px | 500 | 1.5 | 0 | — | __muoto_7e5c91 | Primary Start action and other prominent controls. |
| link | 16px | 400 | normal | 0 | — | __muoto_7e5c91 | Navigation, founder names, and supporting text links. |
| eyebrow | 12px | 400 | 1.6 | 0.08em | uppercase | GT America Mono | Uppercase announcement and section labels. |
| code | 12px | 400 | 1.6 | 0.08em | uppercase | GT America Mono | Compact monospace labels used as technical microcopy. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 32, 40, 64, 68, 80, 90 px.
- Section rhythm 64px · element gap 16px · card padding — · max content width 1120px.

The page uses a centered composition with a measured maximum content width of 1120px and comfortable density. The hero aligns its headline centrally above an expansive product mockup; later content shifts into two-column product sections and a three-column founder feature. Long black section bands are separated by a full-bleed ivory product-access section. Section spacing is generous, with a measured 64px section gap and 16px element gap. Use whitespace to pace the scroll rather than adding extra dividers or dense grids.

## Shape & elevation

- Radius: button `8px` · card `16px` · link `8px` · xs `8px` · sm `9px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `md` (button): `rgba(26, 26, 26, 0.4) 0px 8px 24px 0px`
- Shadow `md-2` (link): `rgba(0, 0, 0, 0.2) 0px 6px 20px 0px`
- Shadow `md-3` (nav): `rgba(26, 26, 26, 0.7) 0px -8px 16px 0px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, rgba(255, 122, 112, 0.5) 0px 0px 20px -1px inset, rgb(255, 122, 112) 0px 4px 20px -1px inset`
- Shadow `md-4` (other): `rgba(0, 0, 0, 0.08) 0px 6px 20px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.33, 1, 0.68, 1)` on interactive elements.

The overall page is mostly flat: large background fields and whitespace do the structural work. Hairline graphite borders define select controls, while measured medium shadows appear on navigation and buttons. Product mockups supply the strongest depth through layered interface panels and device framing; cards use softly rounded corners rather than prominent outlines.

## Imagery

Product UI is shown in large, cropped device and desktop mockups, with dark frames and ivory interface areas providing contrast against the black canvas. The mobile-and-web section places interface imagery across a bright ivory field. Founder content uses rectangular photographic portraits with restrained captions. Keep imagery documentary and product-specific; avoid decorative illustration or invented gradients.

## Components

### Primary Start action

Coral #ed5145 button with white text, Muoto medium 16px, and an 8px radius; keep it visually unmistakable.

### Announcement pill

Compact uppercase announcement above the hero headline, set in tracked monospace and styled as a small high-contrast label.

### Hero product mockup

Large desktop banking interface framed in a dark device-like shell, with bright ivory UI panels layered over darker interface surfaces.

### Founder switcher

FOUNDERS and INVESTORS controls use uppercase labels, pill-shaped outlines, and a light border for the selected state.

### Founder story cards

Three portrait-led testimonial items in a row, each with a compact name and role caption beneath the image.

### Mobile and web feature band

Full-width Warm Ivory section that pairs concise access messaging with app and desktop product visuals.

### Footer Start CTA

Large circular coral Start treatment anchors the sparse dark footer above compact legal and company disclosure text.

### Measured component styles

- **Primary button** (“Start”): background #ed5145 · text #ffffff · radius 8px · padding 8px 24px · 500 16px __muoto_7e5c91
- **Secondary button** (“FOUNDERS”): transparent background · text #000000 · border 1px solid #bfbcb7 · radius 24px · padding 10px 24px · 400 16px Muoto
- **Link** (“Mary Gooneratne Co-Founder of Bridgespli”): transparent background · text #efece6 · radius 0px · padding 0px · 400 16px __muoto_7e5c91
- **Card**: background #efece6 · text #efece6 · radius 16px · padding 0px · 400 16px __muoto_7e5c91
- **Navigation item** (“CAPITAL”): transparent background · text #efece6 · radius 0px · padding 0px · 400 16px __muoto_7e5c91

## Do

- Keep the primary canvas near-black and uninterrupted.
- Use Warm Ivory for display text and the dedicated product-access band.
- Set display headlines in a light-weight sans with generous line breaks.
- Reserve tracked monospace for small uppercase labels.
- Make product interfaces and founder portraits the main evidence.
- Use coral only for clear actions and selective emphasis.

## Don't

- Do not add unmeasured colors or decorative gradients.
- Do not fill black sections with unnecessary cards or dividers.
- Do not make supporting copy compete with the display headline.
- Do not use monospace for long-form body text.
- Do not turn interface mockups into generic abstract illustrations.
- Do not distribute coral across every link or heading.

## Agent prompt

Build a new fintech page in Capital’s visual style. Use Carbon Canvas (#000000) for the main dark sections and Deep Charcoal (#040503) for subtle dark surfaces; use Warm Ivory (#efece6) for prominent text and a deliberate light product band. Set headlines in a light, modern sans such as DM Sans, with very large scale and clear line breaks; use Space Mono sparingly for tracked uppercase eyebrow labels. Keep the composition spacious and centered within the measured 1120px maximum width, then use focused two- or three-column content where useful. Show real product UI and candid, rectangular founder photography as proof. Use Graphite Rule (#302f2f) for restrained borders and Signal Coral (#ed5145) only for primary actions. Keep the page flat overall, with depth limited to interface layering and subtle control shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement and oversized headline above a full-bleed desktop banking mockup on black. | announcement link, product-first introduction | uppercase mono pill, light display headline, layered interface mockup |
| 2 | feature-split | Two-column dark section pairing founder and investor paths with a product video. | founder/investor choice, fundraising workflow overview | paired feature headings, outlined pill controls, embedded video |
| 3 | product-showcase | Full-bleed ivory band with copy and mobile and desktop banking imagery in a two-column composition. | platform access messaging, app download prompt | light section band, device mockups, dark product UI |
| 4 | testimonials | Centered section title above three founder portrait-and-caption columns on black. | founder stories, profile links | mono section eyebrow, portrait grid, compact captions |
| 5 | footer | Sparse black footer with a large centered circular Start CTA and small legal links below. | primary conversion, legal and contact links | coral circular CTA, small muted footer copy, minimal navigation |

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