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

# Compound — Membership · Design System

> Calm, product-led wealth guidance with a human touch

**Theme:** light · **Industry:** fintech · **Source:** https://compoundplanning.com/membership · **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._

Compound presents financial membership as a calm blend of expert advice and an always-visible digital dashboard. The page pairs restrained monochrome styling with oversized interface previews, service cards, and clear conversion points.

## North star

Make complex wealth services feel calm and legible by pairing generous white space with crisp type and tangible product previews.

## Overview

The page builds a quiet, premium fintech identity from white canvas, near-black typography, and carefully restrained gray surfaces. A pale warm announcement strip is the only noticeable chromatic interruption; the measured page palette itself remains monochrome. Monument Grotesk carries both large centered headlines and compact navigation, keeping the experience contemporary without relying on heavy weights or decorative type. The hero establishes a clear hierarchy above a large, softly faded dashboard preview, with the product UI serving as evidence rather than decoration. Across the long page, spacious white sections alternate with light gray service areas and deep black product or closing panels. Cards use rounded silhouettes, subtle borders, and soft shadows to separate content without making the interface feel dense. The layout combines centered editorial statements, card grids, wide product demonstrations, and concise comparison content. Treat graphics inside dashboard previews and award marks as product imagery, not as core brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation and broad content sections; keeps the long page bright and open. |
| Quiet Gray | `#6f6f6f` | `--color-quiet-gray` | semantic | Main muted text for supporting copy and secondary button labels. |
| Graphite Ink | `#171717` | `--color-graphite-ink` | brand | Headlines, body text, navigation, and the principal dark CTA surface. |
| Soft Divider | `#e8e8e8` | `--color-soft-divider` | semantic | Fine card and link outlines that separate content without strong contrast. |
| Footer Silver | `#a0a0a0` | `--color-footer-silver` | semantic | Low-emphasis footer text and secondary legal or utility copy. |
| True Black | `#000000` | `--color-true-black` | surface | Dark product and closing sections, card surfaces, and inverse navigation or button details. |
| Mist Surface | `#f2f2f2` | `--color-mist-surface` | surface | Pale gray section bands and card backgrounds that gently distinguish service areas. |
| Mid Gray | `#8f8f8f` | `--color-mid-gray` | semantic | Occasional subdued heading and supporting-text tone; not a primary brand accent. |
| Slate Gray | `#5e5e5e` | `--color-slate-gray` | semantic | Secondary text in measured instances; use sparingly for supporting information. |
| Cloud Line | `#e2e2e2` | `--color-cloud-line` | semantic | Subtle card and interface detailing, including occasional hairline-like borders. |
| Porcelain Tint | `#f9f9f9` | `--color-porcelain-tint` | surface | Near-white card and button surface for restrained contrast on light sections. |
| Nightfall | `#0d0d0d` | `--color-nightfall` | surface | Deep transition tone within dark product-section gradients. |
| Blackout | `#070707` | `--color-blackout` | surface | Dark gradient endpoint in the product showcase; supports the cinematic black section. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#171717` (Graphite Ink) · `--color-surface-3` → `#f2f2f2` (Mist Surface) · `--color-surface-4` → `#f9f9f9` (Porcelain Tint) · `--color-text` → `#171717` (Graphite Ink) · `--color-text-muted` → `#6f6f6f` (Quiet Gray) · `--color-text-subtle` → `#a0a0a0` (Footer Silver) · `--color-border` → `#e8e8e8` (Soft Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#000000` | 1.17:1 | fail |
| `#171717` | `#f2f2f2` | 16.01:1 | AAA |
| `#6f6f6f` | `#ffffff` | 5.02:1 | AA |
| `#6f6f6f` | `#000000` | 4.18:1 | AA-large |
| `#6f6f6f` | `#171717` | 3.57:1 | AA-large |
| `#6f6f6f` | `#f2f2f2` | 4.49:1 | AA-large |
| `#a0a0a0` | `#ffffff` | 2.61:1 | fail |
| `#a0a0a0` | `#000000` | 8.03:1 | AAA |
| `#a0a0a0` | `#171717` | 6.86:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(243, 243, 243))`
- `linear-gradient(rgb(243, 243, 243), rgb(255, 255, 255))`
- `linear-gradient(178.85deg, rgb(13, 13, 13) 1.02%, rgb(13, 13, 13) 1.03%, rgb(26, 26, 26) 50.63%, rgb(7, 7, 7) 70.67%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 51%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Monument Grotesk | `--font-body` | webfont | 400 | All measured typography, from display headlines and body copy to navigation and buttons. | Inter |

- **Monument Grotesk:** Use regular weight throughout; sentence case and untracked text keep the presentation direct and understated.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | 0 | — | Monument Grotesk | Large showcase headline, especially dark product-section messaging. |
| h1 | 60px | 400 | 1.1 | 0 | — | Monument Grotesk | Primary hero headline, centered above the product dashboard preview. |
| h2 | 58px | 400 | 1.1 | 0 | — | Monument Grotesk | Major section headings introducing advice and membership benefits. |
| h3 | 48px | 400 | 1 | 0 | — | Monument Grotesk | Feature and product panel headings within content sections. |
| h4 | 36px | 400 | 1.11 | 0 | — | Monument Grotesk | Card titles, service labels, and smaller section introductions. |
| body | 14px | 400 | 1.43 | 0 | — | Monument Grotesk | Descriptive copy, navigation labels, and general interface text. |
| caption | 12px | 400 | 1.38 | 0 | — | Monument Grotesk | Fine-print notes and compact labels around product previews. |
| button | 16px | 400 | 1.5 | 0 | — | Monument Grotesk | Primary and secondary pill-shaped call-to-action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Monument Grotesk | Top navigation items and announcement-bar text. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 7, 8, 16, 24, 32, 48, 64 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1200px.

Use a centered desktop composition within the measured 1200px maximum page width and a 12-column grid. The opening viewport has a slim announcement bar, a horizontally arranged navigation row, and a centered hero with full-bleed-feeling product media. Maintain a compact underlying spacing system, but let broad section bands and large gaps create a spacious reading pace. Alternate centered statements, multi-column cards, wide product previews, and comparison content. Keep text blocks narrow enough to read comfortably and use alignment changes to distinguish editorial content from interface demonstrations.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `50%` · link `20px` · xs `20px` · sm `24px` · md `28px` · pill `9999px`
- Shadow `xl` (link): `rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 0px`
- Shadow `xl-2` (card): `rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px, rgba(194, 194, 194, `
- Shadow `xl-3` (card): `rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px, rgba(207, 207, 207, 0`
- Shadow `xl-4` (card): `rgba(0, 0, 0, 0.01) 0px 289px 116px 0px, rgba(0, 0, 0, 0.03) 0px 163px 98px 0px, rgba(0, 0, 0, 0.05) 0px 72px 72px 0px, rgba(0, 0, 0, 0.06) 0px 18px 40px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor subtle elevation over hard separation: cards sit on light backgrounds with soft, diffuse shadows and restrained gray borders. Rounded card edges and pill CTAs create a tactile but controlled interface. Dark panels rely on tonal gradients and media layering instead of conspicuous outlines; avoid strong drop shadows around ordinary text blocks.

## Imagery

Use large, polished dashboard previews as the primary visual evidence, with charts, financial summaries, and product controls visible but softly subordinate to the headline. Abstract translucent ribbon-like forms add depth behind the hero and comparison area. Keep imagery pale and low-contrast in light sections; reserve dramatic, dark product framing for the showcase. Small advisor portraits and award badges appear as supporting assets rather than brand-defining visuals.

## Components

### Announcement bar

A narrow pale warm strip above the navigation with centered product news and a dark pill link to the announcement.

### Primary CTA

Near-black, fully rounded button with white text; used for the prominent Get started action.

### Dashboard hero

Centered headline and compact prompt above a broad, softly faded financial dashboard preview.

### Service cards

Light rounded cards organize advisor expertise, exclusive services, and technology with concise copy and small icons.

### Advisor cards

Portrait-led advisor profiles in individual softly elevated cards with name, role, and location details.

### Dark product showcase

A black, gradient-backed interface presentation with a centered product preview, compact feature navigation, and a light demo button.

### Comparison table

A restrained feature comparison with clear provider columns, fine horizontal rules, and simple checkmarks.

### Measured component styles

- **Primary button** (“Get started”): background #171717 · text #fcfcfc · border 1px solid #dbdbdb · radius 9999px · padding 9px 20px 8px 20px · 400 16px Monument Grotesk
- **Secondary button** (“Read the announcement”): background #161616 · text #fcfcfc · radius 9999px · padding 9px 16px 8px 16px · 400 14px Monument Grotesk
- **Link** (“Steve Dean Chief Investment Officer San ”): transparent background · text #171717 · border 1px solid #e8e8e8 · radius 20px · padding 32px · 400 16px Monument Grotesk · shadow rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, r
- **Card** (“We help you diversify your investments W”): transparent background · text #171717 · radius 28px · padding 0px · 400 16px Monument Grotesk · shadow rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px
- **Navigation item** (“Introducing CompoundAI: the AI at the co”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px Monument Grotesk

## Do

- Keep the canvas predominantly white and the palette tightly monochrome.
- Use Monument Grotesk or a close, neutral sans-serif substitute.
- Center the hero headline and give the dashboard preview visual prominence.
- Use deep black panels selectively for product demonstrations and closing calls to action.
- Separate cards with restrained borders, rounded corners, and soft shadows.
- Treat interface imagery as proof of the financial product, not as background clutter.

## Don't

- Do not introduce bright accent colors into the core interface palette.
- Do not use heavy display weights or all-caps styling.
- Do not crowd the hero with dense copy or competing calls to action.
- Do not turn subtle gray section transitions into high-contrast stripes.
- Do not overuse shadows or hard outlines on light cards.
- Do not mistake colors inside charts, portraits, badges, or mockups for core brand colors.

## Agent prompt

Create a new Compound-style fintech page with an understated, premium editorial feel. Use Gallery White (#ffffff) as the main canvas, Graphite Ink (#171717) for headlines and primary text, Quiet Gray (#6f6f6f) for supporting copy, and Soft Divider (#e8e8e8) for delicate card edges. Reserve True Black (#000000), Nightfall (#0d0d0d), and Blackout (#070707) for selective product-showcase panels; use Mist Surface (#f2f2f2) for gentle section contrast. Set all text in a clean, regular-weight grotesk, with centered oversized headings and compact, readable supporting copy. Build a clear top announcement and navigation, generous hero with a real product-preview area, rounded service cards, concise comparison content, and a strong closing CTA. Keep layout centered, spacing calm, borders subtle, and interface imagery legible rather than decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Announcement bar and navigation lead into a centered headline, prompt, and broad dashboard preview within a 12-column page grid. | announcement link, primary sign-up CTA, product preview, section-based service discovery | centered hero typography, rounded dark buttons, light-gray card bands, dark product showcase |

## Source CSS custom properties (selected)

```css
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--colors-gray1: hsl(0, 0%, 99.0%);
--colors-gray2: hsl(0, 0%, 97.3%);
--colors-gray3: hsl(0, 0%, 95.1%);
--colors-gray4: hsl(0, 0%, 93.0%);
--colors-gray5: hsl(0, 0%, 90.9%);
--colors-gray6: hsl(0, 0%, 88.7%);
--colors-gray7: hsl(0, 0%, 85.8%);
--colors-gray8: hsl(0, 0%, 78.0%);
--colors-gray9: hsl(0, 0%, 56.1%);
--colors-gray10: hsl(0, 0%, 52.3%);
--colors-gray11: hsl(0, 0%, 43.5%);
--colors-gray12: hsl(0, 0%, 9.0%);
--colors-gray0Rgb: 255, 255, 255;
--colors-gray0: hsl(180, 0%, 100%);
--colors-gray13Rgb: 0, 0, 0;
--colors-gray13: hsl(0, 0%, 0%);
--colors-tomato1: hsl(10, 100%, 99.4%);
--colors-tomato2: hsl(8, 100%, 98.4%);
--colors-tomato3: hsl(8, 100%, 96.6%);
--colors-tomato4: hsl(8, 100%, 94.3%);
--colors-tomato5: hsl(8, 92.8%, 91.0%);
--colors-tomato6: hsl(9, 84.7%, 86.3%);
--colors-tomato7: hsl(10, 77.3%, 79.5%);
--colors-tomato8: hsl(10, 71.6%, 71.0%);
--colors-tomato9: hsl(10, 78.0%, 54.0%);
--colors-tomato10: hsl(10, 71.5%, 50.0%);
--colors-tomato11: hsl(10, 82.0%, 43.5%);
--colors-tomato12: hsl(10, 50.0%, 13.5%);
--colors-red1: hsl(359, 100%, 99.4%);
--colors-red2: hsl(359, 100%, 98.6%);
--colors-red3: hsl(360, 100%, 96.8%);
--colors-red4: hsl(360, 97.9%, 94.8%);
--colors-red5: hsl(360, 90.2%, 91.9%);
--colors-red6: hsl(360, 81.7%, 87.8%);
--colors-red7: hsl(359, 74.2%, 81.7%);
--colors-red8: hsl(359, 69.5%, 74.3%);
--colors-red9: hsl(358, 75.0%, 59.0%);
--colors-red10: hsl(358, 69.4%, 55.2%);
```

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