---
name: Thesummerdrive
description: "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."
version: alpha

colors:
  background: "#FFF8F1"
  primary: "#006EFF"
  line: "rgba(0,110,255,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 77px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 62px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 38px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.75px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFF8F1`)** — uses `bg` token
- **Primary text (`#006EFF`)** — uses `ink` token
- **Borders (`rgba(0,110,255,1.0)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

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

## Elevation & Depth

- Borders: Thin solid blue lines act as horizontal dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```