Groq — design system & UI screens

AI · 1 screen · 11 sections · https://groq.com/

Light editorial hero for the Groq LPU with a McLaren tie-in and a Vercel/Canva/Robinhood logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/groq.

Decoded design system

Groq's decoded design system: background #F3F3EE, text #2D2F33, accent #F43E01, link #4A5565, primary #F43E01; type scale h1 32px / h2 15px / body 12px; 8px spacing base; 0px base radius. The single interactive/action color is #F43E01 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F3F3EE`
surface	`#E7E7E2`
border	`#D5D5D1`
text	`#2D2F33`
text_muted	`#78797A`
primary	`#F43E01`
accent	`#F43E01`
link	`#4A5565`
secondary	`#F55036`
button_bg	`#F43E01`
button_text	`#FFFFFF`

Using these colors

Action color #F43E01 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #F43E01 — one role, not several (the action color).
accent #F43E01 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #4A5565 — inline text links and link-styled controls.
secondary #F55036 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Space Grotesk
Body: Space Grotesk
Mono: IBM Plex Mono
h1: 32px
h2: 15px
body: 12px

Spacing

base unit: 8px
scale: 4px, 5px, 10px, 12px, 14px, 16px, 24px, 32px, 40px, 48px

Radii

base: 0px
button: 9999px

Shadows (elevation)

card: rgba(1, 1, 63, 0.1) 0px 2px 19px -4px

Motion

Micro-interactions run at 250ms (dominant) with ease-in-out.

durations: 250ms · 500ms · 900ms
easings: ease-in-out · cubic-bezier(0.68, -0.55, 0.27, 1.55)
animated properties: transform, background-size, opacity, color

Native design tokens

Token	Value
`--color-yellow`	`#F6AB45`
`--color-green`	`#39C5C0`
`--color-grey`	`#D9D9D9`
`--color-black`	`#000`
`--color-white`	`#fff`
`--color-fluorescent-pink`	`#F392DD`
`--color-fluorescent-pink-base`	`#F392DD`
`--color-fluorescent-pink-light`	`#FAD8FF`
`--color-fluorescent-yellow`	`#FDEB20`
`--color-fluorescent-yellow-base`	`#FDEB20`

…and 97 more measured on the page.

Button states (measured)

primary focus: outline 3px solid rgb(244, 62, 1)

Layout (measured)

container max-width: 1440px
nav: 88px sticky
common grid: 12 columns

Motion choreography (measured)

Load order: ul.LogoMarquee_logos__U6p7Y×2 → div.Testimonials_testimonial → div.textLockup → div.textLockup → article×2 → article×2

Scroll reveal: 9 elements rest at opacity 0, translateY(16px), animate in over 0.5s linear.

Responsive (measured)

breakpoints: 375px · 480px · 600px · 960px · 1080px · 1280px
mobile (390px): hero 26px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Fast, low-cost AI inference