# July Fund · Design system migration spec

> Source: https://july.fund  ·  Curated by OpenDesign  ·  en

> This site serves as a strong example of blending classic editorial typography with modern, clean digital card layouts.

## 1. Identity DNA

July Fund's design system is built like a modern, curated investment journal, where classic editorial typography meets clean digital card layouts. The identity draws from venture capital's authoritative yet accessible tone, balancing refined curation with the warmth of a well-edited publication.

**One-liner:** A refined, editorial-style venture capital fund website with large serif display typography and clean card-based layouts.
**Keywords:** venture capital · investing · editorial · refined · curation
**Analogy:** A modern, curated investment journal that blends classic editorial typography with clean digital card layouts.

## 2. Color

The color system is a study in restraint: a warm, muted neutral base provides the canvas, while a single vibrant green accent marks interactive elements and status badges. This deliberate limitation ensures the interface remains focused and uncluttered.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EEE7E5` | main background |
| `--bg-soft` | `#F0E7E4` | card background |
| `--ink` | `#433E3C` | body text |
| `--muted` | `#9A9390` | placeholder |
| `--accent` | `#56D270` | single accent |
| `--line` | `rgba(67, 62, 60, 0.1)` | divider |

**Color principle:** A warm, muted neutral palette with a single bright green accent for interactive elements and tags.

The palette's warmth is a deliberate rejection of the cool, clinical blues often found in financial interfaces.

## 3. Typography

The typographic voice is defined by a classic didone serif for primary display and a clean humanist sans for body copy, creating a hierarchy that feels both editorial and modern. The system reserves uppercase with wide tracking for small UI elements, maintaining legibility through generous line height for longer text.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Main logo and large article headlines |
| h2 | 36px | 1.1 | 400 | -0.5px | Card titles and section headers |
| body | 16px | 1.5 | 400 | 0px | Standard paragraph and descriptive text |
| small | 10px | 1.5 | 700 | 2px | Tags, badges, and dates |

**Type rules:**
- Use uppercase with wide letter-spacing for small UI elements and badges.
- Keep body text highly legible with generous line height.
- Reserve the large didone serif strictly for primary display text.

## 4. Spacing

Spacing follows a strict 4px base unit, creating a consistent rhythmic foundation across all card components and their internal padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 60 px
- **Rhythm:** A 4px base unit ensures consistent padding across all card components.

## 5. Surfaces

Depth is communicated not through shadows, but through background contrast and generous rounded corners on flat surfaces. The system explicitly avoids hard borders and heavy drop shadows.

- **Radius:** sm 8px · md 12px · lg 20px · pill 999px
- **Borders:** No visible hard borders on cards; depth is created through background contrast and generous rounded corners.

## 6. Layout

The layout skeleton is a responsive, multi-column masonry-like grid of rounded cards on desktop, which gracefully collapses to a single column on mobile viewports. The system relies on this card-based structure as its primary compositional unit.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A multi-column masonry-like grid of cards on desktop, stacking to a single column on mobile.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose. Smooth CSS transitions are applied to background-color, transform, and opacity properties for hover states and page reveals, avoiding complex or distracting animation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - CSS background-color and transform transitions on hover
  - Smooth opacity transitions for page reveals

- **Hover:** Background color transitions and subtle element shifts.
- **Click:** Standard cursor pointer interactions across interactive elements.
- **Transition:** Smooth transitions for background-color, transform, and opacity.
- **Keyboard:** Standard tab focusable elements with pointer cursor affordance.

## 8. Voice & Don'ts

The editorial voice is authoritative yet accessible, blending the gravitas of high-end finance with the clarity of modern tech. Headlines use large, classic serif wordmarks, while calls to action are understated, uppercase, and pill-shaped.

- **Tone:** Authoritative yet accessible, blending high-end finance with modern tech.
- **Headline style:** Large, classic serif wordmarks and lowercase news titles.
- **CTA style:** Understated, uppercase, pill-shaped buttons with thin borders.
- **Avoid:** Avoid cluttering the interface with multiple competing colors. / Avoid using modern sans-serifs for primary headlines. / Avoid harsh, square-edged corners on containers.

### Don'ts
- ❌ Don't use sharp square corners — screenshot shows generous 20px rounded corners on cards.
- ❌ Don't use all-caps for body text — screenshot shows all-caps reserved for small badges and dates.
- ❌ Don't use heavy drop shadows — screenshot shows flat surfaces defined by background color contrast.
- ❌ Don't use a cool, clinical blue palette — screenshot uses warm, earthy neutrals and a green accent.
- ❌ Don't use grotesque sans-serifs for display text — screenshot uses a classic didone-serif.
- ❌ Don't use high-contrast, multi-colored gradients — screenshot uses solid backgrounds and occasional soft image textures.

The system deliberately avoids sharp corners, heavy shadows, and modern sans-serifs for display text, cementing its refined, editorial character.

## System Prompt (paste into AI tool)

```
This design system represents a refined, editorial-style venture capital fund website. It centers around a warm, muted neutral palette (#EEE7E5 backgrounds, #433E3C ink) contrasted with a vibrant green accent (#56D270) for status badges and tags. Typography is dominated by a large, elegant didone-serif for display elements and a clean humanist-sans for body copy. The layout is built on a card-based grid with generous 20px rounded corners, relying on background color shifts rather than shadows for depth. Buttons are understated, pill-shaped, and uppercase. Critical donts: Do not use sharp corners, do not apply heavy drop shadows, and do not use modern sans-serifs for large display headlines.
```