---
name: Poe
description: "A prime example of a utility-first SaaS landing page that prioritizes clarity and function over expressive design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#0D0D0D"
  secondary: "#505157"
  tertiary: "#413FA9"
  neutral: "#808080"
  bg-soft: "#EAEEFA"
  bg-quiet: "#F5F5F5"
  line: "rgba(227, 227, 231, 1)"

typography:
  display:
    fontFamily: system-ui
    fontSize: 36px
    lineHeight: 1.16
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: system-ui
    fontSize: 16px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: system-ui
    fontSize: 14px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A clean, utility-focused gateway to interact with various AI models.

*A utility room for interacting with multiple AI models*

## Colors

High-contrast neutral background with a single subtle brand accent color for links.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#0D0D0D`)** — uses `ink` token
- **Secondary text (`#505157`)** — uses `ink-soft` token
- **Accent (`#413FA9`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(227, 227, 231, 1)`)** — uses `line` token

## Typography

- **Display:** system-ui
- **Body:** system-ui
- **Mono:** system-ui

## Layout

Centered single-column layout with a top scrolling marquee banner.

*Rhythm:* Standard 4px base grid with consistent 16px and 32px section padding.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: 1px solid #E3E3E7

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Full-width outlined pill buttons with centered text.
- **card:** Top scrolling banner cards with rounded corners.
- **input:** Full-width single-line text input with rounded corners.
- **hero:** Centered text block with logo, descriptive paragraph, and CTA buttons.

## Do's and Don'ts

**Don't:**
- Don't use dark mode — screenshot shows a bright white background.
- Don't use decorative serif fonts — screenshot shows a clean sans-serif system font.
- Don't use complex background gradients — screenshot shows solid white and light gray surfaces.
- Don't use small, cramped spacing — screenshot shows generous vertical rhythm and padding.
- Don't use colorful primary buttons — screenshot shows outlined buttons with no fill color.
- Don't use heavy drop shadows — screenshot shows minimal or no shadow elevation on elements.

---

## System Prompt (paste into AI agent)

```
This is a clean, utility-focused AI aggregator landing page. Key colors are a white background (#FFFFFF), dark ink (#0D0D0D), and a subtle purple accent (#413FA9) for links. The typography relies on system-ui sans-serif fonts with a bold 36px headline. Critical donts: never use dark mode, never use decorative serif fonts, never add complex background gradients, never use small spacing, never use heavy drop shadows, and never use colorful primary buttons. The layout is strictly centered and single-column, emphasizing ease of access and functionality.
```