Skip to content
Markdown
All sites

angellist.com

Infrastructure for venture funds, startups and their investors

Save angellist.com to your collection

Sign in with Google to keep the sites you like in one place, on any device. It’s free.

We only use your name and email to save your collection. Privacy

You’ve saved 10 sites

Free accounts can keep 10. Go Pro to save as many as you like.

Billing

Cancel anytime from your account menu. Payments are handled by Stripe.

Add angellist.com to a folder

Group sites however you like — by project, client or mood.

Visit site (opens angellist.com in a new tab)Use this style

The style

A calm, premium finance language. A deep teal-black canvas carries large, light-weight sans headlines, with a soft lavender for the key action and highlights. Buttons are small-cornered rectangles rather than pills, and the page opens into warm off-white panels with big rounded tops. It feels quiet, assured and institutional without being cold.

Colours

  • Brand#bbc0ff
  • Buttons#f6f6f4
  • Highlight#3a4fff
  • Background#021b20
  • Text#f9f9f7

Click a colour to copy it.

Fonts

Inter Tight

For headings

Inter

For everything else

Free fonts that look like angellist.com’s own, so you can use them anywhere.

Buttons

Get startedContinueCancel

48px rectangles with 4px corners: lavender with dark label for the main action, off-white or teal-black for the others.

Use this style in your project

Pick the way that suits you. The first one needs no design or coding knowledge.

With an AI tool

Your AI tool builds the page for you, in angellist.com’s style.

2. Open it in

For developers

Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.

See the code

Make it your own

Change the colours, fonts and shapes, and see the result straight away before you use it.

Customise

Files

The code, ready to copy

Every file says where the style came from.

tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.

/* Deep Lavender — design tokens generated by Markdown */
/* Derived from an analysis of angellist.com; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */

:root {
  color-scheme: dark;
  --color-background: #021b20;
  --color-surface: #002b31;
  --color-surface-muted: #162d31;
  --color-text: #f9f9f7;
  --color-text-muted: #9ba5a5;
  --color-border: #33474b;
  --color-primary: #f6f6f4;
  --color-on-primary: #141210;
  --color-brand: #bbc0ff;
  --color-on-brand: #141210;
  --color-accent: #3a4fff;
  --color-success: #72ca9b;
  --color-warning: #e0a752;
  --color-danger: #cd7f7a;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-display: 3.875rem;
  --text-display-line-height: 1.05;
  --text-display-weight: 400;
  --text-display-tracking: -0.01em;
  --text-h1: 2.9375rem;
  --text-h1-line-height: 1.08;
  --text-h1-weight: 400;
  --text-h1-tracking: -0.008em;
  --text-h2: 2.25rem;
  --text-h2-line-height: 1.11;
  --text-h2-weight: 400;
  --text-h2-tracking: -0.006em;
  --text-h3: 1.75rem;
  --text-h3-line-height: 1.17;
  --text-h3-weight: 400;
  --text-h3-tracking: -0.004em;
  --text-lead: 1.3125rem;
  --text-lead-line-height: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.005em;
  --text-body: 1rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-small: 0.75rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.005em;
  --text-caption: 0.6875rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  --text-label: 0.8125rem;
  --text-label-line-height: 1.3;
  --text-label-weight: 600;
  --text-label-tracking: 0.01em;
  --text-code: 0.875rem;
  --text-code-line-height: 1.55;
  --text-code-weight: 400;
  --text-code-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;
  --space-10: 160px;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 13px;
  --radius-full: 9999px;
  --border-width: 0px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.18);
  --duration-fast: 110ms;
  --duration-base: 190ms;
  --duration-slow: 310ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --container: 1512px;
  --gutter: 24px;
  --button-radius: 5px;
  --button-padding: 12px 16px;
  --input-radius: 5px;
  --input-height: 48px;
  --card-radius: 12px;
  --card-padding: 24px;
  --badge-radius: 3px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-background: #f7f9fa;
    --color-surface: #fcfdfd;
    --color-surface-muted: #eceeef;
    --color-text: #1d1d16;
    --color-text-muted: #6b6c68;
    --color-border: #d8dada;
    --color-primary: #7e7e67;
    --color-on-primary: #141210;
    --color-brand: #bbc0ff;
    --color-on-brand: #1d1d16;
    --color-accent: #3a4fff;
    --color-success: #2f7e54;
    --color-warning: #93631a;
    --color-danger: #a3443e;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --color-background: #f7f9fa;
  --color-surface: #fcfdfd;
  --color-surface-muted: #eceeef;
  --color-text: #1d1d16;
  --color-text-muted: #6b6c68;
  --color-border: #d8dada;
  --color-primary: #7e7e67;
  --color-on-primary: #141210;
  --color-brand: #bbc0ff;
  --color-on-brand: #1d1d16;
  --color-accent: #3a4fff;
  --color-success: #2f7e54;
  --color-warning: #93631a;
  --color-danger: #a3443e;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}
See every detail

Buttons

Inputs

Badges

New ActivePendingOverdue

Project

Quarterly field notes

