What is Windsurf's primary brand color?

Windsurf's brand voltage is a saturated mint aqua wired into the Surf Kit CSS as --sk-aqua, paired with a deep emerald --sk-aqua-shade for the text-on-mint contrast inside the Download CTA. The mint fills exactly one button above the fold and reappears as a thin underline on link hovers. A full secondary palette lives in the spec — dusk pink, sun-up chartreuse, sea blue, indigo purple — but on the marketing surface they appear only inside the holographic aurora gradient bands between sections. The mint is the single chromatic moment on every solid surface; everything else stays on warm sand cream or ink black.

What typeface does Windsurf use, and what should I use as a substitute?

Windsurf runs three families. Tomato Grotesk is a custom display sans used for the hero h1 at 72px / weight 400 and h2 stats at 80px / weight 400 — the modest weight is the whole point, signaling editorial confidence rather than the heavy SaaS shout. DM Sans (open source) carries body, paragraphs, and navigation at 14-18px / 400-500. DM Mono (open source) handles every eyebrow label, section kicker, and the Download CTA itself in uppercase at 14px / weight 500 with positive 0.7px tracking. The closest substitute for Tomato Grotesk is Geist Sans or Söhne; for DM Sans and DM Mono no substitute is needed since both are on Google Fonts.

Why does Windsurf use a cream sand canvas instead of pure white or dark?

The page floor is a warm sand cream wired into the Surf Kit CSS as --sk-sand, with a slightly cooler ivory variant as --sk-sand-100 used inside cards and the post-cookie modal. The choice is a deliberate inversion of the AI-IDE category convention — Cursor, Bolt, Replit, and JetBrains all open on dark surfaces or cool grays. Windsurf's warm-sand floor pulls the page into a beach reference that matches the surf metaphor, and it makes the mint aqua CTA glow against a contrast surface the eye reads as natural rather than digital. Pure white would feel sterile against the saturated mint; near-black would compete with the editor screenshots.

What is Windsurf's corner-radius philosophy?

The radius scale is a small-step ladder plus pill. 6px is the dominant tier (49 occurrences) used on most cards and surfaces, 8px appears on larger feature cards (37 occurrences), 2px is the smallest step used on dividers and inputs (8 occurrences), and a fully-rounded pill at 9999px is reserved for the primary Download CTA and circular avatar chips (12 occurrences). The Download CTA itself is interesting — the button background renders at 0px radius (a perfect rectangle, 64px tall) inside a wrapper that handles the visual rounding, a custom move you do not see in standard component libraries. The scale is tighter than Spline's 16px-default and softer than Vercel's 4-8px range.

Can I use this DESIGN.md to build my own AI-IDE marketing site?

Yes — feed the file to Claude, Cursor, or any tool that reads structured design tokens and it will reproduce Windsurf's specific moves: warm sand canvas instead of dark or pure white, mint aqua reserved for a single CTA, Tomato Grotesk display at modest weight 400, DM Mono uppercase eyebrows with positive tracking, and the holographic aurora gradient bands as a tactile reference rather than ambient decoration. Token references resolve cleanly — {colors.aqua} for the voltage, {colors.sand} for the canvas, {typography.display-xl} for the 72px hero. The one move worth borrowing only if you have a real metaphor: the aurora bands earn their place because the brand is named after a wave; lifting them onto a generic SaaS would read as decoration.

Windsurf Design System

Windsurf's marketing system uses a warm sand canvas, Tomato Grotesk display headlines at weight 400, DM Mono uppercase metadata, and a saturated mint-aqua CTA.

About Windsurf DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source windsurf.com

Developer Tools & IDEs
AI & LLM Platforms

Windsurf's post-rebrand marketing site does something rare in the AI-IDE category. Where Cursor, Replit, and Bolt all open on dark surfaces with cool blue accents, Windsurf paints its landing in a warm sand cream, sets a 72px Tomato Grotesk headline in near-black ink ("Built to Keep You in Flow State"), and reserves a saturated mint aqua for a single Download pill in the top nav. The headline weight is 400, not 700. The kicker above the next section reads "Introducing the flow evolution of chat" in violet uppercase DM Mono. Between sections, a holographic aurora gradient sweeps through magenta, chartreuse, and aqua — a literal surfboard-lacquer reference that other dev-tools brands would consider too playful to ship.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens drawn from the `--sk-*` (Surf Kit) custom-property family Codeium ships post-rebrand — a brand-voltage tier (mint aqua, deep emerald, surf indigo, sun-up chartreuse, dusk pink), a structural tier of warm sand canvas and ivory cards, ink black for text and an off-white inverse for buttons; 10 typography tokens running Tomato Grotesk in three display sizes plus DM Sans body and DM Mono eyebrow / button tiers; a 2px / 6px / 8px / pill radius scale; and 13 component definitions covering the mint Download pill, the deep-emerald CTA text, the cream cards, the eyebrow strip, and the IDE-mockup window chrome.

Feed this file to Claude or Cursor and it reproduces Windsurf's specific moves: warm sand canvas instead of cool gray or black, mint aqua as a single saturated voltage held back for one button, Tomato Grotesk display at modest weight 400, DM Mono uppercase metadata threaded through every eyebrow position, and the holographic aurora gradient as a literal section divider rather than a background tile. The one move worth borrowing only if your product has a real metaphor to ground it: the aurora bands work because Windsurf's name is itself a wave reference; lifting them onto a brand without that throughline would feel decorative rather than earned.

What makes it distinct

Warm sand canvasthe page floor sits on a cream sand rather than the cool grays or pure-black backgrounds that Cursor, Replit, and JetBrains use for IDE marketing
Mint aqua as single voltagethe Download CTA is filled with a saturated mint that comes straight from surfboard lacquer, paired with a deep emerald text color for contrast
Tomato Grotesk at weight 400the 72px hero hits a custom display sans at regular weight, not the heavy 700 most AI tools reach for
DM Mono as supporting voiceevery eyebrow label, section kicker, and the primary CTA itself runs in uppercase DM Mono with positive 0.7px tracking
Holographic aurora bandsthe inter-section dividers render a magenta-to-chartreuse-to-aqua gradient sweep, a tactile reference to the editor's own surf wave imagery

Live at windsurf.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

windsurf.com

Explore Windsurf

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Windsurf design system FAQ

Common questions about Windsurf's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Windsurf — official site

Windsurf's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.