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

# Airtree · Design System

> Warm editorial design for ambitious founders

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

Airtree’s homepage pairs a warm, pale canvas with confident editorial typography and candid founder-community photography. Its spacious storytelling sections balance a bright, image-led experience with a grounded dark newsletter footer.

## North star

Keep the warm editorial canvas and candid founder imagery spacious, using dark ink and bright yellow only for clear contrast and action.

## Overview

The page is built around a pale, warm canvas that keeps the experience open and lets photographs carry much of the colour. A dark green-black anchors navigation text, fine rules, and the full-bleed footer; a vivid yellow is reserved for small subscription and program actions. The hero introduces a soft sky-to-cream atmosphere and a centered, serif-like display message, while small orange decorative forms add a playful signal rather than setting the core palette. Prody supplies expressive display typography; Suisseintl keeps navigation, body copy, labels, and section headings practical and restrained. Large photography cards have generous rounded corners and usually place compact white captions over image gradients. The page moves through a carousel, partner marks, metrics, resource cards, programs, and a testimonial, with thin dividers and ample breathing room. Most sections stay flat and unshadowed; the dark footer closes the page with compact columns and oversized brand lettering.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Ink | `#262d29` | `--color-forest-ink` | brand | Dark green-black for navigation, primary text, fine rules, dark cards, and the newsletter footer. |
| Linen Cream | `#f7f6e3` | `--color-linen-cream` | surface | Main warm canvas and light text on dark areas; keeps content sections calm and cohesive. |
| Shadow Black | `#000000` | `--color-shadow-black` | semantic | Appears in measured image-overlay gradients for caption legibility, not as a defining page surface. |
| Signal Lemon | `#ffff48` | `--color-signal-lemon` | accent | Small high-visibility action fill, notably the newsletter Subscribe button and program calls to action. |

### Semantic aliases

