---
name: Fireworks AI
description: "Excellent example of developer-focused SaaS design with premium typography and restrained color usage."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.6)"
  tertiary: "#6720ff"
  neutral: "#888888"
  muted-soft: "rgba(0,0,0,0.4)"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 128px
    lineHeight: 1.0
    fontWeight: 550
    letterSpacing: "-5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 550
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "1px"

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

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

---

## Overview

High-performance AI inference platform designed for developers to train and run models at scale.

*Industrial-grade cloud infrastructure for AI models*

## Colors

High-contrast monochrome base with vibrant purple accent for primary actions

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.6)`)** — uses `ink-soft` token
- **Accent (`#6720ff`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use uppercase for labels and navigation links
- Maintain tight tracking for display headlines
- Use system-ui fallback chain for body text

## Layout

Full-width hero with constrained content, two-column feature layout

*Rhythm:* Consistent 4px grid with generous section padding

## Elevation & Depth

- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

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

## Components

- **button:** Filled rectangular buttons with uppercase labels and directional arrows
- **card:** Minimal cards with subtle borders and clear typography hierarchy
- **chip:** None visible
- **input:** None visible in screenshots
- **hero:** Full-width section with large headline, subtext, and CTAs over a subtle gradient background

## Do's and Don'ts

**Don't:**
- Don't use decorative gradients — screenshot shows clean white background with purple accent
- Don't add excessive shadows — screenshot shows flat surfaces with no box shadows
- Don't use serif fonts — screenshot uses sans-serif throughout for display and body text
- Don't clutter the interface — screenshot shows generous whitespace and clear hierarchy
- Don't use multiple accent colors — screenshot uses single purple accent consistently
- Don't use lowercase navigation — screenshot shows all-caps labels and navigation items

---

## System Prompt (paste into AI agent)

```
Fireworks AI is a premium developer-focused AI inference platform with a clean, professional aesthetic. The design uses a stark white background with deep black text and a vibrant purple (#6720ff) accent for primary actions. Typography combines grotesque-sans for bold headlines (tight tracking, weight 550) with humanist-sans for readable body text. Navigation uses uppercase labels with generous spacing. Layout emphasizes whitespace and clear content hierarchy across full-width sections. Critical constraints: Never use decorative gradients or shadows, maintain monochrome base with single purple accent only, always use uppercase for labels and navigation, keep interface uncluttered with generous padding, use sans-serif fonts exclusively, ensure bold typography for impact without compromising readability.
```