Vercel Geist Minimal demo
Vercel Geist Minimal

A stark monochrome, Swiss-inspired minimal style with precise typography and subtle borders, popularized by Vercel for developer infrastructure and deployment platforms.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 14.0 KB · 1926 words
# SYSTEM PROMPT — CODING AGENT BUILD SPECIFICATION

**Project:** Complete Landing Page — "Vercel Geist Minimal" Theme
**Your Role:** Senior Frontend Engineer & Expert UI Designer. Deliver a complete, production-quality landing page on the first attempt. All user-facing copy must be written in **English** — real, specific copy for a fictional developer-infrastructure/deployment platform (invent a short brand name). No lorem ipsum.

---

## 0. THEME DEFINITION & DESIGN LANGUAGE (NON-NEGOTIABLE)

**Theme:** Vercel Geist Minimal — Extreme Minimalism, Shadow-as-Border, Geist Sans, Compressed Typography. Era: 2024–2026 Developer Infrastructure.

**Sections (in this exact order):** Sticky Header/Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (with email capture) → Footer with secondary link columns.

**Core techniques:**
* **Shadow-as-border:** `box-shadow: 0 0 0 1px rgba(0,0,0,0.08)` replaces ALL traditional borders. No `border:` declarations for component outlines anywhere in the stylesheet.
* **Multi-layer shadow stacks for cards:** border ring + contact elevation + ambient + inner highlight (exact stacks defined in §1.2).
* **Compressed typography:** Geist Sans with extreme negative letter-spacing on display type — `-2.4px` to `-2.88px` at `48px`, expressed as `-0.05em` to `-0.06em` so it scales with `clamp()`.
* **Ligatures:** `font-feature-settings: 'liga'` enabled globally on `body`.
* **Workflow accent colors:** Ship Red `#ff5b4f`, Preview Pink `#de1d8d`, Develop Blue `#0a72ef` — used only for icons, pill badges, and small UI accents. Never for body text.
* **Pill badges:** `border-radius: 9999px` with tinted accent backgrounds.
* **Radii:** `6px` buttons, `8px` cards, `9999px` badges.
* **Canvas:** Pure white `#ffffff` with `#171717` text. **Exception clause:** `#ffffff` is permitted here as an explicit theme requirement (the Vercel-style canvas), not as a default — do not substitute `#fefefe`.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden in all HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic. Changing the site's look must require editing only `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store all tokens in `:root`, overridden by the dark theme (§1.3). Required tokens:

```css
:root {
  /* Type */
  --font-base: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --tracking-display: -0.06em;   /* -2.88px @ 48px */
  --tracking-h2: -0.04em;        /* -2.4px @ 48px */
  --tracking-body: -0.011em;

  /* Light theme */
  --primary: #171717;
  --primary-hover: #333333;
  --secondary: #4d4d4d;
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #ebebeb;
  --text-primary: #171717;
  --text-secondary: #4d4d4d;
  --text-success: #0a72ef;              /* Develop Blue doubles as the theme's success/confirmation accent */
  --text-error: #cc3d33;               /* darkened Ship Red derivative — must meet 4.5:1 on white */
  --border-default: rgba(0, 0, 0, 0.08); /* consumed by the shadow-as-border ring */
  --border-error: rgba(204, 61, 51, 0.6);
  --border-success: rgba(10, 114, 239, 0.5);

  /* Workflow accents + tinted badge backgrounds */
  --accent-ship: #ff5b4f;      --accent-ship-tint: rgba(255, 91, 79, 0.08);
  --accent-preview: #de1d8d;   --accent-preview-tint: rgba(222, 29, 141, 0.08);
  --accent-develop: #0a72ef;   --accent-develop-tint: rgba(10, 114, 239, 0.08);

  /* Shadow-as-border + multi-layer stacks */
  --shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 0 0 1px rgba(0, 0, 0, 0.08),          /* border ring */
    0 1px 2px rgba(0, 0, 0, 0.04),          /* contact elevation */
    0 8px 24px rgba(0, 0, 0, 0.06),         /* ambient */
    inset 0 1px 0 rgba(255, 255, 255, 0.8); /* inner highlight */
  --shadow-md-hover:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 16px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Radius / spacing / motion / stacking */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px;
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;
}
```

