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

# AngelList · Design System

> Private markets, framed in deep teal and pale light.

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

AngelList pairs a deep teal hero and footer with broad, pale product sections to present its private-market businesses as one connected financial system. Oversized display type, restrained lavender accents, and product imagery keep the page polished and information-led.

## North star

Use deep teal for the brand frame, pale bands for business detail, and reserve lavender for deliberate emphasis.

## Overview

The page alternates a deep teal canvas with generous pale product bands, creating a clear shift from brand statement to business detail. The hero centers a large, soft-lavender headline above muted supporting text, a light CTA, and a compact row of partner marks. Product sections use pale backgrounds, dark teal typography, and a two-column split: concise labels and copy on the left, framed product or brand imagery on the right. The custom AngelList display face gives headlines a rounded, open character; the companion sans-serif handles navigation, body copy, and controls with a practical, quiet tone. Lavender is reserved for emphasis and the primary sales action rather than used as a broad background. Cards and buttons have modest rounded corners, while subtle hairlines and restrained layering keep the interface crisp. Comfortable spacing and repeated section proportions make a long homepage feel orderly rather than dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Teal | `#001d21` | `--color-deep-teal` | brand | Primary canvas for the hero, navigation, footer, dark buttons, and headline text on pale sections. |
| Harbor Mist | `#b2bfc1` | `--color-harbor-mist` | neutral | Main muted text tone, especially supporting copy and subdued footer content. |
| Gallery White | `#f3f4f2` | `--color-gallery-white` | surface | Dominant pale background for the stacked business and product sections. |
| Teal Hairline | `#334a4d` | `--color-teal-hairline` | semantic | Fine border color, most visible in footer dividers and restrained structural rules. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Light section and canvas surface used around the page transition and footer content. |
| Slate Moss | `#68706f` | `--color-slate-moss` | neutral | Secondary text and link color for subdued headings and supporting content. |
| Soft Lavender | `#bdbbff` | `--color-soft-lavender` | accent | Primary sales CTA fill and selective accent text against the dark teal canvas. |
| Cloud Gray | `#ebeceb` | `--color-cloud-gray` | surface | Pale card surface and secondary tonal shift within light product areas. |
| Warm Chalk | `#f9f9f7` | `--color-warm-chalk` | neutral | Light navigation, button, and footer text; also used for the inverse CTA surface. |
| Electric Indigo | `#3e3aff` | `--color-electric-indigo` | accent | Small badge lettering, not a broad brand surface or dominant page color. |
| Quiet Pewter | `#848888` | `--color-quiet-pewter` | neutral | Low-emphasis footer text and minor supporting details. |

### Semantic aliases

