---
title: "Groq design system"
variant: extended
source: https://groq.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/groq-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Groq · Design System

> Quiet canvas, urgent orange, oversized type.

**Theme:** light · **Industry:** ai · **Source:** https://groq.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Groq’s homepage pairs a warm, near-white canvas with restrained orange accents and a long, text-led narrative about inference. A sparse header and fine rules give way to an unusually spacious hero, while the footer flips the narrative into oversized uppercase display typography.

## North star

Let warm whitespace and oversized editorial type carry the page; use Groq orange only for precise signals and actions.

## Overview

The page is defined by a warm off-white canvas (#f3f3ee), not by saturated blocks or product imagery. Muted gray-beige text and hairline borders keep the interface quiet; Groq orange (#f43e01) appears selectively in the logo, announcement link, small edge markers, and outlined pill CTA. The opening narrative sits in a narrow, left-aligned column with generous surrounding whitespace, making successive short statements feel like an editorial manifesto. Display typography changes the scale dramatically in the footer: dark, uppercase words span two broad columns and become the dominant graphic. The measured sans-serif esBuild handles the large headline and navigation details, while the lightweight serif komuna supplies uppercase body, eyebrow, and link text with airy tracking. Layout remains flat and spacious, with thin separators rather than cards, shadows, or stacked surfaces. Decorative orange marks provide small moments of motion and contrast without competing with the copy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f3f3ee` | `--color-warm-canvas` | surface | Page-wide background and the dominant field behind the narrative and footer. |
| Soft Stone | `#cecebf` | `--color-soft-stone` | neutral | Muted narrative text and thin horizontal rules separating header and footer areas. |
| Signal Orange | `#f43e01` | `--color-signal-orange` | accent | Logo, announcement link, outlined CTA, and small decorative marks. |
| Graphite Ink | `#2d2f33` | `--color-graphite-ink` | neutral | Primary dark text, most visible in the large uppercase footer display. |
| Olive Gray | `#69695d` | `--color-olive-gray` | neutral | Muted uppercase navigation and policy links, especially in the footer. |
| Brown Black | `#302b28` | `--color-brown-black` | neutral | Secondary navigation text; a measured dark tone with limited presence. |

### Semantic aliases

`--color-canvas` → `#f3f3ee` (Warm Canvas) · `--color-text` → `#2d2f33` (Graphite Ink) · `--color-text-muted` → `#cecebf` (Soft Stone) · `--color-text-subtle` → `#69695d` (Olive Gray) · `--color-border` → `#cecebf` (Soft Stone) · `--color-accent` → `#f43e01` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2f33` | `#f3f3ee` | 12.05:1 | AAA |
| `#cecebf` | `#f3f3ee` | 1.43:1 | fail |
| `#69695d` | `#f3f3ee` | 4.99:1 | AA |
| `#f43e01` | `#f3f3ee` | 3.41:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| esBuild | `--font-display` | webfont | 500 | Large display headline and selected navigation text. | Inter |
| komuna | `--font-body` | webfont | 100 | Uppercase body narrative, announcement, eyebrow, and text links. | Cormorant Garamond |

- **esBuild:** Measured at medium weight for display; use uppercase display styling and keep other navigation restrained.
- **komuna:** Very light measured weight, uppercase treatment, and airy positive tracking distinguish supporting copy.

### Type scale — Custom (ratio ≈ 2.91, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 135.5px | 500 | 0.95 | -0.01em | uppercase | esBuild | Oversized uppercase footer statement spanning two broad columns. |
| h1 | 50.5px | 500 | 1 | -0.03em | — | esBuild | Primary page heading when a conventional headline is needed. |
| body | 16px | 100 | 1.3 | 0.08em | uppercase | komuna | Uppercase editorial narrative and supporting text. |
| nav | 16px | 100 | 1 | 0.08em | uppercase | komuna | Uppercase utility and footer navigation links. |
| link | 16px | 100 | 1 | 0.08em | uppercase | komuna | Uppercase inline announcement and read-more links. |
| eyebrow | 16px | 100 | 1 | 0.08em | uppercase | komuna | Small uppercase section labels or introductory markers. |

OpenType features in use: `"ss09", "ss10", "ss14", "ss16"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 6, 8, 10, 14, 16, 24, 32, 40, 45, 54, 56, 68, 80, 90 px.
- Section rhythm 56px · element gap 40px · card padding — · max content width 1376px.

Use a spacious, single-column narrative within a wide page frame; the measured maximum width is 1376px. Keep the central story column narrow relative to the canvas and left-aligned, with substantial whitespace around it. The header and announcement sit in horizontal bands separated by hairlines. The footer changes to a broad, two-column typographic composition. Maintain a sparse density and generous section rhythm; avoid packing copy into cards or forcing a conventional grid onto the hero.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The interface is flat, with no measured shadows or elevated cards. Separate header, announcement, and footer with fine neutral hairlines instead of layered surfaces. The CTA is an outlined pill, not a filled button; maintain clear contrast through typography and borders rather than shadow, glow, or gradients.

## Imagery

The supplied views are primarily typographic rather than photographic: there is no prominent product photography, 3D render, or video in the visible story. Small orange geometric marks act as sparse decorative signals around the text. Keep them crisp, isolated, and secondary; do not introduce illustrative imagery that would compete with the narrative or warm neutral canvas.

## Components

### Top navigation

Sparse horizontal header with the orange Groq mark, understated navigation links, and a pill-shaped outlined START BUILDING action.

### Announcement strip

A thin, rule-bounded band with uppercase tracked announcement copy and a compact orange READ MORE link.

### Narrative hero

A left-aligned sequence of short statements on the warm canvas, surrounded by generous whitespace and occasional orange geometric marks.

### Outlined CTA

Uppercase komuna text in #f43e01 with a matching thin border and fully rounded pill silhouette; no fill or shadow.

### Footer display

A large dark uppercase two-column statement beneath a thin divider, with the logo and social links above and compact navigation below.

### Measured component styles

- **Primary button** (“START BUILDING”): transparent background · text #f43e01 · border 1px solid #f43e01 · radius 1000px · padding 10px 14px · 100 16.002px komuna · uppercase
- **Link** (“READ MORE >”): transparent background · text #f43e01 · radius 0px · padding 0px · 100 16.002px komuna · uppercase
- **Navigation item** (“TERMS AND POLICIES”): transparent background · text #69695d · radius 0px · padding 0px · 100 16.002px komuna · uppercase

## Do

- Use #f3f3ee as the dominant page canvas.
- Keep the narrative narrow, left-aligned, and surrounded by whitespace.
- Reserve #f43e01 for links, marks, the logo, and outlined actions.
- Use hairlines to separate horizontal page bands.
- Set supporting copy in airy uppercase typography.
- Let the footer display become the page’s strongest typographic moment.

## Don't

- Do not add gradients, shadows, or raised cards.
- Do not fill the page with orange or other saturated blocks.
- Do not center the hero narrative.
- Do not introduce prominent stock photography or product renders.
- Do not compress the announcement or footer navigation into dense controls.
- Do not make every text element equally dark or visually prominent.

## Agent prompt

Build a new Groq-style page on a warm, near-white #f3f3ee canvas. Treat whitespace and editorial text as the main visual material; use #cecebf for muted copy and hairline dividers, #2d2f33 for strong display text, and #69695d for subdued navigation. Keep #f43e01 reserved for the logo, links, small geometric signals, and thinly outlined pill CTAs. Use esBuild or a close sans-serif substitute for display typography, and a light, tracked serif-like face for uppercase supporting copy. Create a sparse horizontal header, a rule-separated announcement band, and a narrow left-aligned narrative with generous breathing room. Finish with a flat footer where oversized uppercase typography spans two broad columns. Avoid cards, shadows, gradients, and decorative imagery that competes with the copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header and announcement bands above a spacious, narrow, left-aligned text narrative on a full-width canvas. | primary navigation, announcement link, outlined CTA | thin horizontal rules, warm neutral canvas, orange geometric marks, tracked uppercase copy |
| 2 | footer | Three-part footer with a top logo and social row, oversized two-column display statement, and compact bottom navigation. | social links, policy links, footer navigation, CTA repetition | hairline top divider, oversized uppercase type, orange outlined pill, flat warm canvas |

## Source CSS custom properties (selected)

```css
--color-yellow: #f6ab45;
--color-green: #39c5c0;
--color-grey: #d9d9d9;
--color-black: #000;
--color-black-20: color-mix(in srgb,#000 20%,transparent);
--color-black-15: color-mix(in srgb,#000 20%,transparent);
--color-white: #fff;
--color-white-20: color-mix(in srgb,#fff 20%,transparent);
--color-white-60: color-mix(in srgb,#fff 60%,transparent);
--color-fluorescent-pink: #f392dd;
--color-fluorescent-pink-base: #f392dd;
--color-fluorescent-pink-light: #fad8ff;
--color-fluorescent-yellow: #fdeb20;
--color-fluorescent-yellow-base: #fdeb20;
--color-fluorescent-yellow-light: #f4fd90;
--color-fluorescent-green: #10e68d;
--color-fluorescent-green-base: #10e68d;
--color-fluorescent-green-light: #a9ffdb;
--color-fluorescent-blue: #5fc0ff;
--color-fluorescent-blue-base: #5fc0ff;
--color-fluorescent-blue-light: #bfe4fc;
--color-fluorescent-purple: #d377fd;
--color-fluorescent-purple-base: #d377fd;
--color-fluorescent-purple-light: #e3dcf8;
--color-orange: #f43e01;
--color-orange-dark: #c23101;
--color-orange-base: #f43e01;
--color-orange-middle: #fe9e20;
--color-orange-light: #ffd1a3;
--color-orange-brand: #f43e01;
--color-orange-deep: #e93b01;
--color-orange-deep-base: #e93b01;
--color-olive: #475c05;
--color-olive-base: #475c05;
--color-error: #f80a3e;
--color-error-base: #f80a3e;
--color-homev2-ink: #302b28;
--color-ink-80: color-mix(in srgb,#302b28 80%,transparent);
--color-ink-60: color-mix(in srgb,#302b28 60%,transparent);
--color-ink-inverse-80: color-mix(in srgb,#f3f3ee 80%,transparent);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/groq-com