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

# AngelList — 2024 Year in Review · Design System

> Private-market progress, told with bold type and calm precision

**Theme:** light · **Industry:** fintech · **Source:** https://www.angellist.com/2024 · **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’s 2024 review pairs oversized gradient typography and deep teal opening sections with a quiet, white editorial layout. It moves from platform statistics and product updates to team profiles and related resources.

## North star

Let oversized, expressive type introduce the story, then use quiet white space, deep teal text, and fine dividers to make details easy to scan.

## Overview

The visual identity begins with a near-black teal canvas and oversized uppercase display lettering, colored by a restrained olive-to-lavender gradient. This dramatic opening gives way to broad white editorial sections, where deep teal headings and dark body text keep long-form information legible. The custom AngelList display face carries large headlines; its companion sans-serif handles paragraphs, labels, navigation, and buttons. Typography is generally regular-weight, with uppercase used for navigation and section markers rather than throughout the body. The page alternates narrative blocks, product groupings, statistics, and team content, using generous whitespace and fine pale borders to establish rhythm instead of card-heavy decoration. Images appear primarily in the team profiles and related-content cards; people are shown in simple portrait crops, while resource cards can include product imagery or colored fields. Accent gradients are reserved for expressive headline moments and visual transitions.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for the long-form product, company, and team sections. |
| Deep Teal | `#001d21` | `--color-deep-teal` | brand | Inverse hero and partner bands, primary text, and dark CTA treatment. |
| Quiet Gray | `#848888` | `--color-quiet-gray` | neutral | Muted supporting text on light sections. |
| Mist Border | `#ccd5d6` | `--color-mist-border` | neutral | Pale separators and understated section rules. |
| Periwinkle | `#898ee5` | `--color-periwinkle` | accent | Lavender-blue stop in the oversized hero gradient. |
| Olive Gold | `#7f7833` | `--color-olive-gold` | accent | Olive gradient stop coloring portions of the opening display lettering. |
| Slate Gray | `#68706f` | `--color-slate-gray` | neutral | Secondary text tone sampled from supporting page content. |
| Pale Steel | `#b2bfc1` | `--color-pale-steel` | neutral | Subtle border tone used in subdued separators and transitions. |
| Soft Ivory | `#f9f9f7` | `--color-soft-ivory` | surface | Light navigation and CTA fill against dark teal. |
| Deep Sage | `#334a4d` | `--color-deep-sage` | surface | Dark teal-gray banding and subtle transition detail. |
| Cloud Gray | `#eaebea` | `--color-cloud-gray` | surface | Muted light surface tone in transitions and supporting interface areas. |
| Harbor Gray | `#43585a` | `--color-harbor-gray` | surface | Secondary dark surface tone, visible in subtle banding and interface details. |
| Soft Pewter | `#a7b0b1` | `--color-soft-pewter` | surface | Pale inverse-surface tone in decorative transitions. |
| Lilac Signal | `#bdbbff` | `--color-lilac-signal` | accent | Accent navigation text and a CTA hover color. |
| Teal Shadow | `#213a3d` | `--color-teal-shadow` | surface | Deep teal support tone in dark surfaces and transition details. |
| Muted Fjord | `#647577` | `--color-muted-fjord` | surface | Low-emphasis blue-green tone in supporting visual details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#001d21` (Deep Teal) · `--color-surface-2` → `#eaebea` (Cloud Gray) · `--color-surface-3` → `#43585a` (Harbor Gray) · `--color-surface-4` → `#a7b0b1` (Soft Pewter) · `--color-text` → `#001d21` (Deep Teal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#848888` (Quiet Gray) · `--color-border` → `#ccd5d6` (Mist Border) · `--color-accent` → `#898ee5` (Periwinkle) · `--color-accent-2` → `#7f7833` (Olive Gold) · `--color-accent-3` → `#bdbbff` (Lilac Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#001d21` | `#ffffff` | 17.53:1 | AAA |
| `#001d21` | `#eaebea` | 14.67:1 | AAA |
| `#001d21` | `#43585a` | 2.32:1 | fail |
| `#ffffff` | `#001d21` | 17.53:1 | AAA |
| `#ffffff` | `#eaebea` | 1.2:1 | fail |
| `#ffffff` | `#43585a` | 7.55:1 | AAA |
| `#848888` | `#ffffff` | 3.58:1 | AA-large |
| `#848888` | `#001d21` | 4.89:1 | AA |
| `#848888` | `#eaebea` | 3:1 | AA-large |
| `#848888` | `#43585a` | 2.11:1 | fail |

