---
version: alpha
name: Groq-Inspired-design-analysis
description: An inspired interpretation of Groq's design language — an inference-cloud brand built on a warm off-white canvas and one loud signal orange, with wide-tracked uppercase labels, outlined pill buttons and an industrial, spec-sheet tone.

colors:
  primary: "#f43e01"
  on-primary: "#f3f3ee"
  canvas: "#f3f3ee"
  canvas-orange: "#f43e01"
  ink: "#2d2f33"
  ink-warm: "#302b28"
  body: "#69695d"
  line: "#cecebf"

typography:
  display:
    fontFamily: esBuild, "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: -1.5px
  heading:
    fontFamily: esBuild, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: 500
    lineHeight: 36px
    letterSpacing: -0.5px
  body:
    fontFamily: esBuild, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  label:
    fontFamily: komuna, "Space Mono", "IBM Plex Mono", monospace
    fontSize: 16px
    fontWeight: 100
    lineHeight: 16px
    letterSpacing: 1.28px
    textTransform: uppercase

rounded:
  none: 0px
  pill: 1000px

spacing:
  xs: 8px
  sm: 10px
  md: 14px
  lg: 24px
  xl: 48px
  section: 96px

components:
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "10px 14px"
  button-solid:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "10px 14px"
---

# Design System Inspiration of Groq

## Overview

Groq sells speed — LPU inference "for fast inference", millions of developers and trillions of tokens a week — and the site looks like a piece of industrial equipment's spec sheet. Two colors do everything: a warm, slightly green off-white (`{colors.canvas}` `#f3f3ee`) and a hot signal orange (`{colors.primary}` `#f43e01`). On the measured homepage roughly 63% of painted area is the off-white canvas and 36% is a full-bleed orange field — the orange is not an accent, it is half the page.

Type pairs a neutral grotesk for headlines and body with a thin, wide-tracked uppercase face for labels, news tickers and buttons ("READ MORE>", "START BUILDING"). Lines are thin, corners are square except for pill buttons, and there is no shadow anywhere.

**Key Characteristics:**
- Two-color system: off-white + signal orange; orange used as whole sections, not just buttons.
- Uppercase, letter-spaced (`1.28px`) thin labels for navigation, news and CTAs.
- Outlined orange pill buttons (`1000px` radius, 1px border) as the main action style.
- Thin `#cecebf` rules as the only dividers; no shadows, no rounded cards.
- Big, confident numbers and short declarative headlines.

## Colors

- **Signal Orange** (`{colors.primary}` — `#f43e01`): Full-bleed bands, button borders and labels, link text, and highlight rules.
- **Canvas** (`{colors.canvas}` — `#f3f3ee`): The page background and the text color on orange bands.
- **Ink** (`{colors.ink}` — `#2d2f33`): Headlines and the news-ticker text.
- **Ink Warm** (`{colors.ink-warm}` — `#302b28`): Long-form body on light surfaces.
- **Body** (`{colors.body}` — `#69695d`): Secondary text and metadata.
- **Line** (`{colors.line}` — `#cecebf`): Every divider and outline on the canvas; also the most-used text color on orange (a pale sand that reads well on the hot field).

Do not introduce blues, purples or gradients. If a third color is needed for charts, use tints of the orange or of `{colors.body}`.

## Typography

### Font Family
1. **A neutral grotesk** (served as `esBuild`) for headlines and body. Substitute: *Neue Haas Grotesk*, *Inter Display* or *Helvetica Neue*.
2. **A thin, wide label face** (served as `komuna`) at weight 100, uppercase, `1.28px` tracking, for labels, buttons and tickers. Substitute: *Space Mono* or *IBM Plex Mono* at 300, or a light extended grotesk.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 64px | 500 | 64px | -1.5px | Hero claims and big metrics. |
| `{typography.heading}` | 32px | 500 | 36px | -0.5px | Section titles. |
| `{typography.body}` | 16px | 400 | 24px | 0 | Paragraphs. |
| `{typography.label}` | 16px | 100 | 16px | 1.28px | UPPERCASE labels, nav, news ticker, buttons. |

### Principles
- Labels are always uppercase and tracked; headlines never are.
- Line height of labels equals font size (16/16) — tight, technical.
- Arrows are typed as characters (`>`), not icons.

## Layout
- Full-bleed horizontal bands alternate off-white and orange.
- Content is left-aligned on a wide grid; the measured text column tops out around 730px.
- Thin horizontal rules split rows of news, stats and links, like a data table.
- Sections are tall and sparse — 96px+ vertical padding.

## Elevation & Depth
None. The system is flat: no shadows, no blur, no layered cards. Separation comes from color fields and 1px rules.

## Shapes
- `{rounded.pill}` 1000px — buttons only.
- `{rounded.none}` — everything else: bands, images, cards, inputs.

## Components

### Buttons
**`button-outline`** — transparent fill, 1px `{colors.primary}` border, orange uppercase label in `{typography.label}`, `{rounded.pill}`, padding `10px 14px`. The default CTA ("Start building").

**`button-solid`** — orange fill with off-white label, same shape; use once per view at most.

On orange bands, invert: off-white border and label.

### News Ticker
A single uppercase line in `{typography.label}` — "GROQ CLOSES $350 MILLION SERIES A…" — followed by an orange "READ MORE>" link, separated from the hero by a rule.

### Stat Rows
Large numbers in `{typography.display}` with uppercase labels underneath, divided by vertical or horizontal `{colors.line}` rules.

## Do's and Don'ts

### Do
- Use orange as large fields, not just small accents.
- Keep labels uppercase, thin and widely tracked.
- Use outlined pill buttons and square everything else.
- Separate content with thin rules.

### Don't
- Don't add shadows, gradients or rounded cards.
- Don't introduce a second accent color.
- Don't set headlines in uppercase or in the label face.
- Don't use pure white; the canvas is warm `#f3f3ee`.

## Responsive Behavior
- Bands stay full-bleed; headline size drops to about 40px on mobile.
- Stat rows stack vertically with rules between them.
- Buttons keep their pill shape and go full-width below 480px.

## Known Gaps
- The homepage plays an intro animation; headings were not in the DOM when measured, so display sizes are estimated from the visible layout.
- Font names are the site's internal names; substitutes are approximate.