Design tokens (YAML front matter)

version: alpha
name: Groq-Inspired-design-analysis
description: An inspired interpretation of Groq's design language — an inference-cloud brand built on a warm off-white canvas and one loud signal orange, with wide-tracked uppercase labels, outlined pill buttons and an industrial, spec-sheet tone.

colors:
  primary: "#f43e01"
  on-primary: "#f3f3ee"
  canvas: "#f3f3ee"
  canvas-orange: "#f43e01"
  ink: "#2d2f33"
  ink-warm: "#302b28"
  body: "#69695d"
  line: "#cecebf"

typography:
  display:
    fontFamily: esBuild, "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: -1.5px
  heading:
    fontFamily: esBuild, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: 500
    lineHeight: 36px
    letterSpacing: -0.5px
  body:
    fontFamily: esBuild, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  label:
    fontFamily: komuna, "Space Mono", "IBM Plex Mono", monospace
    fontSize: 16px
    fontWeight: 100
    lineHeight: 16px
    letterSpacing: 1.28px
    textTransform: uppercase

rounded:
  none: 0px
  pill: 1000px

spacing:
  xs: 8px
  sm: 10px
  md: 14px
  lg: 24px
  xl: 48px
  section: 96px

components:
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "10px 14px"
  button-solid:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "10px 14px"

Design System Inspiration of Groq

Overview

Groq sells speed — LPU inference “for fast inference”, millions of developers and trillions of tokens a week — and the site looks like a piece of industrial equipment’s spec sheet. Two colors do everything: a warm, slightly green off-white ({colors.canvas} #f3f3ee) and a hot signal orange ({colors.primary} #f43e01). On the measured homepage roughly 63% of painted area is the off-white canvas and 36% is a full-bleed orange field — the orange is not an accent, it is half the page.

Type pairs a neutral grotesk for headlines and body with a thin, wide-tracked uppercase face for labels, news tickers and buttons (“READ MORE>”, “START BUILDING”). Lines are thin, corners are square except for pill buttons, and there is no shadow anywhere.

Key Characteristics:

Two-color system: off-white + signal orange; orange used as whole sections, not just buttons.
Uppercase, letter-spaced (1.28px) thin labels for navigation, news and CTAs.
Outlined orange pill buttons (1000px radius, 1px border) as the main action style.
Thin #cecebf rules as the only dividers; no shadows, no rounded cards.
Big, confident numbers and short declarative headlines.

Colors

Signal Orange ({colors.primary} — #f43e01): Full-bleed bands, button borders and labels, link text, and highlight rules.
Canvas ({colors.canvas} — #f3f3ee): The page background and the text color on orange bands.
Ink ({colors.ink} — #2d2f33): Headlines and the news-ticker text.
Ink Warm ({colors.ink-warm} — #302b28): Long-form body on light surfaces.
Body ({colors.body} — #69695d): Secondary text and metadata.
Line ({colors.line} — #cecebf): Every divider and outline on the canvas; also the most-used text color on orange (a pale sand that reads well on the hot field).

Do not introduce blues, purples or gradients. If a third color is needed for charts, use tints of the orange or of {colors.body}.

Typography

Font Family

A neutral grotesk (served as esBuild) for headlines and body. Substitute: Neue Haas Grotesk, Inter Display or Helvetica Neue.
A thin, wide label face (served as komuna) at weight 100, uppercase, 1.28px tracking, for labels, buttons and tickers. Substitute: Space Mono or IBM Plex Mono at 300, or a light extended grotesk.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	64px	500	64px	-1.5px	Hero claims and big metrics.
`{typography.heading}`	32px	500	36px	-0.5px	Section titles.
`{typography.body}`	16px	400	24px	0	Paragraphs.
`{typography.label}`	16px	100	16px	1.28px	UPPERCASE labels, nav, news ticker, buttons.

Principles

Labels are always uppercase and tracked; headlines never are.
Line height of labels equals font size (16/16) — tight, technical.
Arrows are typed as characters (>), not icons.

Layout

Full-bleed horizontal bands alternate off-white and orange.
Content is left-aligned on a wide grid; the measured text column tops out around 730px.
Thin horizontal rules split rows of news, stats and links, like a data table.
Sections are tall and sparse — 96px+ vertical padding.

Elevation & Depth

None. The system is flat: no shadows, no blur, no layered cards. Separation comes from color fields and 1px rules.

Shapes

{rounded.pill} 1000px — buttons only.
{rounded.none} — everything else: bands, images, cards, inputs.

Components

Buttons

button-outline — transparent fill, 1px {colors.primary} border, orange uppercase label in {typography.label}, {rounded.pill}, padding 10px 14px. The default CTA (“Start building”).

button-solid — orange fill with off-white label, same shape; use once per view at most.

On orange bands, invert: off-white border and label.

News Ticker

A single uppercase line in {typography.label} — “GROQ CLOSES $350 MILLION SERIES A…” — followed by an orange “READ MORE>” link, separated from the hero by a rule.

Stat Rows

Large numbers in {typography.display} with uppercase labels underneath, divided by vertical or horizontal {colors.line} rules.

Do’s and Don’ts

Do

Use orange as large fields, not just small accents.
Keep labels uppercase, thin and widely tracked.
Use outlined pill buttons and square everything else.
Separate content with thin rules.

Don’t

Don’t add shadows, gradients or rounded cards.
Don’t introduce a second accent color.
Don’t set headlines in uppercase or in the label face.
Don’t use pure white; the canvas is warm #f3f3ee.

Responsive Behavior

Bands stay full-bleed; headline size drops to about 40px on mobile.
Stat rows stack vertically with rules between them.
Buttons keep their pill shape and go full-width below 480px.

Known Gaps

The homepage plays an intro animation; headings were not in the DOM when measured, so display sizes are estimated from the visible layout.
Font names are the site’s internal names; substitutes are approximate.

Groq

Palette

At a glance

Design System · Groq

Design System Inspiration of Groq

Overview

Colors