CURATED · OPEN · FREE

Windsurf

Manage fleets of local and cloud agents from one surface.

01

Identity DNA

A command center for managing fleets of AI coding agents.

02

Color

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

03

Typography

geometric-sans · humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body-lg20px · 400
• body16px · 400
• caption13px · 400

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.

04

Spacing

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

05

Surfaces

1px solid rgba(0,0,0,0.1)

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

06

Layout

Full-width hero sections followed by contained content blocks.

07

Motion & Interaction

Subtle opacity and background-color transitions on hover states. · Smooth transitions for opening and closing menus or drawers.

Subtle background-color or opacity change for buttons and interactive elements. · Immediate visual feedback with a slight scale or opacity reduction.

08

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.

09

Voice & Don'ts

• Tone Professional, technical, and direct, focusing on efficiency and control.
• Headlines Large, bold, and concise, often using monospace for technical terms.
• CTAs Action-oriented and clear, such as 'Download for MacOS' or 'Try Devin'.

• 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.
• Avoid: Vague marketing jargon
• Avoid: Overly playful or casual language
• Avoid: Complicated sentences

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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