# Thesummerdrive · Design system migration spec

> Source: https://www.thesummerdrive.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of how to create a high-impact, memorable event landing page using extreme typography and a strictly limited color palette.

## 1. Identity DNA

The system's identity is a direct translation of its core analogy: the formal elegance of a vintage event invitation fused with the clean, confident presentation of a modern portfolio showcase. This results in a playful yet corporate summer aesthetic, anchored by a single, vibrant blue against a warm cream base.

**One-liner:** A playful, high-contrast event landing page for a venture capital portfolio gathering.
**Keywords:** playful · exclusive · corporate · summer · vintage
**Analogy:** A vintage event invitation mixed with a modern startup portfolio showcase.

## 2. Color

The color system is radically focused, built upon a high-contrast dual-tone foundation. A warm cream background and a single vibrant blue create a clean, direct visual language for all typographic and interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF8F1` | main background |
| `--ink` | `#006EFF` | body text |
| `--line` | `rgba(0,110,255,1.0)` | divider |

**Color principle:** Dual-tone palette using a warm cream base and a vibrant blue for all interactive and typographic elements.

The principle is strict: a minimal, two-color palette ensures immediate recognition and a consistently high-contrast aesthetic.

## 3. Typography

The typographic voice is defined by extreme contrast and scale, using a grotesque sans-serif category exclusively. All uppercase text sets labels and headings, with massive display type featuring significant negative letter spacing for maximum impact.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 77px | 1.0 | 400 | -2px | Main Event Title |
| heading | 62px | 1.0 | 400 | -1.5px | Section Headers |
| subhead | 38px | 1.1 | 400 | -0.75px | Date and Time |
| body | 18px | 1.2 | 400 | 0px | Description |
| small | 16px | 1.5 | 400 | 0px | Schedule Details |

**Type rules:**
- All uppercase text is used for labels and primary headings.
- High contrast between the thick display font and the lighter body text.
- Significant negative letter spacing is applied to large display text.

## 4. Spacing

The rhythm is established through generous horizontal padding and strict vertical consistency, using large white space and consistent margins to center and structure the content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 144 px
- **Rhythm:** Generous horizontal padding (144px) centers content, with strict vertical rhythm defined by large white space and consistent margins.

## 5. Surfaces

Depth is implied not through shadows but through precise, horizontal division. Thin solid blue lines act as the primary structural dividers, maintaining a completely flat and clean design surface.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin solid blue lines act as horizontal dividers.

## 6. Layout

The structural skeleton is a centered, single-column layout with wide margins, creating a focused reading path. This core structure transitions to a split layout for specific detail sections like schedules or partner displays.

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

**Skeleton:** Single-column centered layout with wide margins, transitioning to a split layout for specific details.

## 7. Motion & Interaction

Motion philosophy is one of subtle precision, focusing on smooth, high-end UI transitions rather than complex animation. All changes, from hover states to interactive feedback, use consistent 0.2s to 0.3s ease-out timing for a polished feel.

- **Durations:** micro 200ms · small 300ms · medium 950ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth background-color and color transitions on hover.
  - Transform and opacity changes for interactive elements.

- **Hover:** Background-color and color transitions on buttons and links.
- **Click:** Scale or transform micro-interactions.
- **Transition:** Consistent 0.2s to 0.3s ease-out transitions for UI elements.
- **Keyboard:** Standard focusable elements for buttons and links.

## 8. Voice & Don'ts

The editorial voice is playful, exclusive, and informal yet corporate, communicated through large, uppercase, heavily kerned headlines and clear, direct calls to action. The system deliberately avoids dense paragraphs and complex visual noise.

- **Tone:** Playful, exclusive, and informal yet corporate.
- **Headline style:** Large, uppercase, heavily kerned display text.
- **CTA style:** Clear, pill-shaped outline buttons with direct action text.
- **Avoid:** Serif typography for body text / Dark backgrounds / Small, dense paragraphs

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a consistent use of grotesque sans-serif for all text.
- ❌ Don't use dark backgrounds — screenshot shows a warm, light cream (#FFF8F1) base.
- ❌ Don't use multiple accent colors — screenshot relies on a single blue (#006EFF) for all highlights.
- ❌ Don't use standard rectangular buttons — screenshot shows rounded, pill-shaped outline buttons.
- ❌ Don't use small hero text — screenshot shows massive, screen-filling display typography.
- ❌ Don't use drop shadows — screenshot features completely flat design with line-based dividers.

The system deliberately excludes serif typography, dark backgrounds, standard rectangular buttons, and drop shadows to preserve its clean, high-contrast identity.

## System Prompt (paste into AI tool)

```
This design is a playful, high-contrast event landing page for a venture capital portfolio gathering. It uses a minimal palette of a warm cream background (#FFF8F1) and a single vibrant blue (#006EFF) for all interactive elements and typography. The typography is entirely grotesque-sans, featuring massive, tight-kerned display text for headers and clean sans-serif for body copy. Critical constraints: avoid using serif fonts or dark backgrounds, never use multiple accent colors, and ensure buttons are always pill-shaped outlines rather than solid blocks. The layout is centered and spacious, relying on large white space and thin blue horizontal lines to structure content, avoiding dense grids or complex shadows.
```