# grok.com Design System

> High-contrast utility meets stark minimalism, defined by obsidian pill-shaped interactions on a near-white foundation with sharp orange accents.

**Source:** https://grok.com | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Grok.com utilizes a "mixed" system type that balances stark, high-contrast utility with a minimalist aesthetic. The interface is built on a foundation of `#fcfcfc` (near-white) and `#050505` (obsidian), creating a primary contrast ratio of over 20:1 for maximum legibility. The signature design move is the use of extreme pill-shaped geometry (`9999px`) for primary actions and badges, contrasted against sharp `0px` or `4px` radii for utility inputs. A vibrant orange `#e76113` serves as the sole chromatic accent, used sparingly for brand signals and borders. Typography is strictly functional, pairing the geometric `universalSans` for UI and display with `IBM Plex Mono` for technical or machine-generated content.

## Signature DNA
1. **Obsidian Pill Actions** (Primary CTAs are rendered as `#050505` pills with `#fcfcfc` text, utilizing a `9999px` radius to stand out against the sparse layout.)
2. **The Orange Signal** (The use of `#e76113` as a high-voltage accent for "Beta" badges and specific borders, providing the only warmth in a grayscale environment.)
3. **Technical Monospace Interjections** (Integration of `IBM Plex Mono` at 14px for code snippets and CLI instructions, signaling the product's developer-centric roots.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `canvas` | `#fcfcfc` | Page background and primary surface | 9 | 1.0 | computed_style |
| `ink-primary` | `#050505` | Primary text, button backgrounds, borders | 78 | 0.8 | computed_style |
| `ink-secondary` | `#636363` | Secondary text, muted button labels | 13 | 0.8 | computed_style |
| `ink-tertiary` | `#858585` | Deemphasized button text | 6 | 0.6 | computed_style |
| `surface-soft` | `#f4f2f1` | Subtle section backgrounds, card surfaces | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `accent-orange` | `#e76113` | Brand accent, Beta badges, focus borders | 6 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| `universalSans` | 400, 500, 550 | UI, Body, Buttons | Inter | Proprietary |
| `universalSansDisplay` | 400 | Headings | Inter | Proprietary |
| `IBM Plex Mono` | 400 | Code, CLI, Technical | IBM Plex Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `heading-md` | 20px | 28px | -0.5px | 400 | Section headers | `h3.font-display.text-lg` |
| `body-lg` | 16px | 24px | -0.1px | 400 | Navigation, primary links | `a.rounded-lg.focus:outline-none` |
| `body-md` | 16px | 28px | -0.1px | 400 | Input text areas | `textarea.w-full.px-2` |
| `ui-label-bold` | 14px | normal | -0.1px | 550 | Emphasized UI labels | `span.font-semibold` |
| `ui-label-md` | 14px | 21px | -0.1px | 500 | Select triggers, buttons | `button#model-select-trigger` |
| `mono-sm` | 14px | 21px | -0.1px | 400 | Technical snippets | `button.group.flex` |
| `body-sm` | 14px | 22.75px | -0.1px | 400 | Secondary descriptions | `p.text-secondary.mt-1` |
| `caption` | 13px | 19.5px | -0.1px | 500 | Badges, small UI tags | `span.inline-flex.items-center` |

### Principles
1. **Tight Tracking on Display**: Large headings use `-0.5px` letter spacing to maintain visual density.
2. **Functional Monospace**: `IBM Plex Mono` is strictly reserved for machine-readable or technical content.
3. **Weight-Based Hierarchy**: UI hierarchy is driven by weight shifts (400 to 550) rather than significant size changes.

## Spacing
**Base unit:** 4px (observed via 4, 8, 16, 24px increments)
| Token | Value | Occurrences |
|------|-------|-------------|
| `space-1` | 4px | 3 |
| `space-2` | 8px | 23 |
| `space-4` | 16px | 14 |
| `space-6` | 24px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `radius-none` | 0px | Sharp containers, specific surfaces | 52 occurrences |
| `radius-sm` | 4px | Inputs, small buttons | `Rounded Button` component |
| `radius-md` | 8px | Control surfaces | `Surface` component |
| `radius-lg` | 16px | Content cards | `Card` component |
| `radius-pill` | 9999px | CTAs, badges, search bars | `Pill Button` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Default page state | Most surfaces |
| `raised` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Cards and floating panels | `Card` component |
| `inset-glow` | `oklch(0.1157 0 none / 0.06) 0px 0px 0px 1px inset` | Subtle card definition | `Card` component |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action (Sign Up)
**Pages observed:** grok.com, pricing, about
**Spec:** Background: `#050505` / Text: `#fcfcfc` / Border: none / Radius: `9999px` / Padding: `8px 16px` / Typography: `14px 500`
**States observed:** Default: Captured | Hover: Not captured

#### Ghost Pill Button
**Role:** Secondary actions (Sign In, Imagine)
**Pages observed:** grok.com, pricing
**Spec:** Background: `transparent` / Text: `#050505` / Border: `1px oklch(0.1157 0 none / 0.1)` / Radius: `9999px` / Padding: `8px 16px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Beta Badge
**Role:** Feature status indicator
**Pages observed:** grok.com, about
**Spec:** Background: `transparent` / Text: `#e76113` / Border: `1px #e76113` / Radius: `9999px` / Padding: `2px 8px` / Typography: `13px 500`
**States observed:** Default: Captured

#### Search Bar
**Role:** Primary interaction point
**Pages observed:** grok.com
**Spec:** Background: `transparent` / Text: `#050505` / Border: `1px oklch(0.1157 0 none / 0.06)` / Radius: `9999px` / Padding: `12px 24px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Content grouping
**Pages observed:** pricing, about
**Spec:** Background: `#f7f7f7` / Text: `#050505` / Border: `1px oklch(0.1157 0 none / 0.06)` / Radius: `16px` / Padding: `24px`
**States observed:** Default: Captured

#### CLI Snippet Card
**Role:** Technical instruction display
**Pages observed:** grok.com
**Spec:** Background: `#f4f2f1` / Text: `#636363` / Border: `none` / Radius: `9999px` / Typography: `IBM Plex Mono 14px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px (estimated) |
| Content Alignment | Centered |
| Section Gap | 48px - 64px |

## Do's
- Use `#050505` for all primary text to maintain high contrast against the `#fcfcfc` canvas.
- Apply `9999px` radius to any element that is an entry point for user interaction (buttons, search).
- Reserve `#e76113` exclusively for status indicators (Beta) or critical brand moments.
- Use `IBM Plex Mono` for any text that represents code, commands, or system output.
- Maintain generous whitespace around the central search interaction.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use `#050505`. **Reason:** Grok uses an achromatic primary palette; blue is not part of the brand DNA.
- **Wrong:** Applying rounded corners (e.g., 8px) to primary CTAs. **Right:** Use `9999px`. **Reason:** Pill shapes are a core signature move.
- **Wrong:** Using `#e76113` for body text. **Right:** Use for accents only. **Reason:** The orange has insufficient contrast for long-form reading.
- Do not use shadows on buttons; the system relies on borders and fills for depth.
- Do not mix `universalSans` and `IBM Plex Mono` within the same sentence.

## Similar brands
- Linear (High contrast, minimalist utility)
- Vercel (Achromatic foundation, technical focus)
- OpenAI (Clean, typography-first AI interface)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-canvas: #fcfcfc;
  --color-ink-primary: #050505;
  --color-ink-secondary: #636363;
  --color-accent-orange: #e76113;
  --radius-pill: 9999px;
  --radius-card: 16px;
  --font-sans: 'universalSans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
```

## Agent prompt examples
1. Build a navigation bar component using a #fcfcfc background. Include a primary CTA button with a #050505 background, #fcfcfc text, and a 9999px border-radius. Add a "Beta" badge next to the logo using a transparent background, #e76113 text, a 1px #e76113 border, and a 9999px radius. Use universalSans at 14px with a 500 weight for all navigation links.

2. Create a hero section for an AI interface. Set the main page canvas to #fcfcfc. The central element should be a search bar with a 9999px radius, a 1px border in oklch(0.1157 0 none / 0.06), and 12px 24px padding. Below the search bar, include a CLI suggestion pill using #f4f2f1 background, #636363 text, and IBM Plex Mono at 14px.

3. Design a pricing card using the Feature Card spec. Use a #f7f7f7 background, a 16px border-radius, and a 1px border in oklch(0.1157 0 none / 0.06). For the card heading, use universalSansDisplay at 20px with -0.5px letter spacing. Ensure all body text is #050505 and primary actions within the card use the obsidian pill button style with 9999px radius.

4. Implement a technical documentation snippet component. Use a surface-soft (#f4f2f1) background with a 4px border-radius for the container. Inside, render the code using IBM Plex Mono at 14px with a 21px line height in #050505. For the "Copy" button, use the Ghost Pill Button style: transparent background, 1px oklch(0.1157 0 none / 0.1) border, and 9999px radius.

5. Build a footer layout that maintains the stark minimalism of the brand. Use #fcfcfc for the background and #636363 for secondary links at 14px (body-sm). Include a final "Get Started" section featuring a large #050505 pill-shaped button and a small caption in #858585 (ink-tertiary) using universalSans at 13px with 500 weight.

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoints were not defined in the provided token data, though mobile viewport captures were performed.
- Detailed shadow values for the "raised" state were only captured for specific card components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://grok.com | 1440x900 | 2026-06-17 |
| Pricing | https://grok.com/pricing | 1440x900 | 2026-06-17 |
| About | https://grok.com/about | 1440x900 | 2026-06-17 |