---
name: Netlify
description: "This site is an excellent example of modern SaaS design, balancing a playful illustrative hero with a highly professional and functional developer-focused aesthetic."
version: alpha

colors:
  background: "#040B10"
  primary: "#FFFFFF"
  secondary: "#545A61"
  tertiary: "#32D3B0"
  neutral: "#89DDFF"
  bg-soft: "#E9EBED"
  bg-quiet: "#F7F7F9"
  line: "rgba(35,41,44,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-0.01em"

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

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

---

## Overview

A developer-centric platform for building and deploying modern web applications with speed and simplicity.

*A modern, professional workshop for web developers.*

## Colors

Dark mode primary with high-contrast teal accents for CTAs and developer-focused highlights.

- **Background (`#040B10`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#545A61`)** — uses `ink-soft` token
- **Accent (`#32D3B0`)** — uses `accent` token
- **Muted (`#89DDFF`)** — uses `muted` token
- **Borders (`rgba(35,41,44,1)`)** — uses `line` token

## Typography

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

## Layout

multi-column layout with dark hero and light content sections

*Rhythm:* consistent spacing based on a 4px grid

## Elevation & Depth

- 0px 16px 24px 0px rgba(0,0,0,0.07)
- 0px 6px 30px 0px rgba(0,0,0,0.06)
- Borders: 1px solid

## Shapes

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

## Components

- **button:** rounded pill shape with solid fill or outline
- **card:** simple border cards for features and testimonials
- **chip:** minimal tag design
- **input:** clean bordered text fields
- **hero:** large text headline with a dark background and playful line illustration

## Do's and Don'ts

**Don't:**
- don't use serif fonts — screenshot shows sans-serif for all text
- don't use muted or pastel color palettes — screenshot shows high-contrast teal and white on dark
- don't use sharp rectangular corners on buttons — screenshot shows fully rounded pill shapes
- don't use heavy drop shadows — screenshot shows subtle, soft shadows
- don't use complex gradients — screenshot shows mostly solid colors and simple linear gradients
- don't use tiny font sizes for primary headlines — screenshot shows large, bold display text

---

## System Prompt (paste into AI agent)

```
Netlify is a developer-focused SaaS platform for web deployment. The design features a dark mode primary interface with a deep blue-black background, complemented by a vibrant teal accent (#32D3B0) and clean white text. Typography uses a geometric sans-serif for display and a humanist sans-serif for body text, with a monospace font for code snippets. Key critical donts include avoiding serif fonts, avoiding muted pastel palettes, avoiding sharp button corners, avoiding heavy shadows, avoiding complex gradients, and avoiding small headline sizes. The layout is spacious, clean, and highly readable, designed to convey speed, reliability, and technical sophistication.
```