`--color-canvas` → `#262d29` (Forest Ink) · `--color-surface` → `#f7f6e3` (Linen Cream) · `--color-text` → `#f7f6e3` (Linen Cream) · `--color-text-muted` → `#262d29` (Forest Ink) · `--color-border` → `#262d29` (Forest Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f7f6e3` | `#262d29` | 12.92:1 | AAA |
| `#262d29` | `#f7f6e3` | 12.92:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 54%, rgb(0, 0, 0))`
- `linear-gradient(rgb(193, 209, 223), rgba(193, 209, 223, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Prody | `--font-display` | webfont | 400 | Display lettering and prominent hero messaging. | DM Serif Display |
| Suisseintl | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, section headings, card copy, and testimonial text. | Inter |
| Suisseintl Book | `--font-suisseintl-book` | webfont | 400 | Captions, small labels, and compact button and form text. | Inter |

- **Prody:** Use regular weight with an editorial, serif-like character; keep display lines centered and uncluttered.
- **Suisseintl:** Measured regular, medium, and semibold weights; mostly sentence case with compact, readable line spacing.
- **Suisseintl Book:** Book-like regular weight for restrained supporting text; avoid heavy emphasis or all-caps except short labels.

### Type scale — Golden Ratio (ratio ≈ 1.631, base 18.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 131px | 400 | 1 | 0 | — | Prody | Oversized expressive lettering, including the large Airtree footer wordmark. |
| h1 | 42px | 400 | 1.15 | 0 | — | Prody | Primary hero statement about backing founders. |
| h2 | 33px | 400 | 1.15 | 0 | — | Suisseintl | Major section titles and prominent testimonial copy. |
| h3 | 28px | 400 | 1.15 | 0 | — | Suisseintl Book | Supporting feature and program titles. |
| body | 18.5px | 400 | 1.15 | 0 | — | Suisseintl | Introductory descriptions, explanatory copy, and card text. |
| caption | 13px | 400 | 1 | 0 | — | Suisseintl Book | Image captions, dates, and compact supporting labels. |
| nav | 14px | 400 | 1 | 0 | — | Suisseintl | Header navigation links and small menu labels. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 8, 9, 12, 15, 19, 28, 37, 75 px.
- Section rhythm 37px · element gap 9px · card padding — · max content width 1384px.

Use a broad centered canvas with a measured maximum width of 1384px and a compact overall density softened by generous section breathing room. The header distributes the wordmark, two slim navigation lists, and an outlined contact action. Content alternates between full-width bands and multi-column groupings: gallery and testimonial carousels, a logo strip, three prominent metrics, resource cards, and paired program cards. Keep section boundaries understated with hairlines and align text consistently within each block.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `37px` · nav `50%` · link `19px` · xs `8px` · sm `19px` · md `37px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The measured system has no shadows, so keep most content flat against the warm canvas. Use fine dark borders for outlined controls and section dividers, and rounded clipping for photo cards. Create depth through image cropping, dark caption fades, and the contrast of the dark footer rather than stacked panels or drop shadows.

## Imagery

Prioritize candid event, founder, and community photography over polished product renders. Use large horizontal images in rounded cards, with compact white captions placed near the lower edge and a dark fade only where text needs contrast. The top carousel gives images room to dominate; program cards pair photography with short overlaid descriptions and clear actions. Decorative hero shapes are secondary accents, not substitutes for real photography.

## Components

### Header navigation

Place the Airtree wordmark at left, compact link lists near the center, and a small outlined Get in touch control at right.

### Hero and image carousel

Center a prominent editorial statement over a pale atmospheric background; follow it with wide rounded event photography and simple outlined arrow controls.

### Partner logo strip

Show partner-company marks in a quiet horizontal row on the light canvas, with ample surrounding whitespace.

### Metrics block

Introduce Airtree with a short explanatory line, a subtle horizontal rule, and three large typographic proof points.

### Resource cards

Present open-source guides as rounded photographic cards with lower-edge titles, dates, and restrained caption details.

### Program cards

Pair community photography with a short program name, concise audience description, and a small Signal Lemon action.

### Newsletter footer

Switch to Forest Ink for compact information columns, bordered email fields, a Signal Lemon Subscribe button, and oversized cream wordmark lettering.

### Measured component styles

- **Primary button** (“Subscribe”): background #ffff48 · text #262d29 · border 1px solid #f7f6e3 · radius 8.424px · padding 12.2px 15px · 400 12.87px Suisseintl Book
- **Secondary button** (“Guides & how-to’s”): transparent background · text #f7f6e3 · border 1px solid #f7f6e3 · radius 8.424px · padding 8.4px 12.2px · 400 12.87px Suisseintl Book
- **Link** (“GET IN TOUCH”): transparent background · text #f7f6e3 · radius 0px · padding 0px · 400 18.72px Suisseintl
- **Input**: transparent background · text #f7f6e3 · border 1px solid #f7f6e3 · radius 8.424px · padding 8.4px 12.2px · 400 12.87px Suisseintl Book
- **Card** (“CEO Summit”): background #262d29 · text #f7f6e3 · radius 37.44px · padding 0px · 400 18.72px Suisseintl
- **Navigation item** (“About Portfolio Programs Open Source VC ”): transparent background · text #262d29 · radius 0px · padding 0px · 400 18.72px Suisseintl

## Do

- Use Linen Cream as the dominant content canvas.
- Keep Forest Ink for text, navigation, rules, and the footer.
- Reserve Signal Lemon for small, unmistakable actions.
- Choose authentic founder and community photographs.
- Use rounded image cards with restrained caption overlays.
- Maintain generous pauses between distinct content sections.

## Don't

- Do not introduce extra interface colours beyond the measured palette.
- Do not make the yellow accent a large page background.
- Do not add drop shadows to cards or buttons.
- Do not crowd the hero with dense navigation or copy.
- Do not replace community photography with generic product mockups.
- Do not make every section a bordered or elevated panel.

## Agent prompt

Build a new Airtree-style page with a spacious, warm editorial feel. Use Linen Cream (#f7f6e3) as the primary canvas and Forest Ink (#262d29) for typography, navigation, hairlines, and any dark closing band. Keep Signal Lemon (#ffff48) for compact calls to action; treat Shadow Black (#000000) only as a subtle image-caption gradient. Set display messages in an expressive editorial face and use a clean Suisseintl-like sans serif for navigation, body, and labels. Organize content into clear, broad sections with restrained dividers, large candid founder or community photographs, rounded image cards, and compact captions. Use simple outlined controls, flat surfaces without shadows, and generous visual pauses. Make the page feel human and grounded rather than like a generic financial-services dashboard.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale two-column hero composition with compact header navigation and a centered statement. | Top-level navigation, Contact shortcut, Centered brand message | Wordmark, Outlined contact button, Atmospheric background |
| 2 | gallery | Wide, multi-column horizontal photo carousel with rounded event imagery. | Previous and next controls, Image carousel | Rounded photo cards, Small image captions, Outlined arrow buttons |
| 3 | logo-cloud | Horizontal strip of partner marks across a quiet light canvas. | Partner recognition | Logo row, Minimal framing |
| 4 | other | Sparse single-column interstitial with one small decorative graphic. | Scroll transition | Open whitespace, Simple line illustration |
| 5 | stats | Introductory statement above three horizontally arranged metrics. | Trust-building statistics, About link | Thin divider, Large numerals, Compact labels |
| 6 | content-feed | Section heading and brief description above a multi-column resource-card feed. | See more link, Guide discovery | Rounded image cards, Overlay captions, Small date labels |
| 7 | feature-grid | Two-column program grid with large community photography. | Program discovery, Join-program calls to action | Photo-led cards, Text overlays, Yellow action buttons |
| 8 | testimonials | Centered testimonial with generous vertical space and carousel controls. | Founder endorsement, Previous and next controls | Large quote, Small attribution, Outlined arrow buttons |
| 9 | footer | Full-width dark band with compact information columns and a large wordmark below. | Email subscription, Footer navigation | Bordered input, Yellow subscribe button, Oversized wordmark |

## Source CSS custom properties (selected)

```css
--color--green: #262d29;
--border-radius--small: .45rem;
--border-radius--regular: 1rem;
--color--beige: #f7f6e3;
--border-radius--big: 2rem;
--color--orange: #fb5e00;
--_frontier---font-body: Suisseintl, sans-serif;
--_frontier---font-display: Prody, sans-serif;
--_frontier---radius-button: 999px;
--_frontier---radius-card: 10px;
--border-radius--tiny: .25rem;
--bg-color: #F7F6E3;
--text-color: #262D29;
--accent-color: #FB5E00;
--default-grid-gap: 0.5rem;
--default-row-gap: 0.5rem;
--default-column-gap: 0.5rem;
--spacing-scale: 1;
```

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