---
name: Expo
description: "This site is a prime example of a clean, developer-focused SaaS interface that prioritizes clarity and utility over decoration."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C2024"
  secondary: "#60646C"
  tertiary: "#0090FF"
  neutral: "#80838D"
  bg-soft: "#F9F9FB"
  bg-quiet: "#F9F9FB"
  muted-soft: "#E0E1E6"
  line: "rgba(28,32,36,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1.6px"
  heading:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 600
    letterSpacing: "-0.25px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 8px
  lg: 32px
  pill: 9999px

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

---

## Overview

A full-stack React Native framework with cloud services for app development.

*The construction crew's trusted toolkit for building modern mobile applications.*

## Colors

High-contrast black and white with a subtle blue accent for active states.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C2024`)** — uses `ink` token
- **Secondary text (`#60646C`)** — uses `ink-soft` token
- **Accent (`#0090FF`)** — uses `accent` token
- **Muted (`#80838D`)** — uses `muted` token
- **Borders (`rgba(28,32,36,0.1)`)** — uses `line` token

## Typography

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

- Use Inter for all display and body text.
- Use JetBrains Mono for code snippets and technical labels.
- Keep line heights tight (1.0-1.4) for a dense, modern feel.

## Layout

Single-column centered layout for hero, transitioning to multi-column grids for features.

*Rhythm:* Consistent 4px base with generous whitespace in hero sections.

## Elevation & Depth

- 0px 5px 10px 0px rgba(0, 0, 0, 0.05)
- 0px 15px 25px 0px rgba(0, 0, 0, 0.12)
- Borders: 1px solid #E0E1E6

## Shapes

- `sm`: 8px
- `md`: 8px
- `lg`: 32px
- `pill`: 9999px

## Components

- **button:** Pill-shaped primary with black fill, pill-shaped secondary with outline.
- **card:** White background with subtle borders and soft rounded corners.
- **chip:** Subtle background fill with thin borders.
- **input:** Rounded rectangles with clear focus states.
- **hero:** Large centered text with a gradient or subtle background pattern.

## Do's and Don'ts

**Don't:**
- Don't use a dark background for the primary layout — screenshot shows a clean white theme.
- Don't use decorative serifs for headlines — screenshot shows a clean humanist sans.
- Don't use a wide variety of bright colors — screenshot relies on black, white, and a single blue accent.
- Don't use sharp, square corners on buttons — screenshot shows rounded or pill-shaped buttons.
- Don't overcrowd the hero section — screenshot maintains significant vertical whitespace.
- Don't use a complex or busy background pattern — screenshot uses a very subtle dot grid or light gradient.

---

## System Prompt (paste into AI agent)

```
Expo is a full-stack React Native framework for mobile developers, featuring a clean, professional interface. The design is anchored by a high-contrast black and white palette (#1C2024 on #FFFFFF) with a subtle blue accent (#0090FF). It uses Inter for body and display text and a monospace font for code. Critical design rules: maintain generous whitespace, use pill-shaped buttons, and avoid complex decorative elements. The voice is direct and developer-focused, with clear, bold headlines. This DNA represents a premium, tool-focused SaaS aesthetic.
```