Groq Design System

Groq sells inference on a custom LPU chip, and the marketing surface refuses every AI-infrastructure visual cliche. There is no purple-to-blue gradient mesh, no animated globe, no glassmorphic console screenshot. The canvas is a warm bone (#f3f3ee) — not white, not gray — sitting under charcoal ink (#2d2f33) that handles every paragraph, nav link, and rule. The only chromatic event on the page is a single Groq orange (#f43e01) doing three jobs: it fills the primary pill CTA at 1000px radius, paints the uppercase mono overline above each section headline, and underlines hovered link text. Everything else — the McLaren F1 hero card, the rack-mounted LPU photograph, the OpenAI-compatibility code well — renders in black, cream, or charcoal.

This page packages the captured system as a single DESIGN.md file written to the Google Labs spec. Inside the frontmatter: 22 color tokens covering the bone canvas, the charcoal ink ladder, the orange voltage with its pressed variant, and a five-stop fluorescent reserve (purple, green, yellow, blue, pink) that ships in CSS variables but never appears on the home surface. There are 12 typography tokens split across two families — Space Grotesk for every display tier and body line, IBM Plex Mono for overlines and inline code — plus 4 radii, 8 spacing values from 4px to 80px, and 18 components covering the pill primary CTA, the bordered secondary, the dark code well at #2d2f33, the McLaren-style media card, and the bottom "Build Fast" full-bleed orange band.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will write React and Tailwind that match Groq's discipline: cream canvas, weight-300 display, mono overlines, scarce orange. The result is not a generic AI-infra dark theme — it's an inference-hardware product brochure that trusts a single voltage hex to carry every call to action across the page. Read it as a reference if you are building any developer-facing platform where the brand needs to feel both technical and warmly editorial, and where the convention to default to dark canvases and saturated gradients is exactly what you want to avoid.