---
name: Informed
description: "This site is a great example of a modern, clean SaaS aesthetic, using a single bold accent color and tight typography to create a focused and professional feel."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#31343B"
  tertiary: "#08C474"
  neutral: "#7E838F"
  bg-soft: "#F8F8F7"
  line: "rgba(0, 0, 0, 0.08)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 69px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-4.33px"
  display-sm:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 43px
  pill: 100px

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

---

## Overview

An AI content pilot that automates content production for editorial, PR, and marketing teams.

*A friendly yet efficient AI content intern that handles the heavy lifting.*

## Colors

A clean, white-based palette driven by a vibrant, high-chroma green accent for emphasis and action.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#31343B`)** — uses `ink-soft` token
- **Accent (`#08C474`)** — uses `accent` token
- **Muted (`#7E838F`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.08)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

## Layout

Single-column centered layout with generous whitespace and distinct full-width background sections.

*Rhythm:* Generous vertical padding separates distinct content blocks, centered on a single column.

## Elevation & Depth

- 0px 8.67px 26px 0px rgba(0, 0, 0, 0.08)
- 0px 26px 52px 0px rgba(0, 0, 0, 0.08)
- Borders: 1px solid rgb(0, 0, 0)

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 43px
- `pill`: 100px

## Components

- **button:** Pill-shaped solid buttons with white text on a vibrant green background, featuring soft drop shadows.
- **card:** Rounded containers with subtle shadows, sometimes featuring a prominent 4px solid green border to indicate selection.
- **chip:** Pill-shaped tags with solid green backgrounds and white text, used for categorization.
- **input:** Simple bordered text fields (implied by standard UI conventions).
- **hero:** Large, tightly tracked headline centered over a subheadline and a prominent call-to-action button.

## Do's and Don'ts

**Don't:**
- Don't use serif typography — the screenshot exclusively employs clean humanist-sans-serif fonts for all text elements.
- Don't use a dark mode or dark backgrounds — the screenshot features a predominantly white and light gray background.
- Don't use a wide array of colors — the palette is strictly limited to white, black, gray, and a single vibrant green accent.
- Don't use sharp, 90-degree corners — the screenshot consistently applies large border-radius values (up to 43px) for a softer look.
- Don't use dense, multi-column layouts — the screenshot shows a strictly single-column, vertically stacked, centered layout.
- Don't use heavy drop shadows — the screenshot relies on very subtle, light drop-shadows for depth.

---

## System Prompt (paste into AI agent)

```
Design a clean, centered SaaS landing page for an AI content automation tool. The layout should be a single column with generous vertical whitespace. Use a predominantly white background (#FFFFFF) with a secondary light gray (#F8F8F7) for subtle surface differentiation. The primary accent color is a vibrant, high-chroma green (#08C474), used for call-to-action buttons, interactive tags, and selected card borders. Typography should be humanist-sans-serif for both display and body text, with display headlines being very large (69px) and tightly letter-spaced (-4.33px). Body text should be a dark gray (#31343B) or black (#000000), with muted text in a medium gray (#7E838F). Buttons must be pill-shaped with white text on the green background, accompanied by subtle drop-shadows (e.g., 0px 8.67px 26px 0px rgba(0,0,0,0.08)). Avoid dark mode, avoid serif fonts, avoid sharp corners, and avoid using more than one or two primary colors.
```