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

# Composer · Design System

> Trading, built better through bold geometry.

**Theme:** light · **Industry:** fintech · **Source:** https://www.composer.trade/ · **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._

Composer pairs an airy gray canvas and oversized black typography with vivid geometric color blocks. Product UI, financial proof points, and contrasting dark sections make the fintech homepage feel expressive yet practical.

## North star

Keep the interface calm and open, then use oversized black typography and precise saturated color blocks to make each key moment unmistakable.

## Overview

The page balances a cool, pale gray canvas with crisp white areas and moments of near-black, creating a restrained frame for saturated green, blue, and pink accents. The hero establishes the visual identity with a huge black wordmark-style headline crossing a grid of flat color rectangles; the accents are graphic blocks, not decorative gradients. Neue Haas Grotesk Display carries most of the interface, from oversized display text to compact navigation, while Inter is reserved for small labels and dense product-card content. The layout alternates wide, airy bands with tight feature grids and product demonstrations, generally aligning content to the left and letting media occupy substantial space. Later sections use dark backgrounds and green panels to signal a change in emphasis. Hairline borders, softly rounded cards, and selective layered shadows distinguish product mockups without making the interface feel skeuomorphic.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White surfaces, footer text, and occasional text on dark backgrounds. |
| Cool Canvas | `#ecedee` | `--color-cool-canvas` | surface | Main pale gray page canvas and broad feature-section background. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Primary typography, navigation, dark controls, and high-contrast badges. |
| Soft Grid | `#d6d6d6` | `--color-soft-grid` | neutral | Mostly a media or section gradient tone; not a defining flat interface color. |
| Electric Blue | `#1f86ff` | `--color-electric-blue` | accent | Fine badge outlines and small blue text details. |
| Composer Blue | `#1871da` | `--color-composer-blue` | brand | Blue feature bands, interactive highlights, and AI-related badge text. |
| Strategy Green | `#31805a` | `--color-strategy-green` | brand | Green feature accents and selected founder or profile color blocks. |
| Signal Green | `#1ec072` | `--color-signal-green` | accent | Vivid green geometric blocks and small chart or badge details. |
| Composer Pink | `#f6609f` | `--color-composer-pink` | brand | Pink accent blocks, selected display-letter overlays, and founder color coding. |
| Candy Pink | `#ffb4ed` | `--color-candy-pink` | accent | Pale pink geometric tiles and occasional badge or button details. |
| Trading Orange | `#ff5500` | `--color-trading-orange` | accent | A small isolated button or illustration accent, not a core page color. |
| Warm Amber | `#ffa724` | `--color-warm-amber` | accent | Small amber blocks in the hero’s geometric artwork. |
| Quiet Divider | `#bdbebe` | `--color-quiet-divider` | neutral | Thin card, navigation, and section borders. |
| Cool Hairline | `#bec6cc` | `--color-cool-hairline` | neutral | Subtle outlines and fine separators around sections and interface elements. |
| Market Gold | `#ffbb38` | `--color-market-gold` | accent | Small badge or chart detail within interface artwork. |
| Lavender Pop | `#ba84ff` | `--color-lavender-pop` | accent | Occasional badge and heading detail, mainly within graphic or profile elements. |
| Forest Footer | `#1c372a` | `--color-forest-footer` | surface | Deep green footer surface with subdued light legal copy. |
| Night Panel | `#101516` | `--color-night-panel` | surface | Near-black section backgrounds, including the retirement feature band. |

### Semantic aliases

