---
name: Groq
description: "The site is worth including because it demonstrates a high-end, performance-focused B2B brand identity that balances industrial precision with accessible developer aesthetics."
version: alpha

colors:
  background: "#E8E8DE"
  primary: "#2D2F33"
  secondary: "#69695D"
  tertiary: "#F43E01"
  neutral: "#9C9C90"
  bg-soft: "#F3F3EE"
  bg-quiet: "#E8E8DE"
  line: "rgba(45, 47, 51, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "1.2px"

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

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

---

## Overview

Fast, reliable, low-cost AI inference infrastructure.

*A high-performance engine room for AI, combining industrial precision with accessible developer tooling.*

## Colors

Warm, muted neutrals provide a calm canvas for high-contrast orange accents and dark, legible typography.

- **Background (`#E8E8DE`)** — uses `bg` token
- **Primary text (`#2D2F33`)** — uses `ink` token
- **Secondary text (`#69695D`)** — uses `ink-soft` token
- **Accent (`#F43E01`)** — uses `accent` token
- **Muted (`#9C9C90`)** — uses `muted` token
- **Borders (`rgba(45, 47, 51, 1)`)** — uses `line` token

## Typography

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

- Headlines use a weight of 500 for subtle emphasis.
- Uppercase text uses 12px with 1.2px tracking for technical labels.
- Body copy uses 15px for optimal readability.

## Layout

Standard centered container with full-width hero blocks and side-by-side feature cards.

*Rhythm:* Standard 4px base with generous 32-48px horizontal padding and vertical gaps.

## Elevation & Depth

- Borders: 1px solid rgb(45, 47, 51) used for subtle card and input outlines.

## Shapes

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

## Components

- **button:** High-contrast orange (#F43E01) with white text, pill-shaped (border-radius: 999px) for primary actions.
- **card:** Light background (#F3F3EE) with 12px border-radius and no visible drop shadow.
- **chip:** Inline uppercase labels with monospace styling for category tags.
- **input:** Standard text input with minimal styling, likely using muted borders.
- **hero:** Split-screen layout on desktop with large typography on the left and video on the right.

## Do's and Don'ts

**Don't:**
- Don't use pure black (#000000) for backgrounds — screenshot shows a warm, muted beige (#E8E8DE) instead.
- Don't use bright reds for accents — screenshot shows a specific vibrant orange (#F43E01) instead.
- Don't use wide, multi-column text layouts — screenshot shows a constrained ~680px paragraph width instead.
- Don't use heavy drop shadows on cards — screenshot shows flat surfaces with minimal or no shadow instead.
- Don't use lowercase for technical labels — screenshot shows uppercase with wide letter-spacing instead.
- Don't use aggressive, dark mode aesthetics — screenshot shows a light, warm-toned interface instead.

---

## System Prompt (paste into AI agent)

```
Groq is a high-performance AI inference platform targeting developers and enterprises. The design system relies on a warm, muted neutral palette (#E8E8DE, #F3F3EE) with a high-contrast vibrant orange (#F43E01) accent. Typography uses geometric-sans (Space Grotesk) for headings and body, and monospace (IBM Plex Mono) for technical labels. Critical design constraints: avoid pure black backgrounds (use the warm beige instead), avoid heavy drop shadows on UI elements, and never use lowercase for technical kicker text or labels. The layout is clean and spacious, prioritizing legibility and performance over decorative complexity.
```