* **Contrast Pairing:** Every light background token pairs with a dark text token and vice versa — enforced in BOTH themes. Verify ≥4.5:1 for body text, ≥3:1 for large text/UI in each mode. If a workflow color fails contrast as small text, use a darkened derivative for text (e.g., Ship Red → `#cc3d33`, Preview Pink → `#b01570`, Develop Blue → `#0859b8`) while keeping the pure hue for icons and tints.
* **Dark token overrides (§1.3):** `--bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --text-primary: #fafafa; --text-secondary: #a1a1a1; --primary: #fafafa; --primary-hover: #e0e0e0; --text-success: #4d94ff; --text-error: #ff7a70;` and **the shadow-as-border ring must flip to white-based:** `--shadow-border: 0 0 0 1px rgba(255,255,255,0.12)` with matching dark-mode `--shadow-md` stacks (white ring, `inset 0 1px 0 rgba(255,255,255,0.06)` highlight). Tints deepen to `rgba(..., 0.15)`.

### 1.3 Mandatory Dark Mode Support
* **Exception clause:** The source theme spec marks dark mode as "not recommended" — this is overridden: dark mode is **mandatory** and must be fully implemented with the dark token set above.
* Implement tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`, so switching requires zero HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header (icon button using Material Symbols `light_mode` / `dark_mode`, swapped via CSS) with correct `aria-pressed` and `aria-label` state.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
* **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.
* **Mobile-first:** All rows convert to columns on small viewports; fluid `clamp()` type; a centered `max-width: 1080px` container; **zero horizontal scrolling** at any breakpoint.

### 1.5 Framework Default & Tailwind CSS Integration
* Use Tailwind CSS via CDN for **layout utilities only** (flex, grid, spacing, responsive breakpoints). The Tailwind CDN `<script>` is permitted as the single additional external script.
* All themed components are BEM classes in `style.css` (`.btn`, `.card`, `.input-group`) driven by the CSS variables above. Never mix conventions: Tailwind = layout primitives; BEM = components.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Fonts:** Load from Google Fonts — `Geist` (weights 400 body / 500 UI / 600 headings) and `Geist Mono` (terminal/numeral accents). Bind to `--font-base` / `--font-mono`. Apply `font-feature-settings: 'liga'` globally.
* **Icons:** Google Material Symbols (Outlined) only. **Inline SVGs and local icon files are forbidden.** Suggested icons: `rocket_launch`, `visibility`, `bolt`, `code`, `check`, `close`, `error`, `expand_more`, `arrow_forward`, `light_mode`, `dark_mode`, `progress_activity`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.btn--loading`, `.btn--disabled`)
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, `border-radius: var(--radius-sm)`, Geist 500.
* **Primary:** bg `--primary`, text `--bg-primary` (inverts in dark mode). **Secondary:** transparent bg + `--shadow-border` ring, text `--text-primary`.
* **Hover:** brightness/shadow shift with `cursor: pointer` (primary shifts to `--primary-hover`; secondary gains `--bg-secondary` fill).
* **Focus:** Distinct double-ring via `box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-develop)` for keyboard navigation.
* **Active:** `transform: scale(0.97)`.
* **Loading:** `pointer-events: none`, `aria-busy="true"`, spinning `progress_activity` icon via CSS rotation — button dimensions must not change; double-clicks prevented.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form).
* **Danger:** bg `#cc3d33` with white text in light mode; bg `#ff5b4f` with `#171717` text in dark mode — visually distinct in both themes.

### 2.2 Cards (`.card`)
* **Default:** Flexbox layout, `border-radius: var(--radius-md)`, `--shadow-md` multi-layer stack, generous padding.
* **Hover:** `transform: translateY(-2px)` + transition to `--shadow-md-hover`.
* **Focus-within:** Ring highlight when a child link/button receives focus.
* **Loading (Skeleton):** Define `.card--skeleton` shimmer keyframe styles in CSS for reuse.
* **Empty State:** Define a fallback layout class with a Material Symbol icon and guidance text.