### Gradients

- `linear-gradient(98.78deg, rgb(127, 120, 51) 6.69%, rgb(137, 142, 229) 40.89%, rgb(137, 142, 229) 83.02%, rgb(134, 123, 54) 100.19%)`
- `linear-gradient(178deg, rgb(205, 203, 255) 17.58%, rgb(219, 193, 226) 100.53%)`
- `linear-gradient(195.85deg, rgb(98, 88, 255) -121.25%, rgb(224, 106, 178) -69.08%, rgb(251, 133, 105) -36.55%, rgb(255, 177, 177) 12.07%, rgb(205, 203, 255) 59.26%, rgb(126, 111, 74) 126.83%, rgb(50, 96, 127) 172.94%, rgb`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| angellist | `--font-body` | webfont | 400, 500 | Body copy, navigation, labels, buttons, and links. | Inter |
| angellistDisplay | `--font-display` | webfont | 400 | Large display lettering and editorial headings. | DM Sans |

- **angellist:** Regular body text; navigation and buttons use medium weight and uppercase; links remain sentence case.
- **angellistDisplay:** Regular weight throughout; display treatment uses uppercase, while section headings use sentence case and tight tracking.

### Type scale — Custom (ratio ≈ 1.706, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 260px | 400 | 0.8 | -0.025em | uppercase | angellistDisplay | Oversized uppercase lettering in the opening year-in-review hero. |
| h1 | 80px | 400 | 1.05 | -0.01em | — | angellistDisplay | Primary editorial headlines introducing major page chapters. |
| h2 | 60px | 400 | 1.15 | -0.015em | — | angellistDisplay | Large section titles and key narrative statements. |
| h3 | 38px | 400 | 1.25 | 0 | — | angellistDisplay | Product-group and prominent subsection headings. |
| h4 | 28px | 400 | 1.3 | 0 | — | angellistDisplay | Smaller feature or product headings within content groups. |
| body | 18px | 400 | 1.6 | -0.002em | — | angellist | Paragraphs explaining product changes, company context, and team details. |
| caption | 16px | 400 | 1.5 | -0.002em | — | angellist | Compact supporting copy and secondary labels. |
| button | 14px | 500 | 1.5 | -0.002em | uppercase | angellist | Uppercase CTA text, including the header join action. |
| nav | 14px | 500 | 0.8 | -0.002em | uppercase | angellist | Uppercase header navigation and section links. |
| link | 20px | 400 | 1.4 | -0.004em | — | angellist | Prominent text links, such as open roles and related resources. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 80, 144 px.
- Section rhythm 32px · element gap 32px · card padding — · max content width 1344px.

A long, vertically paced editorial page, with a centered content frame capped at the measured 1344px maximum width. The opening hero and partner section span dark teal bands; most narrative content sits on a white canvas. Use clear section breaks, broad whitespace, and fine rules rather than dense panels. Product content forms three-column groups where measured, while industry and team content use two-column layouts. Align headings and paragraphs to the start edge, reserving centered alignment for the partner heading.

## Shape & elevation