Draft

A card groups one idea: a title, one line of support and a clear next step.

Updated 2h agoOpen project

Weekly digest is ready

Three new comments and one approval.

npm i @brandless/ui

01

Colour

Semantic roles for dark mode. Contrast is checked against WCAG AA as you edit.

  • Background

  • Surface

  • Surface muted

  • AA 16.9:1

    Text

  • AA 7.0:1

    Text muted

  • Border

  • AA 16.4:1

    Primary

  • AA 17.3:1

    On primary

  • Brand

  • AA 10.8:1

    On brand

  • AA 3.2:1

    Accent

  • AA 9.0:1

    Success

  • AA 8.3:1

    Warning

  • AA 5.9:1

    Danger

02

Typography

Base 16px on a 1.312 modular scale. Only open-licence fonts are recommended.

display

Inter Tight

Open alternative to AngelList Display

body

Inter

Open alternative to AngelList

mono

IBM Plex Mono

Suggested
  • display · 62px / 1.05 · 400 · -0.01em

    The quiet grammar of form

  • h1 · 47px / 1.08 · 400 · -0.008em

    The quiet grammar of form

  • h2 · 36px / 1.11 · 400 · -0.006em

    The quiet grammar of form

  • h3 · 28px / 1.17 · 400 · -0.004em

    The quiet grammar of form

  • lead · 21px / 1.5 · 400 · -0.005em

    Readable text sets the pace of an interface.

  • body · 16px / 1.6 · 400 · 0em

    Readable text sets the pace of an interface.

  • small · 12px / 1.5 · 400 · 0.005em

    Readable text sets the pace of an interface.

  • caption · 11px / 1.4 · 400 · 0.01em

    Readable text sets the pace of an interface.

  • label · 13px / 1.3 · 600 · 0.01em

    Readable text sets the pace of an interface.

  • code · 14px / 1.55 · 400 · 0em

    const tokens = await load();

03

Spacing

A 8px base unit. Use the scale for padding, gaps and section rhythm.

  • 4px
  • 8px
  • 12px
  • 16px
  • 32px
  • 40px
  • 64px
  • 80px
  • 120px
  • 160px

04

Shape & surface

Mostly flat surfaces with a light shadow reserved for raised, interactive elements.

Radii

  • none

    0px

  • sm

    3px

  • md

    5px

  • lg

    8px

  • xl

    13px

  • full

    pill

Shadows & borders

shadow-sm

0 1px 2px rgb(0 0 0 / 0.05)

shadow-md

0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)

shadow-lg

0 18px 40px -12px rgb(0 0 0 / 0.18)

Borders: rarely used · Surfaces: flat

06

Layout

1512px container · 12 columns · 24px gutters

Patterns

  • Wide single-column hero with generous vertical rhythm between sections.
  • Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
  • Full-bleed bands for feature sections, inner content capped at the container.
  • Reading text limited to roughly 65–72 characters per line.

Responsive principles

  • Below md, grids collapse to a single column and side gutters drop to 16px.
  • Type steps above h2 scale down one step on small screens.
  • Navigation collapses to a disclosure menu below lg.
  • Touch targets stay at least 44×44px on every breakpoint.

07

Motion

Durations and easing curves. Previews respect your reduced-motion setting.

  • fast
    110ms
  • base
    190ms
  • slow
    310ms
  • ease-standard

  • ease-enter

  • ease-exit

Principles

  • Motion is measured and calm, easing into place rather than snapping.
  • Animate opacity and transform only; avoid animating layout.
  • Respect prefers-reduced-motion by replacing movement with instant state changes or fades.

angellist.com, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by angellist.com. Use your own words and images.

  • Save Mercury to your collection

    Sign in with Google to keep the sites you like in one place, on any device. It’s free.

    We only use your name and email to save your collection. Privacy

    You’ve saved 10 sites

    Free accounts can keep 10. Go Pro to save as many as you like.

    Billing

    Cancel anytime from your account menu. Payments are handled by Stripe.

    Add Mercury to a folder

    Group sites however you like — by project, client or mood.

    Mercury logo

    Mercury

    Business banking for startups and growing companies

  • Save Linear to your collection

    Sign in with Google to keep the sites you like in one place, on any device. It’s free.

    We only use your name and email to save your collection. Privacy

    You’ve saved 10 sites

    Free accounts can keep 10. Go Pro to save as many as you like.

    Billing

    Cancel anytime from your account menu. Payments are handled by Stripe.

    Add Linear to a folder

    Group sites however you like — by project, client or mood.

    Linear

    Plan and build products with your team and AI agents

  • Save Superpower to your collection

    Sign in with Google to keep the sites you like in one place, on any device. It’s free.

    We only use your name and email to save your collection. Privacy

    You’ve saved 10 sites

    Free accounts can keep 10. Go Pro to save as many as you like.

    Billing

    Cancel anytime from your account menu. Payments are handled by Stripe.

    Add Superpower to a folder

    Group sites however you like — by project, client or mood.

    Superpower logo

    Superpower

    A health membership with 100+ lab tests a year