`--color-canvas` → `#001d21` (Deep Teal) · `--color-surface` → `#f3f4f2` (Gallery White) · `--color-surface-2` → `#ffffff` (Clean White) · `--color-surface-3` → `#ebeceb` (Cloud Gray) · `--color-text` → `#b2bfc1` (Harbor Mist) · `--color-text-muted` → `#68706f` (Slate Moss) · `--color-text-subtle` → `#f9f9f7` (Warm Chalk) · `--color-border` → `#334a4d` (Teal Hairline) · `--color-accent` → `#bdbbff` (Soft Lavender) · `--color-on-accent` → `#001d21` (Deep Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#b2bfc1` | `#001d21` | 9.28:1 | AAA |
| `#b2bfc1` | `#f3f4f2` | 1.71:1 | fail |
| `#b2bfc1` | `#ffffff` | 1.89:1 | fail |
| `#b2bfc1` | `#ebeceb` | 1.6:1 | fail |
| `#68706f` | `#001d21` | 3.45:1 | AA-large |
| `#68706f` | `#f3f4f2` | 4.6:1 | AA |
| `#68706f` | `#ffffff` | 5.08:1 | AA |
| `#68706f` | `#ebeceb` | 4.29:1 | AA-large |
| `#f9f9f7` | `#001d21` | 16.63:1 | AAA |
| `#f9f9f7` | `#f3f4f2` | 1.05:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| angellist | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, labels, and footer text | Inter |
| angellistDisplay | `--font-display` | webfont | 400 | Display headlines and major section titles | DM Sans |

- **angellistDisplay:** Regular weight; large headlines use subtly tight negative tracking, with sentence case rather than all caps.
- **angellist:** Mostly regular weight; medium uppercase eyebrow labels use noticeably expanded tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.05 | -0.01em | — | angellistDisplay | Oversized centered hero statement. |
| h1 | 60px | 400 | 1.15 | -0.015em | — | angellistDisplay | Primary page or section headline emphasis. |
| h2 | 38px | 400 | 1.25 | 0 | — | angellistDisplay | Business names and major content section titles. |
| h3 | 22px | 400 | 1.4 | 0 | — | angellistDisplay | Subsection titles and product content headings. |
| h4 | 18px | 400 | 1.6 | -0.002em | — | angellist | Compact feature or footer group headings. |
| body | 14px | 400 | 1.5 | 0 | — | angellist | Product explanations, navigation details, and general copy. |
| caption | 12px | 400 | 1.5 | 0 | — | angellist | Small supporting labels, disclosures, and fine print. |
| button | 16px | 400 | 1.5 | -0.002em | — | angellist | CTA and action labels. |
| nav | 16px | 400 | 1.5 | -0.002em | — | angellist | Header navigation and account actions. |
| eyebrow | 11px | 500 | 1.45 | 0.08em | uppercase | angellist | Uppercase business-category labels above section titles. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 18, 24, 32, 48, 64, 80, 96 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1344px.

The page uses a broad centered content frame, measured at a 1344px maximum, with comfortable density. A centered hero gives way to repeated two-column product splits: text and actions on the left, media on the right. Pale sections form a steady vertical rhythm, followed by a white-to-deep-teal footer transition. Align headlines and copy to the left in product bands, reserving centered alignment for the opening statement. Keep spacing generous and consistent with the measured scale.

## Shape & elevation

- Radius: button `4px` · card `12px` · badge `4px` · nav `4px` · xs `4px` · sm `12px` · md `40px`
- Shadow `xl` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px -40px 100px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: pale section bands and dark canvas carry the hierarchy rather than prominent shadows. Cards use a measured 12px radius, while buttons and badges use 4px corners. Thin borders appear sparingly, including muted footer dividers; imagery can sit within a contrasting frame for depth.

## Imagery

Use product-interface captures and brand-specific media as framed visual anchors, rather than decorative stock imagery. The Funds section shows a bright fund dashboard inset against a deep teal surround; other blocks use video or compact brand visuals. Imagery sits in the right column and follows the section’s rounded card treatment. Keep assets distinct and legible, with restrained cropping and no invented color overlays.

## Components

### Header navigation

Compact horizontal navigation on deep teal, with light text, grouped product links, and a lavender Contact sales action.

### Hero statement

Centered display headline and muted one-line supporting copy, followed by a light Talk to an expert button.

### Partner mark row

A subdued horizontal strip of investor and partner marks, separated by fine vertical rules beneath the hero.

### Business feature split

Pale section band with a small category label, large dark heading, concise description, action links, and right-side media.

### Product card

A product visual on a light or dark contrasting panel, with measured 12px corner radius and no prominent shadow.

### CTA button

Compact 16px sans-serif label, measured 4px radius, and solid fill; lavender, deep teal, or warm chalk variants.

### Footer directory

Deep teal footer with a lead statement, grouped link columns, brand mark, social links, and subdued legal text.

### Measured component styles

- **Primary button** (“Contact sales”): background #bdbbff · text #001d21 · radius 4px · padding 0px 16px · 400 16px angellist
- **Secondary button** (“Explore funds”): background #001d21 · text #f9f9f7 · radius 4px · padding 0px 16px · 400 16px angellist
- **Link** (“AngelList Link”): transparent background · text #68706f · radius 0px · padding 0px · 400 18px angellist
- **Card**: background #ebeceb · text #001d21 · radius 12px · padding 0px · 400 16px angellist
- **Badge** (“NEW”): background #deddff · text #3e3aff · radius 4px · padding 0px 4px · 400 12px angellist
- **Navigation item** (“Skip to content Funds USVC Meridian Nova”): transparent background · text #f9f9f7 · radius 0px · padding 0px · 400 16px angellist

## Do

- Keep the hero centered on the deep teal canvas.
- Alternate dark framing with broad pale product sections.
- Use lavender selectively for the primary sales CTA and emphasis.
- Build business sections as clear text-and-media splits.
- Use display typography for large headings and sans-serif for controls.
- Keep cards and controls flat with restrained corner rounding.

## Don't

- Do not turn the pale product bands into dark cards.
- Do not use lavender as a large page background.
- Do not add heavy shadows or decorative gradients.
- Do not crowd product descriptions or navigation.
- Do not center-align the copy inside feature sections.
- Do not treat illustration-only colors as core brand colors.

## Agent prompt

Build a new AngelList-style page using Deep Teal (#001d21) as the brand frame and Gallery White (#f3f4f2) for broad content bands. Use Harbor Mist (#b2bfc1) for subdued copy and Soft Lavender (#bdbbff) sparingly for the primary action. Set large headlines in a rounded display sans-serif similar to DM Sans; use an Inter-like sans-serif for body copy, navigation, and controls. Start with a centered hero, then organize content into repeated two-column feature sections with left-aligned text and right-side product media. Keep the layout comfortable and clean, with restrained borders, modest corner rounding, and little visible shadow. End with a dense but orderly deep teal footer and grouped link columns. Preserve clear contrast and avoid decorative color or layout flourishes not supported by the page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered statement on deep teal, with a compact navigation header and partner-mark row below. | primary sales CTA, partner credibility strip | large lavender display headline, muted support copy, light CTA button, dark navigation |
| 2 | feature-split | Pale band with left-aligned product copy and actions beside a dashboard visual on the right. | fund administration overview, explore and contact actions | category eyebrow, large section title, dashboard media frame, paired CTAs |
| 3 | feature-split | Two-column product section with text at left and video imagery at right. | venture product introduction, external product link | category eyebrow, large title, dark media panel, compact CTA |
| 4 | feature-split | Light two-column band; explanatory copy and link on the left, branded image on the right. | wealth platform overview, visit product link | category eyebrow, large title, brand visual, dark CTA |
| 5 | feature-split | Two-column pale product band with status label and description at left and product artwork at right. | coming-soon status, request-access action | eyebrow label, status badge, large title, square brand artwork |
| 6 | footer | Deep teal multi-column directory above a brand, social, legal, and disclosure area. | contact and sign-in actions, grouped site navigation | lead statement, link columns, brand signature, fine-print dividers |

## Source CSS custom properties (selected)

```css
--colors-accent-gradient-1: linear-gradient(186deg, #fdaaa5 -10%, #cdcbff 50%, #fdaaa5 110%);
--header-bg: #fff;
--surface-bg: #fff;
--surface-bg-muted: #f3f4f2;
--surface-bg-light: #f9f9f7;
--surface-text-primary: #001d21;
--surface-text-secondary: #68706f;
--surface-text-muted: #848888;
--surface-text-accent: #8a744a;
--surface-text-section-label: #8a744a;
--surface-text-hover: #5955ff;
--surface-text-danger: #d44113;
--surface-text-danger-emphasis: #b02a00;
--surface-bg-danger: #faeae5;
--surface-accent-mauve: #cc94b0;
--surface-accent-purple: #bdbbff;
--surface-accent-coral: #fb8569;
--surface-accent-gold: #bda984;
--surface-accent-lime: #edfb90;
--surface-accent-light-green: #cdeed3;
--surface-accent-green: #b5d2cb;
--surface-accent-blue: #519bcd;
--surface-stroke-primary: #002b3133;
--surface-stroke-secondary: #ebeceb;
--card-primary: #f3f4f2;
--card-primary-hover: #ebeceb;
--card-primary-active: #f9f9f7;
--cta-primary-bg: #001d21;
--cta-primary-text: #f9f9f7;
--cta-primary-hover-bg: #bdbbff;
--cta-primary-hover-alt-bg: #00363d;
--cta-primary-hover-text: #001d21;
--cta-primary-active-bg: #00363d;
--cta-primary-active-text: #f9f9f7;
--cta-secondary-bg: #ebeceb;
--cta-secondary-text: #001d21;
--cta-secondary-hover-bg: #bdbbff;
--cta-secondary-hover-text: #001d21;
--cta-secondary-active-bg: #00363d;
--cta-secondary-active-text: #f9f9f7;
```

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