- Radius: button `50%` · badge `4px` · xs `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface reads as flat: no measured shadows are present. Separate content with whitespace, pale hairlines, and shifts between white and deep teal surfaces. Buttons use rounded pill silhouettes, while small role badges keep a modest rectangular radius. Avoid raised card stacks; imagery and color fields provide the limited depth.

## Imagery

The page is primarily typographic and does not depend on decorative illustration or 3D renders. Photography is concentrated in the team profiles, using individual portraits with clean crops and minimal framing. Related-content cards mix editorial text with a small number of product or report images; keep these images inside their card layouts rather than spreading them across the page as full-bleed backgrounds. Gradient lettering is the dominant expressive visual.

## Components

### Pill navigation CTA

Header join action uses a Soft Ivory (#f9f9f7) fill, Deep Teal (#001d21) uppercase medium text, and a pill-shaped silhouette.

### Hero display

Oversized uppercase year-in-review lettering sits on Deep Teal (#001d21), using an olive-to-periwinkle gradient treatment and a muted supporting line.

### Section introduction

Large regular-weight display heading and a shorter body paragraph share a spacious white section, aligned to the start.

### Metric presentation

Prominent financial and platform figures are set within the dark opening portion, with sparse labels and restrained separators.

### Team profile row

Profile content uses fine horizontal dividers, large names, compact role badges, expandable rows, and simple portrait crops.

### Related-content cards

Three-column editorial resource links combine concise headings and descriptions with image or color-field treatments.

### Measured component styles

- **Primary button** (“JOIN US”): background #f9f9f7 · text #001d21 · radius 3.35544e+07px · padding 4px 10px · 500 14px angellist · uppercase
- **Secondary button**: transparent background · text #001d21 · border 1px solid #001d21 · radius 3.35544e+07px · padding 0px · 400 16px angellist
- **Link** (“2024 2024 State State of of Venture Repo”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px angellist
- **Badge** (“Engineering”): background #cdeed3 · text #001d21 · radius 4px · padding 0px 4px · 400 14px angellist
- **Navigation item** (“2024 YEAR IN REVIEW 2024 YEAR IN REVIEW”): transparent background · text #f9f9f7 · radius 0px · padding 0px · 500 14px angellist · uppercase

## Do

- Use Deep Teal (#001d21) for the hero and selected inverse bands.
- Keep the main editorial canvas white and visually quiet.
- Reserve the olive and periwinkle gradient for expressive display moments.
- Pair oversized display headings with restrained, readable body copy.
- Use whitespace and pale rules to separate long-form sections.
- Keep navigation and CTA labels uppercase and compact.

## Don't

- Do not turn every section into a colored card.
- Do not use heavy shadows to create depth.
- Do not apply gradients indiscriminately to body text or controls.
- Do not crowd the page with dense copy or tight section spacing.
- Do not replace the restrained palette with vivid unrelated colors.
- Do not make photography the dominant visual system.

## Agent prompt

Build a new editorial page in AngelList’s 2024 review style. Use Deep Teal (#001d21) for a dramatic opening or selected inverse bands, and Gallery White (#ffffff) for the long-form content canvas. Set the main display headlines in a light, custom-feeling sans-serif, with oversized uppercase lettering where appropriate; reserve an Olive Gold (#7f7833) to Periwinkle (#898ee5) gradient for high-impact display moments. Use a clean companion sans-serif for body copy, navigation, labels, and links. Keep content spacious, align section introductions to the start edge, and divide blocks with whitespace and pale Mist Border (#ccd5d6) rules rather than shadowed cards. Use simple portrait photography for people, restrained resource-card imagery, and compact pill CTAs in Soft Ivory (#f9f9f7).

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark teal opening with oversized gradient lettering and supporting tagline. | brand introduction | dark canvas, gradient display type |
| 2 | stats | Dark full-width band with a sparse, prominent metrics presentation. | at-a-glance metrics | inverse section, large figures |
| 3 | stats | Continued dark metrics area, focusing on one standout figure. | single key metric | large number, dark surface |
| 4 | other | Full-width transition between dark opening and white editorial content. | visual transition | layered color bands |
| 5 | feature-split | White editorial section with heading and explanatory paragraph aligned across the content area. | chapter introduction | split text layout, display heading |
| 6 | feature-grid | Three-column product grouping with a short introductory statement. | product overview | three-column grid, numbered offerings |
| 7 | feature-split | White narrative section with a prominent statement and supporting context. | workflow explanation | large editorial copy |
| 8 | stats | Sparse metrics block presenting operational figures and platform activity. | proof points | number-led copy, open layout |
| 9 | feature-grid | Three-column content group with an introduction and numbered initiatives. | initiative overview | numbered entries, column layout |
| 10 | feature-split | White editorial block led by a prominent statement. | positioning statement | display heading, minimal copy |
| 11 | category-nav | Two-column content with a heading and a vertical industry list. | category scan | stacked text list |
| 12 | logo-cloud | Dark teal band with a centered title and a six-column partner image area. | social proof | inverse surface, logo grid |
| 13 | other | Open white transition separating the partner band from team content. | visual transition | whitespace, color bands |
| 14 | feature-split | White editorial introduction with heading and a short supporting paragraph. | team context | split text layout, display heading |
| 15 | team | Two-column team content with portrait details, expandable rows, and horizontal dividers. | expandable profiles, explore roles | portrait crop, role badges, hairline separators |
| 16 | content-feed | Three-column set of editorial resource cards beneath a large section heading. | related content | resource cards, mixed imagery |
| 17 | other | White ending with a broad decorative transition area. | page close | color bands, open whitespace |

## 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-2024