---
name: xAI
description: "A strong example of a premium, developer-focused SaaS landing page that balances minimalism with powerful, large-scale typography."
version: alpha

colors:
  background: "#F9F8F6"
  primary: "#0A0A0A"
  secondary: "#0A0A0A80"
  tertiary: "#F97316"
  neutral: "#7D8187"
  bg-soft: "#FFFFFF"
  muted-soft: "#D7D1C9"
  line: "rgba(213, 217, 226, 1)"

typography:
  display:
    fontFamily: sans-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  headline-lg:
    fontFamily: sans-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  headline-sm:
    fontFamily: sans-serif
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: sans-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.11px"
  caption:
    fontFamily: sans-serif
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.12px"

rounded:
  sm: 6px
  md: 12px
  lg: 16px
  pill: 9999px

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

---

## Overview

A clean, premium interface for frontier AI developer tools.

*A sophisticated, minimal toolkit for building with advanced AI.*

## Colors

Warm, off-white canvas with deep charcoal ink and a single vibrant orange accent.

- **Background (`#F9F8F6`)** — uses `bg` token
- **Primary text (`#0A0A0A`)** — uses `ink` token
- **Secondary text (`#0A0A0A80`)** — uses `ink-soft` token
- **Accent (`#F97316`)** — uses `accent` token
- **Muted (`#7D8187`)** — uses `muted` token
- **Borders (`rgba(213, 217, 226, 1)`)** — uses `line` token

## Typography

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

- Display and headline fonts use tight negative letter-spacing
- Body text maintains a 1.5 line height for readability
- Monospace font is used strictly for code snippets and status indicators

## Layout

Centered single-column hero leading into multi-column feature and news grids.

*Rhythm:* Generous whitespace to emphasize clarity and hierarchy.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
- rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
- rgba(10, 10, 10, 0.15) 0px 0px 0px 1px
- Borders: 1px solid rgb(213, 217, 226)

## Shapes

- `sm`: 6px
- `md`: 12px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Pill-shaped and rectangular buttons; primary is solid black, secondary is outlined or ghost.
- **card:** Simple surfaces with subtle shadows, used for news items and mock UIs.
- **chip:** Small pill-shaped badges, like the 'New' indicator with orange text and border.
- **input:** Clean, unbordered or subtly bordered text fields used in mock interfaces.
- **hero:** A large, centered layout with a massive display font headline, brief subtitle, and dual CTAs.

## Do's and Don'ts

**Don't:**
- don't use vibrant or neon accent colors — screenshot shows a warm off-white background with a single orange accent
- don't use decorative or script fonts — screenshot shows clean sans-serif and monospace only
- don't use heavy drop shadows — screenshot shows very subtle, low-opacity shadows
- don't use a busy or cluttered layout — screenshot shows generous whitespace and clear hierarchy
- don't use a dark mode theme — screenshot shows a predominantly light, warm palette
- don't use rounded corners on every element — screenshot shows a mix of pill-shaped and sharp-edged components

---

## System Prompt (paste into AI agent)

```
This site is a premium, developer-focused AI platform characterized by a clean, minimal aesthetic and a warm, off-white color palette. The primary colors are a near-black ink (#0A0A0A) on a warm background (#F9F8F6), with a single vibrant orange accent (#F97316) for emphasis. Typography relies on clean sans-serif and monospace categories, with display text featuring tight letter-spacing. Critical constraints include avoiding dark mode, resisting the urge to over-decorate with unnecessary colors or shadows, and maintaining the generous whitespace that defines the layout. The voice is authoritative and precise, focusing on scale and capability.
```