---
name: Webflow
description: "A perfect example of a modern, clean SaaS aesthetic that balances professional restraint with confident, growth-oriented messaging."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#080808"
  secondary: "#5A5A5A"
  tertiary: "#146EF5"
  neutral: "#D8D8D8"
  bg-soft: "#F0F0F0"
  line: "rgba(8,8,8,0.08)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.8px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.16px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.16px"

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

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

---

## Overview

Webflow empowers teams to build, manage, and optimize websites through a visual, code-generating platform.

*A clean, professional cockpit for building the modern web*

## Colors

High-contrast monochrome base with a single, energetic blue accent for action

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#080808`)** — uses `ink` token
- **Secondary text (`#5A5A5A`)** — uses `ink-soft` token
- **Accent (`#146EF5`)** — uses `accent` token
- **Muted (`#D8D8D8`)** — uses `muted` token
- **Borders (`rgba(8,8,8,0.08)`)** — uses `line` token

## Typography

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

- Use tight negative letter-spacing for large headlines
- Maintain a strict typographic hierarchy with clear weight differences
- Ensure generous line-height for body text readability

## Layout

Centered single-column hero transitioning to a multi-column card grid

*Rhythm:* 8px base grid with consistent padding multiples

## Elevation & Depth

- rgba(0,0,0,0.09) 0px 3px 7px 0px
- rgba(0,0,0,0.26) 0px 24px 24px 0px
- rgba(0,0,0,0.12) 0px 4px 9px 0px
- Borders: 1px solid rgba(8,8,8,0.08) for subtle card divisions

## Shapes

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

## Components

- **button:** High-contrast solid blue pill for primary actions, outlined for secondary
- **card:** Light grey background with subtle radius and soft shadow
- **chip:** Small rounded badges with specific colors for status or labels
- **input:** Clean bordered fields with standard padding and rounded corners
- **hero:** Large-scale headline over descriptive subtitle, centered above content cards

## Do's and Don'ts

**Don't:**
- Don't use vibrant secondary colors — screenshot shows a strict blue-and-monochrome palette.
- Don't use decorative serifs — screenshot shows a clean, modern humanist sans-serif for all text.
- Don't apply heavy, dark drop shadows — screenshot shows very subtle, soft elevation.
- Don't clutter the interface with dense layouts — screenshot shows generous whitespace and clear hierarchy.
- Don't use overly rounded pill shapes everywhere — screenshot limits them to primary action buttons.
- Don't use all-caps for body text — screenshot reserves it for specific, small labels or badges.

---

## System Prompt (paste into AI agent)

```
Position Webflow as a professional, enterprise-grade SaaS platform for visual web development. Use a clean, high-contrast palette with #080808 ink, #FFFFFF bg, and #146EF5 accent. Typography is a modern humanist-sans with a tight display scale. Critical donts: avoid decorative serifs, never use secondary vibrant colors, and don't create cluttered layouts. Focus on structured grids and subtle elevation to maintain a refined, trustworthy, and productive aesthetic.
```