---
name: Gitpod
description: "This site is a strong example of how to combine editorial serif typography with a technical SaaS aesthetic to create a premium, trustworthy feel."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#0A0E19"
  secondary: "#636363"
  tertiary: "#397554"
  neutral: "#818181"
  bg-soft: "#F9F9F9"
  bg-quiet: "#E1E1E1"
  line: "rgba(10,14,25,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: neo-grotesque-sans
    fontSize: 18px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: neo-grotesque-sans
    fontSize: 12px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  pill: 33554440px

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

---

## Overview

The platform for background agents.

*An enterprise-grade orchestration platform for autonomous AI software agents.*

## Colors

High-contrast monochrome base with subtle gray tiers, using a dark green accent for key links.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#0A0E19`)** — uses `ink` token
- **Secondary text (`#636363`)** — uses `ink-soft` token
- **Accent (`#397554`)** — uses `accent` token
- **Muted (`#818181`)** — uses `muted` token
- **Borders (`rgba(10,14,25,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** neo-grotesque-sans
- **Mono:** monospace

- Use transitional serif for large display typography to convey editorial authority.
- Use neo-grotesque sans for all UI elements and body copy for maximum readability.
- Maintain tight letter spacing for large display text to create a cohesive block.

## Layout

Centered content with generous whitespace and a fixed top navigation bar.

*Rhythm:* 8px grid

## Elevation & Depth

- 0px 0px 120px 0px rgba(0,0,0,0.07)
- 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)
- Borders: 1px solid rgba(10,14,25,1.0)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 12px
- `pill`: 33554440px

## Components

- **button:** Dark solid fill with white text or white fill with dark border and text.
- **card:** Clean containers with subtle borders and 8px radius.
- **chip:** Small rounded containers for tags or status indicators.
- **input:** Standardized text fields with clear focus states.
- **hero:** Large editorial-style serif headline paired with sans-serif subtext.

## Do's and Don'ts

**Don't:**
- Don't use neon or high-chroma accent colors — screenshot shows a muted dark green accent.
- Don't use overly decorative sans-serif fonts — screenshot shows a transitional serif for display and a clean neo-grotesque for body.
- Don't use heavy drop shadows — screenshot shows minimal, large-radius box shadows or none at all.
- Don't use low contrast for primary text — screenshot shows a very dark (#0A0E19) ink against a white background.
- Don't use complex, busy background patterns — screenshot shows clean, solid color backgrounds.
- Don't use harsh, square corners — screenshot shows a consistent use of 8px to 12px border radius.

---

## System Prompt (paste into AI agent)

```
This is a high-end, enterprise-focused B2B SaaS platform for AI developer tools. It utilizes a clean, monochrome palette (white, light gray, dark gray, near-black) with a single muted dark green accent (#397554) for emphasis. Typography contrasts a large, authoritative transitional-serif for display headlines against a clean neo-grotesque-sans for all body and UI text. Key layout constraints: use generous whitespace, 12-column centered grids, and 8px-based border radius. Critical constraints: maintain high contrast between ink (#0A0E19) and background, avoid overly decorative fonts, use only the specified muted green for accent links, and ensure all interactive elements use a standard 0.2s cubic-bezier transition.
```