---
name: Windsurf
description: "A strong example of a modern, professional developer tool landing page that prioritizes clarity, readability, and a focused user journey."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#191919"
  secondary: "rgba(0,0,0,0.4)"
  tertiary: "#317CFF"
  neutral: "#A5A5A5"
  bg-soft: "#F8F8F8"
  muted-soft: "rgba(25,25,25,0.56)"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.96px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.16px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Manage fleets of local and cloud agents from one surface.

*A command center for managing fleets of AI coding agents.*

## Colors

Clean white canvas with high-contrast ink and a single vibrant blue accent for primary actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#191919`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.4)`)** — uses `ink-soft` token
- **Accent (`#317CFF`)** — uses `accent` token
- **Muted (`#A5A5A5`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use geometric sans for display and headings to convey modern technical precision.
- Use humanist sans for body text to maintain high readability.
- Use monospace for any technical terms, code snippets, or UI status indicators.
- Maintain tight tracking (-1.5px) for large display text to create a strong visual block.

## Layout

Full-width hero sections followed by contained content blocks.

*Rhythm:* Consistent vertical rhythm based on a 4px grid, with generous whitespace in hero sections.

## Elevation & Depth

- rgba(0,0,0,0.05) 0px 1px 2px 0px
- rgba(0,0,0,0.1) 0px 2px 6px -2px
- rgba(0,0,0,0.1) 0px 10px 15px -3px
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 999px

## Components

- **button:** Solid primary (blue bg, white text), secondary (white bg, black text, subtle border), ghost (text-only). All have slight border-radius.
- **card:** White background with subtle 1px border or soft shadow, containing structured data or testimonials.
- **chip:** Subtle gray background (rgba(0,0,0,0.06)) with 1px border, used for tags and filters.
- **input:** White background with 1px border, rounded corners, and clear placeholder text.
- **hero:** Large typography on a clean white background with a prominent CTA button.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing bright colors — screenshot shows a restrained palette of white, black, and a single blue accent.
- Don't use decorative serif fonts for display — screenshot shows a clean geometric sans for all headlines.
- Don't use heavy box shadows or 3D effects — screenshot shows subtle, soft shadows that are almost imperceptible.
- Don't use tight, cramped layouts — screenshot shows generous whitespace around all major content blocks.
- Don't use small, hard-to-read text for metadata — screenshot shows 13-16px text with clear line heights.
- Don't use rounded, pill-shaped containers for everything — screenshot shows mostly subtle 4-10px border radii.

---

## System Prompt (paste into AI agent)

```
The design is a clean, professional SaaS product page for a developer tool called Devin Desktop. It uses a minimalist white canvas with a single vibrant blue (#317CFF) accent for primary actions. Typography consists of geometric and humanist sans-serif fonts, with large, tight-tracked headlines for strong visual impact. Key design elements include generous whitespace, subtle 1px borders, and very soft shadows. Critical design constraints: avoid using multiple accent colors, never use decorative serifs, and maintain high contrast between ink and background for maximum readability. The tone is technical and efficient, targeting engineering teams.
```