### 2.3 Forms & Inputs (`.input-group`)
* **Structure:** Flex container wrapping `<label>`, the input field, a status Material Symbol, and a dedicated error/success feedback element with `aria-live="polite"`.
* **States (via classes):** empty, focused (Develop Blue ring), filled, valid (`--border-success` ring + `check` icon), invalid (`--border-error` ring, `--text-error` message, `error` icon), disabled, read-only. Min-height 44px, `border-radius: var(--radius-sm)`, shadow-as-border ring instead of borders.
* Applied to the Final CTA email capture (§2.6), including a light-on-dark inverse variant for the dark CTA band.

### 2.4 Overlays / Modal Behavior
No modal is required; if any overlay is used (e.g., a mobile nav overlay), it must have: opening/open/closing states animated via CSS transitions, centered flex container (`align-items: center`), backdrop, Material Symbol `close` button, keyboard focus trapping, `Esc`/overlay-click closing, and `--z-modal` stacking.

### 2.5 FAQ Accordion (`.accordion`)
* Trigger is a `<button>` with `aria-expanded` and `aria-controls`; panel has `role="region"`.
* Pure-CSS height animation via `display: grid; grid-template-rows: 0fr → 1fr` with `overflow: hidden` content wrapper; `expand_more` icon rotates 180°.
* Fully keyboard operable; smooth `--transition-normal` animation.

### 2.6 Section-by-Section Build Specs
* **Header (sticky):** Text wordmark (Geist 600, tight tracking; a pure-CSS triangle mark is permitted), anchor links (Features, How It Works, Pricing, FAQ) with smooth scrolling, theme toggle (§1.3), compact primary CTA. Bottom hairline via shadow (`0 1px 0` ring color), never a border.
* **Hero:** Tinted pill badge (Develop Blue tint + `bolt` icon), display `<h1>` (Geist 600, `clamp()` up to ~56px, `--tracking-display`), subheadline in `--text-secondary`, primary + secondary CTAs, and a Geist Mono terminal-style card (dark `#171717` block on the white canvas, CSS traffic-light dots, `--shadow-md` stack) — CSS only, no images.
* **Features (bg `--bg-secondary`):** 3 cards per §2.2, each with a Material Symbol in a tinted pill (9999px) — Develop Blue (`bolt`), Preview Pink (`visibility`), Ship Red (`rocket_launch`) — plus title and description.
* **How It Works (bg `--bg-primary`):** 3 steps with Geist Mono numerals `01 / 02 / 03`, step titles, descriptions; flex row → column on mobile.
* **Testimonials (bg `--bg-secondary`):** 3 cards with quote, CSS-generated initials avatar (circle, `--bg-tertiary`, Geist 500), name + role.
* **Pricing (bg `--bg-primary`):** 3 tiers — Hobby (free), Pro (highlighted: "Most Popular" pill with Develop Blue tint, elevated `--shadow-md-hover` stack), Enterprise. Feature lists use `check` Material Symbols; per-tier CTAs (secondary / primary / secondary).
* **FAQ (bg `--bg-secondary`):** 5–6 real questions about deploys, previews, pricing, and support; accordion per §2.5; centered `max-width: 720px`.
* **Final CTA:** Inverted full-bleed band (bg `--primary` in light mode; `#111111` with white-based ring in dark mode; light text paired per contrast rules). Compressed headline + email capture form per §2.3 with simulated submit: loading → success state (check icon + inline confirmation in the `aria-live` region).
* **Footer:** Top hairline shadow, wordmark + one-line tagline, 4 link columns (Product, Company, Resources, Legal), copyright row. Links have hover and visible focus states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid `clamp()` sizing, Tailwind breakpoints, no horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, and smooth scrolling).
* **Accessibility:** AA contrast in both modes; never rely on color alone (pair icons + text for every state); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a skip-to-content link; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** `.btn--danger` remains distinct in both themes (§2.1).

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond the single `<script src="script.js" defer>` entry point (plus the Tailwind CDN reference).
* **Naming:** BEM only (`block__element--modifier`) for all components — never mix conventions.
* **script.js scope:** Theme toggle + persistence, FAQ accordion, email validation + simulated submit with loading/success states, smooth anchor scrolling. Nothing else.
* **Copy:** All user-facing copy in English, real and specific to the fictional platform. No lorem ipsum; no unrequested placeholders.