Refto
Groq

Groq

The Groq LPU delivers inference with the speed and cost developers need.

DevelopmentScrolling AnimationAiTechnologyLightClean
4.0
13
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Groq Home design analysis

Build for a developer and enterprise audience that expects speed, clarity, and proof. Keep the outer shell warm and editorial so the system does not feel sterile, even when the content gets technical. Let one wide media...

Key Takeaways

  • Build for a developer and enterprise audience that expects speed, clarity, and proof.
  • Keep the outer shell warm and editorial so the system does not feel sterile, even when the content gets technical.
  • Let one wide media or campaign object anchor the top of a page, then allow dense information below it.
  • Use a single large media block, banner, or promo surface at the top of important pages.
  • Keep supporting tiles and tables sharply organized around it.
  • Let visuals feel product- and performance-oriented rather than abstract or mystical.

Overview

  • Build for a developer and enterprise audience that expects speed, clarity, and proof.
  • Keep the outer shell warm and editorial so the system does not feel sterile, even when the content gets technical.
  • Let one wide media or campaign object anchor the top of a page, then allow dense information below it.

Image Direction

  • Use a single large media block, banner, or promo surface at the top of important pages.
  • Keep supporting tiles and tables sharply organized around it.
  • Let visuals feel product- and performance-oriented rather than abstract or mystical.

Colors

  • Use a warm off-white page field instead of a cold technical white.
  • Keep text and structure in charcoal.
  • Use one vivid orange for primary action and section emphasis.

Typography

  • Use an open modern grotesk with lighter display weight than typical startup bold headlines.
  • Keep the body clear and utilitarian.
  • Introduce small mono labels where dense information needs extra structure.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Groq Design Language

A developer-first AI infrastructure system that uses a warm editorial shell, orange action cues, and dense operational tables.

Warm, technical, and performance-oriented.

Primary mode: lighttechnical B2B and developer marketingui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Warm, technical, and performance-oriented.
Density
5
Variance
3
Motion
1
Signals
warm off-white field · thin line separators · orange CTA pills · wide media plus dense tables

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Warm Paper
#F3F3EE
Charcoal Ink
#2D2F33
Signal Orange
#FF5A1F
White Surface
#FFFFFF
Quiet Rule
#D7D5CC
Usage rules
Keep the shell warm and editorial rather than cold and clinical.
Use orange as the unmistakable action signal.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
card_padding
1.5rem
table_row_gap
0.75rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
12px
media
12px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
"Space Grotesk"
open modern grotesk
Body
"Space Grotesk"
clean technical sans
Mono
"Space Mono"
compact support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 5vw, 4.75rem)/—
Display
H2
clamp(2rem, 3vw, 3.25rem)/—
H2
Body
1rem/—
Body
Label
0.8125rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep headings open and lighter than standard bold SaaS display text. · Use smaller mono labels where data density needs more structure.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-180ms
Easing
cubic-bezier(.4, 0, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.4, 0, .2, 1)

Layout Principles

Balance one wide media or promo object against disciplined copy and proof tiles.
Allow pricing and technical sections to become unapologetically dense.
Keep the outer shell calm even when the information density rises.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#FF5A1F
Text
#FFFFFF
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.75rem 1.15rem
Min height
36px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#2D2F33
Border
1px solid #D7D5CC
Radius
{tokens.radii.control}->999px
Padding
0.75rem 1.15rem
Min height
36px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#2D2F33
Border
1px solid #D7D5CC
Radius
{tokens.radii.component}->12px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards media
Feature Card
Component preview content
Base Attributes
Background
#101014
Text
#FFFFFF
Border
none
Radius
{tokens.radii.media}->12px
Padding
0
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#2D2F33
Height
34px
Active text
#2D2F33
Item padding
0.4rem 0.75rem
Item radius
{tokens.radii.control}->999px

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Media types
  • -
    embedded promo media
  • -
    launch banner
  • -
    table-led technical layout
Subject patterns
  • -
    one wide media object at the top of the page
  • -
    disciplined supporting tiles and tables around it
Composition logic
  • -
    Keep the media block broad and quiet enough to coexist with dense copy.
  • -
    Let tables remain flat and highly scannable.
Treatment rules
  • -
    Use the warm shell to soften the technical density.
  • -
    Keep orange emphasis concentrated in actions and category cues.
Generation cues
  • -
    Prompt for a warm technical landing page with one wide media object and dense comparison tables.
  • -
    Describe the tone as fast, credible, and developer-facing rather than futuristic or mystical.
Avoid
  • -
    No abstract AI smoke visuals.
  • -
    No equal-weight promotional card grids replacing tables.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold blue-gray enterprise shell.
  • -
    No hiding technical information inside decorative cards.
  • -
    No muddy or hesitant CTA color.