CURATED · OPEN · FREE

Thesummerdrive

A playful, high-contrast event landing page for a venture capital portfolio gathering.

EventEditorialCleanBold TypographyGeometric

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://www.thesummerdrive.com

📦 Browse pack contents →

Identity DNA

playfulexclusivecorporatesummervintage

A vintage event invitation mixed with a modern startup portfolio showcase.

Color

#006EFFInk

#FFF8F1BG

rgba(0,110,255,1.0)Line

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

Typography

grotesque-sans

display77px · 400
heading62px · 400
subhead38px · 400
body18px · 400
small16px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

144px

Generous horizontal padding (144px) centers content, with strict vertical rhythm defined by large white space and consistent margins.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Thin solid blue lines act as horizontal dividers.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

200msmicro

300mssmall

950msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Smooth background-color and color transitions on hover. · Transform and opacity changes for interactive elements.

Background-color and color transitions on buttons and links. · Scale or transform micro-interactions.

Components

button Large, pill-shaped outline buttons with blue borders and text, centered on mobile.
card Simple bordered sections containing schedule lists or partner logos.
hero Massive typography-driven hero featuring a central illustration of a vintage car.

Voice & Don'ts

Tone Playful, exclusive, and informal yet corporate.
Headlines Large, uppercase, heavily kerned display text.
CTAs Clear, pill-shaped outline buttons with direct action text.

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.
Avoid: Serif typography for body text
Avoid: Dark backgrounds
Avoid: Small, dense paragraphs

Inside the pack — real screenshots

Thesummerdrive — 桌面首屏（hero） — 桌面首屏（hero）

Thesummerdrive — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko