Complete design system extracted from compoundplanning.com — every token, component, interaction pattern, and accessibility note, all from real values.
All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.
Single font family: Monument Grotesk — used across all roles. Font files loaded by the site: Monument Grotesk (400) · Signifier (400) · IBM Plex Mono (400).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | Talk to an advisor Try the dashboard |
||
| Body | FoundersBusiness OwnersProfessionalsRetireesFamilies |
||
| Body | Modern wealth management for |
||
| Body | Talk to an advisor Try the dashboard |
||
| Body | Modern wealth management for |
Nav demo using extracted colors, font, real link labels.
| Background | #1a1a1a |
| Text color | #ffffff |
| Font family | Monument Grotesk |
| Links (extracted) | Sign up · View all · Investment Research · The Manual · The Archive |
| Copyright (extracted) | © Compound Planning. All rights reserved. |
Layout values (height, padding, link states) are demo styling — not extracted from the site.
Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 9999px · fill type: solid · padding density: normal.
bg #171717 · color #ffffff · radius: 9999px
Demo variant — outlined treatment of the extracted primary color #171717.
Demo variant — text-only treatment of the extracted primary color.
Generic disabled-state demo — not extracted from the site.
Flat design system — no box-shadows. Depth is communicated through background contrast and borders.
bg #ffffff · text #171717
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
radius: not detected · demo border/background styling
Demo focus treatment using extracted primary color #171717.
Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.
Corner radius tokens observed across components. All values extracted from live stylesheet.
⚠️ 9999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.
Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.
bg #ffffff — the outermost layer. Everything sits on top of this.
bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.
bg #1a1a1a — depth through color contrast, no shadows.
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.15s cubic-bezier(.4,0,.2,1)).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.15s | 12× in stylesheet |
| duration-base | 0.2s | 6× in stylesheet |
| duration-slow | 0.25s | 5× in stylesheet |
| duration-slower | 0.3s | 4× in stylesheet |
| duration-slowest | 0.5s | 9× in stylesheet |
| easing-1 | cubic-bezier(.4,0,.2,1) | 8× in stylesheet |
| easing-2 | linear | 6× in stylesheet |
| easing-3 | ease | 6× in stylesheet |
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
| Breakpoint | Boundary | Usage |
|---|---|---|
| Mobile | 595px | 2 @media rules |
| Tablet | 640px | 3 @media rules |
| Tablet-2 | 768px | 5 @media rules |
| Tablet-3 | 801px | 4 @media rules |
| Desktop | 976px | 2 @media rules |
Extracted from https://compoundplanning.com/ stylesheets.