---
name: Gleap
description: "Excellent example of restrained, professional SaaS design that prioritizes clarity and readability over visual complexity."
version: alpha

colors:
  background: "#F6F6F3"
  primary: "#353535"
  secondary: "#292929"
  neutral: "rgba(53,53,53,0.5)"
  bg-soft: "#EDEDE8"
  bg-quiet: "#FFFFFF"
  muted-soft: "rgba(41,41,41,0.7)"
  line: "rgba(53,53,53,0.12)"

typography:
  display-lg:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.64px"
  display-sm:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.45px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 12px
  lg: 200px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 18px
  xl: 24px
  2xl: 32px
  3xl: 60px

---

## Overview

AI agents that automate support, feedback, and development tasks

*A professional, capable AI team member integrated into your workflow*

## Colors

Warm neutrals with high contrast for clarity

- **Background (`#F6F6F3`)** — uses `bg` token
- **Primary text (`#353535`)** — uses `ink` token
- **Secondary text (`#292929`)** — uses `ink-soft` token
- **Muted (`rgba(53,53,53,0.5)`)** — uses `muted` token
- **Borders (`rgba(53,53,53,0.12)`)** — uses `line` token

## Typography

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

- Use humanist sans-serif for all text
- Maintain tight letter-spacing on large display text
- Keep body text at 16px base for readability

## Layout

Centered single-column layout for content, wide grid for pricing cards

*Rhythm:* Consistent 4px base grid with generous vertical spacing

## Elevation & Depth

- 0px 18px 55px 0px rgba(16,24,40,0.12)
- 0px 1px 3px 0px rgba(0,0,0,0.15)
- 0px 0px 20px 0px rgba(0,0,0,0.1)
- Borders: 1px solid rgba(53,53,53,0.12)

## Shapes

- `sm`: 6px
- `md`: 12px
- `lg`: 200px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with dark backgrounds for primary actions, light backgrounds with dark borders for secondary
- **card:** Clean cards with subtle backgrounds (green tint for highlighted), no heavy borders
- **chip:** Small rounded badges for features and tags
- **input:** Simple text fields with minimal styling
- **hero:** Large centered headline with supporting text and prominent CTA buttons

## Do's and Don'ts

**Don't:**
- Don't use neon or saturated accent colors — screenshot shows muted, warm neutrals only
- Don't use serif fonts — screenshot shows consistent humanist sans-serif throughout
- Don't create heavy visual hierarchy with color — screenshot uses weight and size, not color
- Don't add decorative borders or heavy shadows — screenshot uses subtle borders and minimal shadows
- Don't use complex gradients — screenshot shows flat, warm background colors
- Don't overcrowd the layout — screenshot maintains generous whitespace and breathing room

---

## System Prompt (paste into AI agent)

```
Gleap.io is a SaaS platform offering AI-powered support and development tools. The design uses a warm, neutral palette with #F6F6F3 as the primary background, #353535 for primary text, and #EDEDE8 for subtle contrast. Typography is humanist sans-serif (Switzer) with tight letter-spacing on large display text (64px). Key elements: pill-shaped buttons with dark backgrounds for primary actions, generous 84px vertical padding, and a clean centered layout. Critical donts: never use neon colors, never use serif fonts, never overcrowd the layout with decorative elements. The design prioritizes clarity and professionalism over visual complexity.
```