Groq DESIGN.md

AI inference design with electric orange identity, speed-first surfaces, token-throughput clarity, and developer-performance UX.

1. Visual Theme & Atmosphere

Groq should feel blazingly fast, technical, and powerful. The design language communicates LPU inference speed, low-latency API performance, developer tooling, and the competitive advantage of tokens-per-second.

• Mood: fast, technical, powerful, confident
• Density: medium, with API playground, benchmark comparisons, and performance dashboards
• Character: electric orange brand, near-black performance surfaces, speed-metric highlights, mono API panels

2. Color Palette & Roles

Orange is the signature speed signal — use it for primary CTAs and speed-metric highlights. The dark surface is the primary visual statement for the brand.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: "Space Grotesk", Inter, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace;

Use heavy weight (700-800) for performance metrics and hero display — Groq's identity is built on impressive numbers.

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  background: #F55036;
  color: #FFFFFF;
  font: 700 15px/1 Inter, sans-serif;
}

.speed-metric {
  font: 800 48px/1 "Space Grotesk", sans-serif;
  color: #F55036;
}

.api-panel {
  border-radius: 12px;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  padding: 20px 24px;
  font: 400 13px/1.7 "JetBrains Mono", monospace;
  color: #E5E7EB;
}

.model-card {
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 20px;
}

5. Layout Principles

Lead with speed metrics — tokens/second should be the largest number on the page. API playground takes the center. Model comparison tables below.

6. Depth & Elevation

css.shadow-card  { box-shadow: 0 0 0 1px #2A2A2A; }
.shadow-glow  { box-shadow: 0 0 40px rgba(245, 80, 54, 0.20); }
.shadow-modal { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60); }

On dark surfaces, use a subtle orange glow for the primary metric card to signal speed and performance.

7. Do's and Don'ts

Do make tokens/second the hero number on the homepage. Do use mono font in all API examples and response panels. Do use dark surfaces as the default — light mode is secondary. Do not use orange for error states. Do not understate the speed advantage — it is the entire product differentiation.

8. Responsive Behavior

The API playground is desktop-primary. Mobile is for documentation reading.

9. Agent Prompt Guide

Design like Groq: electric orange CTAs, near-black dark surfaces, heavy-weight speed metrics, mono API panels, orange glow accents, tokens-per-second hero numbers, and performance-first inference hierarchy.