# Groq · Design system migration spec

> Source: https://groq.com  ·  Curated by OpenDesign  ·  en

> The site is worth including because it demonstrates a high-end, performance-focused B2B brand identity that balances industrial precision with accessible developer aesthetics.

## 1. Identity DNA

Groq's design system is engineered like a high-performance engine room, where every component serves a purpose without decorative excess. The identity merges industrial precision with accessible developer tooling, treating speed and reliability as its core structural materials.

**One-liner:** Fast, reliable, low-cost AI inference infrastructure.
**Keywords:** speed · reliability · performance · inference
**Analogy:** A high-performance engine room for AI, combining industrial precision with accessible developer tooling.

## 2. Color

The color system establishes a calm, muted neutral canvas that allows the high-contrast orange accent to command attention where needed. Dark charcoal typography ensures legibility against the warm background without resorting to absolute black.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E8E8DE` | main background |
| `--bg-soft` | `#F3F3EE` | card background |
| `--bg-quiet` | `#E8E8DE` | quiet area |
| `--ink` | `#2D2F33` | body text |
| `--ink-soft` | `#69695D` | secondary text |
| `--muted` | `#9C9C90` | placeholder |
| `--accent` | `#F43E01` | single accent |
| `--line` | `rgba(45, 47, 51, 1)` | divider |

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

The palette principle is restraint: neutrals provide stability, while the single vibrant accent creates clear hierarchy.

## 3. Typography

Typography uses Space Grotesk as its geometric-sans foundation, delivering clean readability for technical content. Headlines carry a weight of 500 for subtle emphasis, while IBM Plex Mono appears in uppercase labels for precise, monospaced categorization.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 1.1 | 500 | -1px | Hero headings and primary value propositions |
| body | 15px | 1.4 | 400 | 0 | Primary body text and descriptions |
| caption | 12px | 1.2 | 400 | 1.2px | Uppercase labels, kicker text, and navigation links |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a standard 4px base rhythm, with generous 32-48px horizontal padding establishing clear content boundaries.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with generous 32-48px horizontal padding and vertical gaps.

## 5. Surfaces

Surfaces are defined by subtle 1px borders rather than drop shadows, creating depth through fine linework. Cards use a light background with 12px border-radius, maintaining flat, clean planes.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgb(45, 47, 51) used for subtle card and input outlines.

## 6. Layout

The layout skeleton centers content in a standard container with full-width hero blocks anchoring primary messaging. Feature cards sit side-by-side, creating balanced visual weight without complex multi-column text flows.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes function over flourish, using minimal transitions to confirm interactions. Micro-interactions at 150ms ease-in-out handle color shifts and background-size animations for hover states.

- **Durations:** micro 150ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.68, -0.55, 0.27, 1.55)`
- **Patterns:**
  - Color and transform transitions on interactive elements.
  - Background-size animations for hover states.
  - Visibility and opacity for modal or overlay transitions.

- **Hover:** Subtle background-size or color transition on 150ms ease-in-out.
- **Click:** Immediate visual feedback via transform or color shift.
- **Transition:** Consistent use of 150ms ease-in-out for color and transform properties.
- **Keyboard:** Standard focus rings implied by accessibility patterns.

## 8. Voice & Don'ts

Voice is confident and technical, with headlines that are direct and punchy. The tone avoids vague marketing jargon and playful language, focusing instead on clear, action-oriented statements.

- **Tone:** Confident, technical, and performance-oriented.
- **Headline style:** Direct and punchy, focusing on speed and reliability.
- **CTA style:** Action-oriented verbs like 'Get Started' and 'Start Building'.
- **Avoid:** Vague marketing jargon / Overly playful or casual language / Complex architectural diagrams in headers

### Don'ts
- ❌ 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.

The system deliberately avoids aggressive dark mode aesthetics, heavy drop shadows, and complex decorative elements.

## System Prompt (paste into AI tool)

```
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.
```
