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

# Drive Capital — The Summer Drive · Design System

> A bold blue, vintage-inspired invitation to gather.

**Theme:** light · **Industry:** other · **Source:** https://www.thesummerdrive.com/ · **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._

The Summer Drive turns a portfolio gathering into a playful event poster, pairing oversized blue typography with a vintage car illustration. A warm off-white canvas and a vivid blue schedule section carry the page from invitation to practical event details.

## North star

Build every section like a legible, oversized event poster, using warm cream, signal blue, expressive type, and generous breathing room.

## Overview

The page feels like a printed event poster expanded into a long-form web invitation. A warm cream canvas (#fff8f1) gives the saturated blue (#006eff) room to lead: it colours the oversized event title, supporting copy, fine rules, outlined ticket buttons, and the full-width schedule band. White (#ffffff) appears as a separate opening surface rather than a competing brand colour. The title pairs a very large, condensed-looking sans wordmark treatment with delicate editorial serif details for date, time, and section headings. Founders Grotesk handles functional and supporting text in uppercase. The hero is a carefully balanced poster composition: title above, event details at the sides, and a playful vintage convertible illustration in the center. Generous open space separates this from the centered welcome copy and small partner-logo row. The final saturated blue section reverses the palette for a large schedule heading and compact, ruled listings. Keep surfaces flat and use hairlines and pill outlines instead of shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Blue | `#006eff` | `--color-signal-blue` | brand | Dominant display and copy color, ticket-button outline, fine rules, and the full-width dunk-tank schedule band. |
| Warm Paper | `#fff8f1` | `--color-warm-paper` | surface | Main page canvas and the open background behind the hero, welcome copy, and partner marks. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Separate opening surface and occasional light detail; not the defining background across the page. |

### Semantic aliases

`--color-canvas` → `#fff8f1` (Warm Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#006eff` (Signal Blue) · `--color-text-muted` → `#fff8f1` (Warm Paper) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#006eff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#006eff` | `#fff8f1` | 4.27:1 | AA-large |
| `#006eff` | `#ffffff` | 4.49:1 | AA-large |
| `#fff8f1` | `#ffffff` | 1.05:1 | fail |
| `#006eff` | `#fff8f1` | 4.27:1 | AA-large |
| `#006eff` | `#ffffff` | 4.49:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 300, 400 | Primary sans for body copy, uppercase supporting text, compact schedule listings, and ticket buttons. | Space Grotesk |
| Editorial New | `--font-display` | webfont | 300, 100 | Display serif for event details and prominent editorial-style headings. | Bodoni Moda |

- **Founders Grotesk:** Use light to regular weights; uppercase is the norm, with restrained tracking and clean, compact line spacing.
- **Editorial New:** Use very light weights, uppercase forms, tight negative tracking, and an elegant contrast against the sans.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 100 | 1 | -0.02em | uppercase | Editorial New | Oversized uppercase event title and hero wordmark treatment. |
| h1 | 77.5px | 300 | 0.95 | -0.02em | uppercase | Editorial New | Large editorial uppercase welcome or section heading. |
| h2 | 62px | 300 | 1 | -0.02em | uppercase | Editorial New | Prominent secondary editorial heading, including the schedule title. |
| h3 | 38px | 300 | 1 | -0.02em | uppercase | Founders Grotesk | Uppercase section labels and larger supporting headings. |
| h4 | 28px | 300 | 0.95 | 0 | uppercase | Founders Grotesk | Small uppercase event-detail and supporting headings. |
| body | 18px | 400 | 1.2 | 0 | uppercase | Founders Grotesk | Uppercase event information, partner context, and schedule copy. |
| button | 28px | 300 | 0.95 | 0 | uppercase | Founders Grotesk | Large uppercase label inside outlined pill-shaped ticket controls. |

OpenType features in use: `"clig", "liga"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 7, 11, 14, 20, 29, 30, 35, 43, 144, 150 px.
- Section rhythm 35px · element gap — · card padding — · max content width 1380px.

A long, centered poster-like composition sits within a measured maximum width of 1380px. The hero uses a broad title, date and time at opposite sides, and a centered car illustration flanked by venue and ticket information. The next cream section shifts to centered welcome copy with a partner-logo row near its base. A full-width blue schedule band closes the page, splitting a large heading from dense listings. Generous vertical gaps keep the overall density comfortable.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-out` on interactive elements.

The page is predominantly flat, with no measured shadows or gradients. Thin blue rules divide or organize content, and the ticket controls use a blue outline with a pill silhouette rather than a filled surface. The schedule band creates the strongest visual layering through a solid color reversal, not depth effects.

## Imagery

The hero uses a single, playful flat illustration of a vintage convertible with a raised surfboard, not photography or realistic 3D. Keep it centrally framed and relatively small against the oversized lettering and open cream canvas. Partner logos are presented as a compact row of marks. Let illustration-specific colors remain within the artwork; the surrounding page identity stays anchored in blue and cream.

## Components

### Hero event masthead

Oversized uppercase blue event title paired with date and time details, followed by a thin horizontal rule and centered event descriptor.

### Ticket button

Uppercase blue label inside a transparent pill control with a 2px blue border and fully rounded ends.

### Illustrated event centerpiece

A vintage convertible illustration sits between venue information and the reserve-ticket callout.

### Event category strip

A slim row of event labels, separated from surrounding content by a horizontal rule.

### Welcome copy and partner row

Centered editorial heading and concise explanatory copy above a horizontal row of portfolio-company marks.

### Schedule band

Full-width Signal Blue section with a large display heading, compact lineup details, and fine horizontal dividers.

### Measured component styles

- **Primary button** (“TICKETS”): transparent background · text #006eff · border 2px solid #006eff · radius 60.0048px · padding 10.8px 43.2px 14.4px 43.2px · 300 27.9936px Founders Grotesk · uppercase

## Do

- Use Signal Blue (#006eff) as the primary text and accent color.
- Keep the main canvas warm with Warm Paper (#fff8f1).
- Pair expressive editorial display type with practical sans-serif copy.
- Make the hero feel like a composed event poster.
- Use generous open space between major content blocks.
- Prefer thin rules and outlined pill buttons for interface details.

## Don't

- Do not add gradients or decorative shadows.
- Do not replace the cream canvas with a dark theme.
- Do not make every section a card.
- Do not let supporting copy compete with the display title.
- Do not turn the car artwork into realistic photography.
- Do not use filled, square-cornered primary buttons.

## Agent prompt

Build a new event landing page in a poster-like Drive Capital style. Use Warm Paper (#fff8f1) as the main canvas and Signal Blue (#006eff) for prominent typography, rules, links, and outlined controls; reserve white (#ffffff) for a distinct light surface or small details. Pair an expressive, light editorial serif display face with a clean uppercase sans for functional copy. Compose a bold hero with the event title, side-positioned details, a central playful illustration, and pill-shaped outlined ticket actions. Follow with centered explanatory content and a compact partner-mark row, then finish with a saturated blue information section organized by fine rules. Keep the layout flat, airy, and comfortable, with strong type scale contrast and clear reading order. Avoid gradients, shadows, card-heavy layouts, and photography-led styling.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Poster-like hero with large title, side details, central car illustration, and ticket calls to action. | event details, ticket reservation | oversized uppercase title, outlined pill buttons, thin blue rule |
| 2 | other | Centered welcome heading and copy on cream, followed by a horizontal row of partner logos. | event introduction, partner recognition | editorial heading, centered copy, partner-logo row |
| 3 | other | Full-width blue band with a large schedule heading alongside compact, ruled lineup rows. | schedule lookup, lineup scanning | solid blue section, fine row dividers, light text contrast |

## Source CSS custom properties (selected)

```css
--accent: #006eff;
--font-primary: "Founders Grotesk",sans-serif;
--spacer-half: 1.736vw;
--spacer: 3.472vw;
--spacer-double: 6.944vw;
--spacer-half-negative: -1.736vw;
--spacer-negative: -3.472vw;
--spacer-double-negative: -6.944vw;
--radius: 10px;
--radius-s: 2px;
```

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