# xAI — Design System
> xAI builds Grok — frontier AI models for reasoning, voice, image generation, and more. Build with the Grok API.
- **Canonical:** https://uiuxskills.com/library/xai
- **Source:** https://x.ai
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:41.486Z

---

---
version: alpha
name: xAI
description: Frontier AI models for reasoning, voice, image generation, and more.
tone: >-
  Technical, direct, and utilitarian. The tone is devoid of marketing fluff, focusing on performance
  metrics and developer experience.
color-scheme: dark
colors:
  primary: "#E1E1E1"
  surface: "#000000"
  surface-container: "#24292E"
  on-surface: "#E1E1E1"
  on-surface-variant: "#999999"
  accent-purple: "#BC97FF"
  accent-blue: "#88A6FF"
  accent-teal: "#29C6BE"
  outline: "#333333"
  error: "#FF6B6B"
typography:
  display-lg:
    fontFamily: ui-monospace
    fontSize: 3rem
  display-md:
    fontFamily: ui-monospace
    fontSize: 2.25rem
  headline-lg:
    fontFamily: ui-monospace
    fontSize: 1.875rem
  headline-md:
    fontFamily: ui-monospace
    fontSize: 1.5rem
  headline-sm:
    fontFamily: ui-monospace
    fontSize: 1.25rem
  body-md:
    fontFamily: ui-monospace
    fontSize: 1rem
  body-sm:
    fontFamily: ui-monospace
    fontSize: 0.875rem
  label-md:
    fontFamily: ui-monospace
    fontSize: 0.875rem
  label-sm:
    fontFamily: ui-monospace
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.accent-blue}"
    textColor: "#000000"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: transparent
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.accent-blue}"
  link:
    textColor: "{colors.accent-blue}"
  link-hover:
    textColor: "{colors.accent-purple}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.accent-teal}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

xAI maintains a stark, technical, and high-performance aesthetic that mirrors its focus on developer-centric AI tooling. The visual language is deeply rooted in terminal-inspired design, utilizing monospaced typography and a high-contrast, dark-mode-first interface that emphasizes utility and raw data.

## Colors

The color strategy is strictly utilitarian, prioritizing high contrast against a deep black background to mimic a development environment.

*   Primary (#E1E1E1): The neutral text color for headings and body copy.
*   Surface (inferred) (#000000): The base background color for the entire interface.
*   Surface-container (#24292E): The background for cards, code blocks, and UI containers.
*   On-surface (#E1E1E1): Primary text color for dark surfaces.
*   On-surface-variant (#999999): Secondary text for metadata and labels.
*   Accent-purple (#BC97FF): Highlight color for interactive hover states.
*   Accent-blue (#88A6FF): Primary accent for links and interactive elements.
*   Accent-teal (#29C6BE): Status indicator for badges and success states.
*   Outline (inferred) (#333333): Border color for cards and input fields.
*   Error (inferred) (#FF6B6B): Semantic color for alerts and error states.

## Typography

The typography stack relies exclusively on `ui-monospace` to reinforce the brand's technical, developer-first identity.

*   Display-lg (inferred): Hero headlines.
*   Headline-md (inferred): Card titles and section headers.
*   Body-sm: Metadata, secondary labels, and small UI text.
*   Label-sm: Small UI tags and status badges.

## Layout

The layout follows a strict grid system designed for high-density information display, utilizing wide containers for code snippets and narrow columns for text. The page pattern follows a logical flow: hero, features, code-demo, stats, news, pricing, and footer. Responsive behaviour is mobile-first, collapsing complex multi-column layouts into a single vertical stack on smaller screens. Use the `spacing` scale (e.g., `md` = 16px) to maintain consistent gutters between grid items.

## Elevation & Depth

Elevation is used sparingly to distinguish interactive cards from the background. The shadows are subtle, providing just enough lift to separate content from the `surface` background.

*   Elevation.sm (inferred): Subtle lift for minor UI elements.
*   Elevation.md (inferred): Standard lift for interactive cards.
*   Elevation.lg: Used for modal or drawer overlays to establish clear hierarchy.

## Shapes

The design language balances terminal-like rigidity with modern software accessibility. Sharp corners are used for technical containers, while `rounded.lg` (12px) is applied to content containers and `rounded.md` (8px) to input fields. 

`rounded.full` is reserved exclusively for buttons and small badges to ensure they remain distinct from the primary content blocks.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.surface-container}` with a hover state transition to `{colors.accent-blue}`. Use these for primary calls to action; they are designed to be concise and imperative.

### Card
Cards utilize `{colors.surface-container}` as a base with `{rounded.lg}` corners. Use these for grouping related technical information or feature sets.

### Input Field
Input fields feature a transparent background with an `{colors.outline}` border. On focus, the border transitions to `{colors.accent-blue}` to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{typography.body-sm}` for metadata. | Use serif fonts or variable-width stacks. |
| Apply `{colors.accent-blue}` for links. | Use high-saturation colors outside the palette. |
| Use `{colors.surface-container}` for cards. | Use `{colors.primary}` for backgrounds. |
| Maintain `{spacing.md}` between grid items. | Use excessive whitespace in layouts. |
| Use `{rounded.lg}` for content containers. | Use `{elevation.lg}` on static elements. |
| Use `{colors.on-surface-variant}` for labels. | Use low-contrast text for critical info. |
| Use `{rounded.md}` for input fields. | Use `rounded.full` on card components. |
| Use `{colors.accent-teal}` for badges. | Use non-monospace fonts for code blocks. |

## Content Style

CTA labels are imperative and concise, using direct verbs like "Get" or "Start" to minimize friction for developers.

Headings are benefit-oriented and declarative, avoiding marketing adjectives in favor of technical clarity.

Copy density is high, designed for scannability. Use bullet points for feature lists and keep paragraph lengths short to maintain the "terminal" aesthetic.

## Imagery & Icons

Imagery consists of high-fidelity product screenshots, terminal output visualizations, and technical diagrams. Icons are minimal and stroke-based, maintaining a clean, technical look that aligns with the monospace typography. Avoid decorative imagery; all visual assets must serve a functional purpose in explaining the technical capabilities of the models.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for xAI, a minimal, dark-mode-first developer tooling brand with a terminal-inspired, utilitarian tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or raw font families.
2. Respect the components block exactly. `button-primary` uses `{colors.surface-container}` at rest and `{colors.accent-blue}` on hover with `#000000` text; do not invent variants beyond those listed.
3. Follow the Shapes narrative strictly: `{rounded.lg}` for content containers, `{rounded.md}` for inputs, `{rounded.full}` reserved for buttons and small badges only — never on cards.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., requesting a non-monospace font or a high-saturation color), surface the conflict before proceeding.
5. Follow the Layout section for grid and spacing decisions. Use `{spacing.md}` for gutters. Default to mobile-first with a single breakpoint at 768px when the spec is silent.

## Output contract

**Must:**
- Use token names for every color, size, radius, and spacing value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Set `{colors.surface}` as the page background and `{colors.surface-container}` for all cards, inputs, and containers.
- Write CTAs and headings in the imperative, terse style described under Content Style — direct verbs, no marketing adjectives.
- Apply `ui-monospace` (via `{typography.*}` tokens) to all text elements, including code blocks.

**Must NOT:**
- Invent colors, radii, font families, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative imagery, or filler copy.
- Apply `{elevation.lg}` to static elements.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.surface}`; for ambiguous text use `{colors.on-surface}`; for secondary labels use `{colors.on-surface-variant}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.