`--color-canvas` → `#ecedee` (Cool Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Pure Ink) · `--color-surface-3` → `#1c372a` (Forest Footer) · `--color-surface-4` → `#101516` (Night Panel) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#bdbebe` (Quiet Divider) · `--color-accent` → `#1871da` (Composer Blue) · `--color-accent-2` → `#31805a` (Strategy Green) · `--color-accent-3` → `#f6609f` (Composer Pink) · `--color-on-accent` → `#000000` (Pure Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ecedee` | 17.91:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1c372a` | 1.63:1 | fail |
| `#ffffff` | `#ecedee` | 1.17:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1c372a` | 12.89:1 | AAA |
| `#1871da` | `#ecedee` | 4.06:1 | AA-large |
| `#1871da` | `#ffffff` | 4.76:1 | AA |
| `#1871da` | `#000000` | 4.41:1 | AA-large |
| `#1871da` | `#1c372a` | 2.71:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.16) 0.5px, rgba(0, 0, 0, 0) 0.5px), linear-gradient(to right, rgba(0, 0, 0, 0.16) 0.5px, rgba(0, 0, 0, 0) 0.5px)`
- `linear-gradient(90deg, rgb(236, 237, 238) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(90deg, rgb(30, 192, 114) 20px, rgba(0, 0, 0, 0) 1%), linear-gradient(rgb(30, 192, 114) 20px, rgba(0, 0, 0, 0) 1%), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grotesk-display | `--font-body` | webfont | 400, 600, 500, 700 | Primary display, headings, body copy, navigation, links, and buttons. | Inter |
| Inter | `--font-inter` | webfont | 400, 600, 500, 700 | Compact captions, badges, and product-card or data-interface text. | Inter |

- **neue-haas-grotesk-display:** Use a clean sans-serif voice with mostly regular weights; reserve semibold or bold for emphasis and oversized headlines.
- **Inter:** Keep small UI text compact and legible; use regular weight for data and semibold for short labels.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1 | 0 | — | neue-haas-grotesk-display | Oversized hero headline and standout display moments. |
| h1 | 36px | 400 | 1.2 | 0.01em | — | neue-haas-grotesk-display | Primary section headings and major feature statements. |
| h2 | 32px | 400 | 1.2 | 0.02em | — | neue-haas-grotesk-display | Secondary feature and content-section headings. |
| h3 | 24px | 400 | 1 | 0.025em | — | neue-haas-grotesk-display | Feature-card and subsection headings. |
| h4 | 20px | 400 | 1.4 | 0.025em | — | neue-haas-grotesk-display | Smaller supporting headings in content areas. |
| body | 14px | 400 | 1.43 | 0.025em | — | neue-haas-grotesk-display | Descriptions, feature copy, and general interface text. |
| caption | 10px | 400 | 1.5 | 0 | — | Inter | Compact labels, metadata, and fine-print notes. |
| button | 24px | 400 | 1 | 0.025em | — | neue-haas-grotesk-display | Large primary CTA label styling. |
| nav | 14px | 400 | 1.43 | 0.025em | — | neue-haas-grotesk-display | Header navigation links. |
| link | 14px | 400 | 1.25 | 0.02em | — | neue-haas-grotesk-display | Inline links and secondary calls to action. |

OpenType features in use: `"calt"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 24, 32, 40, 56 px.
- Section rhythm 32px · element gap 4px · card padding 12px · max content width 1376px.

Use a broad centered content area, measured up to 1376px, with a compact 8px-based spacing system. The first viewport has a slim dark announcement strip above a spacious header and a left-led hero; its oversized title spans across the geometric artwork. Below, alternate full-width section bands with two- or three-column feature layouts, product mockups, and statistics. Maintain generous canvas around major content while keeping cards and supporting UI compact. Use fine separators to organize dense grids without heavy framing.

## Shape & elevation

- Radius: button `9999px` · card `6px` · media `50%` · badge `2px` · nav `4px` · link `9999px` · xs `2px` · sm `4px` · md `6px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(24, 113, 218, 0.25) 0px 1px 2px 0px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0.01) 0px 52.9195px 20.7387px 0px, rgba(0, 0, 0, 0.03) 0px 29.3203px 17.8782px 0px, rgba(0, 0, 0, 0.05) 0px 12.8723px 12.8723px 0px, rgba(0, 0, 0, 0.06) 0px 3.57564px 7.15129px 0px, rgba`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.01) 45px 68px 33px 0px, rgba(0, 0, 0, 0.02) 25px 38px 27px 0px, rgba(0, 0, 0, 0.03) 11px 17px 20px 0px, rgba(0, 0, 0, 0.04) 3px 4px 11px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 0px`
- Shadow `xl-3` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(36, 101, 217, 0.03) 54px 82px 39px 0px, rgba(36, 101, 217, 0.11) 31px 46px 33px 0px, rgba(36, 101, 217, 0.19) 14px 20px 24px 0p`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(36, 101, 217, 0.1) 0px 0px 0px 0px, rgba(36, 101, 217, 0.1) 0px 2px 4px 0px, rgba(36, 101, 217, 0.09) 1px 6px 6px 0px, rgba(36,`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.5) 0px 20px 25px -5px, rgba(0, 0, 0, 0.5) 0px 8px 10px -6px, rgba(255, 255, 255, 0.4) 0px -1px 8px 0px inset`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections sit flat on the canvas, with thin gray hairlines defining grids and card edges. Use restrained layered shadows only on prominent product mockups or select interface cards to lift them from the background. Keep color geometry and section bands flush and graphic rather than treating them as floating cards.

## Imagery

Favor crisp product-interface mockups, portfolio and chart previews, and financial app visuals over lifestyle photography. The hero uses flat, rectangular color geometry and a subtle dotted-grid treatment around the giant headline. Product imagery is framed like floating interface cards, sometimes with soft shadows; later sections include a landscape image and branded illustrations. Keep imagery clean and legible, and let its vivid colors remain distinct from the restrained page canvas.

## Components

### Announcement strip

A narrow near-black bar at the very top with centered offer copy and a small linked announcement.

### Site navigation

Logo at left and compact, black Neue Haas Grotesk links aligned across the right; the sign-up action appears as a dark pill.

### Hero title and artwork

Large black headline over a pale gray canvas, intersected by vivid rectangular color tiles and dotted details.

### Primary CTA

Black pill-shaped action with white text and a directional arrow; keep the label prominent and simple.

### Product cards

White interface cards with dark text, thin #bdbebe borders, modest rounding, and selective soft shadow.

### Feature bands

Full-width light, blue, green, or near-black sections pair concise copy with product imagery or interface previews.

### Measured component styles

- **Primary button** (“Ben Rollert Founder”): background #31805a · text #000000 · radius 0px · padding 16px 12px · 400 16px neue-haas-grotesk-display
- **Secondary button** (“Ananda Aisola Co-founder”): background #1871da · text #000000 · radius 0px · padding 16px 12px · 400 16px neue-haas-grotesk-display
- **Link** (“important disclosures”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px neue-haas-grotesk-display
- **Card** (“Current Holdings NVDA NVIDIA Corporation”): background #ffffff · text #000000 · border 1px solid #bdbebe · radius 6px · padding 8px 16px · 400 16px Inter · shadow rgba(0, 0, 0, 0.01) 45px 68px 33px 0px, rgba(0, 0, 0, 0.02) 25px 38px 27px 0px, 
- **Badge** (“NVDA”): background #000000 · text #ffffff · radius 2px · padding 2px 4px · 600 12px Inter
- **Navigation item** (“Trade with AI Business Accounts Retireme”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px neue-haas-grotesk-display

## Do

- Use Neue Haas Grotesk Display as the dominant interface voice.
- Anchor broad content areas on the Cool Canvas #ecedee.
- Use Pure Ink #000000 for primary text and high-contrast actions.
- Treat vivid green, blue, and pink as deliberate geometric accents.
- Keep dividers thin and product cards lightly elevated.
- Alternate open feature bands with compact, clearly aligned grids.

## Don't

- Don't replace the geometric color blocks with decorative gradients.
- Don't use saturated accents as the main page background everywhere.
- Don't crowd the hero or shrink its headline into ordinary heading scale.
- Don't add heavy shadows to every card or section.
- Don't use rounded, soft styling on every visual element.
- Don't let product mockups overwhelm the surrounding page hierarchy.

## Agent prompt

Build a new fintech page in Composer’s visual style. Use Cool Canvas #ecedee as the spacious base, Pure Ink #000000 for crisp type, and Gallery White #ffffff for cards or clean bands. Set headings and most interface copy in Neue Haas Grotesk Display, with Inter for compact data labels. Establish each major section with bold, oversized typography and a restrained palette of geometric accents: Composer Blue #1871da, Strategy Green #31805a, and Composer Pink #f6609f. Keep layout broad and left-aligned, alternating airy full-width bands with compact product grids. Show realistic trading interfaces as clean cards with fine #bdbebe borders and selective soft shadows. Add dark panels sparingly for contrast; avoid gradient-heavy decoration and excessive rounding.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim dark announcement above a wide header and spacious gray hero; oversized title crosses geometric color blocks. | Announcement link, Primary sign-up CTA, Top-level navigation | Oversized headline, Rectangular color tiles, Pill-shaped action, Dotted graphic texture |

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