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

# July Fund · Design System

> Quietly confident editorial design for ambitious ideas

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

July Fund pairs a warm charcoal canvas with large cream editorial panels and expressive serif headlines. The unusually spacious page gives its investment thesis, selected research, and contact details a calm, considered presence.

## North star

Use expansive cream editorial panels against a warm charcoal field, and let typography and empty space carry the page.

## Overview

The visual system is built around a warm charcoal canvas (#433e3c) and broad cream panels (#f0e7e4), creating a soft, high-contrast frame rather than a conventional bright corporate page. The opening panel centers an oversized Portrait wordmark, with a compact green year marker and a restrained two-column introduction below. Portrait supplies the distinctive editorial display voice; Helvetica Neue keeps body copy, utility labels, and repeated outlined pill links direct and legible. The overall composition is sparse and deliberately tall, with large intervals between the introductory panel, a compact research feature, and the footer. Small media cards introduce darker surfaces and vivid gradients, but these are accents within content artwork, not the dominant page palette. Repeated thin outlines, rounded corners, and understated text colors preserve a quiet, confident tone without relying on shadows or decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Charcoal | `#433e3c` | `--color-warm-charcoal` | brand | Dominant page canvas and subdued text; frames the cream panels and long stretches of open space. |
| Soft Cream | `#f0e7e4` | `--color-soft-cream` | brand | Main hero and footer panel surface, plus light text and outlines for dark contexts. |
| Forest Ink | `#113619` | `--color-forest-ink` | semantic | Muted text color appearing in page text and footer details. |
| Powder Blue | `#bfd6f9` | `--color-powder-blue` | accent | Appears as a stop in a radial gradient within artwork, not as a page-wide interface color. |
| Marigold | `#f0cc6f` | `--color-marigold` | accent | Warm gradient stop and minor accent; not a primary surface. |
| Night Slate | `#131415` | `--color-night-slate` | surface | Dark radial-gradient artwork color, used inside visual content rather than the main canvas. |
| Midnight Blue | `#071b37` | `--color-midnight-blue` | surface | Deep blue gradient stop within artwork, not a general interface background. |
| Olive Shadow | `#2e2909` | `--color-olive-shadow` | semantic | Minor text and artwork color; keep it confined to the content where it appears. |
| Indigo Accent | `#322b66` | `--color-indigo-accent` | accent | Small accent in text and content artwork rather than a dominant control color. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Low-emphasis footer and supporting text. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Sparse border and text color on dark content surfaces and outlined links. |
| Graphite Panel | `#2a2b2f` | `--color-graphite-panel` | surface | Dark research card surface, contrasting with the warm cream hero panel. |
| Black | `#000000` | `--color-black` | neutral | Text on the cream card and rare dark card details. |
| Signal Green | `#56d270` | `--color-signal-green` | accent | Bright year marker and small footer accent; a pinpoint highlight against muted neutrals. |

### Semantic aliases

`--color-canvas` → `#433e3c` (Warm Charcoal) · `--color-surface` → `#f0e7e4` (Soft Cream) · `--color-surface-2` → `#2a2b2f` (Graphite Panel) · `--color-surface-3` → `#000000` (Black) · `--color-text` → `#f0e7e4` (Soft Cream) · `--color-text-muted` → `#433e3c` (Warm Charcoal) · `--color-text-subtle` → `#113619` (Forest Ink) · `--color-border` → `#ffffff` (Pure White) · `--color-accent` → `#322b66` (Indigo Accent) · `--color-accent-2` → `#f0cc6f` (Marigold) · `--color-accent-3` → `#56d270` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0e7e4` | `#433e3c` | 8.66:1 | AAA |
| `#f0e7e4` | `#2a2b2f` | 11.62:1 | AAA |
| `#f0e7e4` | `#000000` | 17.26:1 | AAA |
| `#433e3c` | `#f0e7e4` | 8.66:1 | AAA |
| `#433e3c` | `#2a2b2f` | 1.34:1 | fail |
| `#433e3c` | `#000000` | 1.99:1 | fail |
| `#113619` | `#433e3c` | 1.27:1 | fail |
| `#113619` | `#f0e7e4` | 11.02:1 | AAA |
| `#113619` | `#2a2b2f` | 1.05:1 | fail |
| `#113619` | `#000000` | 1.57:1 | fail |

### Gradients

- `radial-gradient(circle at 51.7532% 30.5238%, rgb(191, 214, 249) 0%, rgb(240, 204, 111) 100%)`
- `radial-gradient(circle at 34.1029% 38.3849%, rgb(19, 20, 21) 0%, rgb(7, 27, 55) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | webfont | 400, 700 | Body copy, utility text, labels, and compact repeated links | Inter |
| Portrait | `--font-display` | webfont | 400 | Large brand wordmark and editorial display headings | Cormorant Garamond |

- **Helvetica Neue:** Mostly regular weight; bold uppercase eyebrow and caption labels use visibly tracked lettering.
- **Portrait:** Regular-weight expressive serif; keep display text spacious and avoid uppercase transformation.

### Type scale — Major Third (ratio ≈ 1.278, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | normal | 0 | — | Portrait | Oversized editorial wordmark and primary page headline |
| h2 | 35px | 400 | normal | 0 | — | Portrait | Major editorial section headings |
| h3 | 34px | 400 | normal | 0 | — | Portrait | Research and news feature headlines |
| h4 | 30px | 400 | normal | 0 | — | Portrait | Smaller content headings and footer section labels |
| body | 15px | 400 | 1.15 | 0 | — | Helvetica Neue | Introductory copy, article excerpts, and supporting descriptions |
| caption | 10px | 700 | normal | 0.2em | uppercase | Helvetica Neue | Compact uppercase metadata and content labels |
| eyebrow | 10px | 700 | normal | 0.2em | uppercase | Helvetica Neue | Small uppercase markers such as the year badge |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 9, 16, 20, 22, 25, 30, 40, 45, 60 px.
- Section rhythm 100px · element gap 20px · card padding 80px · max content width 834px.

A single long page sits on a full-width charcoal canvas. The content uses a measured maximum width of 834px, with two-column alignment in the introductory panel and centered display typography. Large cream panels anchor the opening and footer, while a small research feature is isolated amid substantial vertical whitespace. The measured section rhythm is spacious, with a 100px section gap and 20px element gap; avoid compressing the page into a dense grid. Text alignment is primarily centered for headings, with supporting copy aligned as a separate column.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `12px` · xs `8px` · sm `12px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is largely flat, with no measured shadows. Cream panels are distinguished from the canvas by strong tonal contrast and rounded corners; the research feature uses a dark card surface. Outlined pill links rely on thin borders rather than filled button treatments, and artwork supplies the limited sense of layering.

## Imagery

Imagery is sparse relative to the page height. A compact research card includes layered, colorful rectangular artwork; the gradients and bright tones are contained within this illustration rather than spread across the interface. The measured page also includes images and video elsewhere in the long content, but the visible identity remains the cream-and-charcoal frame. Keep media contained and let generous surrounding space preserve focus.

## Components

### Intro panel

Large cream rounded panel on the charcoal canvas; centers the green year marker and oversized Portrait wordmark above a two-column About and thesis row.

### Year marker

Small bright-green rounded badge with compact bold uppercase numerals, used as a restrained focal accent.

### Editorial wordmark

Very large, regular-weight Portrait serif treatment centered in the opening panel.

### Outlined pill link

Uppercase bold Helvetica Neue label inside a transparent pill with a thin border; measured examples use cream, white, or charcoal text and borders.

### Research card

Dark content card with an uppercase category label, serif title, compact outlined action, and layered colorful artwork.

### Footer panel

Cream rounded panel against the charcoal page, organizing office addresses, local times, contact links, legal links, and a small year accent.

### Measured component styles

- **Primary button** (“READ MORE READ MORE”): transparent background · text #433e3c · border 1px solid #433e3c · radius 24px · padding 0px 22px · 700 10px Helvetica Neue · uppercase
- **Link** (“READ MORE READ MORE”): transparent background · text #433e3c · radius 0px · padding 0px · 400 16px Helvetica Neue
- **Card** (“2026 About We invest in people that we r”): background #f0e7e4 · text #000000 · radius 20px · padding 80px · 400 16px Helvetica Neue

## Do

- Keep the warm charcoal canvas dominant.
- Use broad cream panels for key editorial moments.
- Set display headings in a distinctive regular serif.
- Reserve bright green for small markers and accents.
- Use tracked uppercase labels for compact metadata.
- Give content generous vertical breathing room.

## Don't

- Do not turn the page into a dense dashboard.
- Do not use gradients as broad page backgrounds.
- Do not fill pill links with heavy button color.
- Do not add shadows where flat contrast is enough.
- Do not let illustrative colors redefine the palette.
- Do not replace editorial serif display type with generic sans.

## Agent prompt

Build a new editorial page in the July Fund visual style. Use Warm Charcoal (#433e3c) as the expansive canvas and Soft Cream (#f0e7e4) for large, rounded content panels. Set the main display voice in a regular, expressive serif similar to Portrait; use a clean Helvetica Neue-like sans for body copy, metadata, and controls. Keep the layout sparse and centered, with a measured content width near 834px, clear two-column text groupings where appropriate, and generous vertical pauses. Use Signal Green (#56d270) only for small markers. Render links as transparent outlined pills with compact uppercase labels. Keep dark cards restrained, and confine Powder Blue (#bfd6f9) and Marigold (#f0cc6f) to occasional artwork. Favor flat surfaces, fine borders, and deliberate typography over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-page flow on a charcoal canvas; cream intro and footer panels frame sparse editorial content. | editorial introduction, research and news links, contact and legal navigation | large cream panels, centered serif display, outlined pill links, dark research card |

## Source CSS custom properties (selected)

```css
--color-white: #ffffff;
--color-black: #000000;
--color-chocolate: #433e3c;
--color-cream: #F0E7E4;
--color-medium-gray: #888888;
--column-gap: 45px;
--column-mobile-gap: 20px;
```

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