---
name: Sierra
description: "This site is an excellent example of how to balance a sophisticated, enterprise-focused AI product with a warm, human-centric visual language through the use of editorial photography and restrained ty"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#302E2D"
  secondary: "#716F6C"
  neutral: "#E4E0DC"
  bg-soft: "#F6F5F3"
  line: "rgba(228, 224, 220, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.3px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 44px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-0.44px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.38px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.42
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

A sophisticated AI agent platform that uses warm, editorial photography to make complex technology feel human and trustworthy.

*A premium consultancy for AI agents, balancing technical depth with approachable, human-centric storytelling.*

## Colors

Warm Neutrals: A palette grounded in warm grays and earthy tones, relying on high-quality photography for visual interest rather than synthetic accents.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#302E2D`)** — uses `ink` token
- **Secondary text (`#716F6C`)** — uses `ink-soft` token
- **Muted (`#E4E0DC`)** — uses `muted` token
- **Borders (`rgba(228, 224, 220, 1)`)** — uses `line` token

## Typography

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

- Use tight tracking (-1.3px to -0.38px) for large display text to create a refined, editorial feel.
- Maintain a strict 400 weight for almost all text; 500 is used very sparingly for specific emphasis.
- Ensure generous line-height (1.4-1.5) for body text to maintain readability.

## Layout

A centered, responsive layout with a max-width container, transitioning from a full-bleed editorial hero to a structured, multi-column UI for dashboards.

*Rhythm:* Generous and structured, using large padding (80px) for major sections and consistent 8/16/24px increments for internal spacing to create a clean, breathable layout.

## Elevation & Depth

- 0px 28px 34px 0px rgba(15, 79, 138, 0.15)
- 0px 75px 63px 0px rgba(15, 79, 138, 0.15)
- Borders: 1px solid rgb(228, 224, 220)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped (999px radius) with white background and dark ink text, or subtle outline for secondary actions.
- **card:** Clean containers with 16px border-radius and subtle 1px borders on soft backgrounds.
- **chip:** Minimal, often using just text with subtle background or border treatments.
- **input:** Clean fields with subtle borders, often accompanied by small icons and 4px/8px internal padding.
- **hero:** Full-viewport, photographic backgrounds with large, left-aligned display typography and a single, high-contrast pill CTA.

## Do's and Don'ts

**Don't:**
- Don't use vibrant synthetic accents — screenshot shows a palette grounded in warm grays and earthy photographic tones.
- Don't set large headlines with loose tracking — screenshot shows tight tracking (e.g., -1.3px) for a refined, editorial feel.
- Don't use heavy font weights for body copy — screenshot shows almost exclusive use of weight 400.
- Don't clutter the UI with heavy shadows or borders — screenshot shows subtle 1px borders and minimal shadow usage.
- Don't use sharp, geometric border-radius on buttons — screenshot shows fully rounded pill shapes (999px).
- Don't rely on color for primary emphasis in the UI — screenshot shows reliance on typography scale and spacing.

---

## System Prompt (paste into AI agent)

```
Sierra is a premium AI agent platform that positions itself through a human-centric, editorial lens. Its visual DNA is defined by a warm, neutral color palette (ink #302E2D, soft background #F6F5F3) that lets high-quality photography do the emotional heavy lifting. The typography is a refined grotesque-sans with tight tracking on large displays, creating a clean, sophisticated feel. The UI components are simple, using pill-shaped buttons and subtle borders. Critical donts: avoid synthetic accents, keep tracking tight for headlines, use light font weights for body text, and maintain generous, breathable spacing. The overall feel is trustworthy and professional, yet approachable.
```