X Ai

ai ml Color System

Color Philosophy

xAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design syst...

xAI's website is a masterclass in dark-first, monospace-driven brutalist minimal...

Key Principles

Accent Color Strategy

X Ai uses #ffffff as the primary accent for interactive elements

Color Palette

Carefully selected 8 colors for ai-ml applications

Design Techniques

Uses gradient

Color Palette

Pure White

#ffffff

The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.

Dark Background

#1f2228

The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of `#000000` while maintaining deep darkness.

White Default

#ffffff

Link and interactive element color in default state.

White Muted

rgba(255, 255, 255, 0.5)

Hover state for links -- a deliberate dimming rather than brightening, which is unusual and distinctive.

White Subtle

rgba(255, 255, 255, 0.2)

Borders, dividers, and subtle surface treatments.

Ring Blue

rgb(59, 130, 246) / 0.5

Tailwind's default focus ring color (`--tw-ring-color`), used for keyboard accessibility focus states.

Surface Elevated

rgba(255, 255, 255, 0.05)

Subtle card backgrounds and hover surfaces -- barely visible lift.

Surface Hover

rgba(255, 255, 255, 0.08)

Slightly more visible hover state for interactive containers.

CSS Implementation

CSS Variables

/* X Ai Color System */
:root {
  --x.ai-pure-white: #ffffff;
  --x.ai-dark-background: #1f2228;
  --x.ai-white-default: #ffffff;
  --x.ai-white-muted: rgba(255, 255, 255, 0.5);
  --x.ai-white-subtle: rgba(255, 255, 255, 0.2);
  --x.ai-ring-blue: rgb(59, 130, 246) / 0.5;
  --x.ai-surface-elevated: rgba(255, 255, 255, 0.05);
  --x.ai-surface-hover: rgba(255, 255, 255, 0.08);
}

/* Example usage */
.x.ai-button-primary {
  background-color: var(--x.ai-pure-white);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
}

Related Companies

Claude

Claude's interface is a literary salon reimagined as a product page — warm, unhu...

Cohere

Cohere's interface is a polished enterprise command deck — confident, clean, and...

Elevenlabs

ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#f...

Minimax

MiniMax's website is a clean, product-showcase platform for a Chinese AI technol...

/* X Ai Color System */ :root { --x.ai-pure-white: #ffffff; --x.ai-dark-background: #1f2228; --x.ai-white-default: #ffffff; --x.ai-white-muted: rgba(255, 255, 255, 0.5); --x.ai-white-subtle: rgba(255, 255, 255, 0.2); --x.ai-ring-blue: rgb(59, 130, 246) / 0.5; --x.ai-surface-elevated: rgba(255, 255, 255, 0.05); --x.ai-surface-hover: rgba(255, 255, 255, 0.08); } /* Example usage */ .x.ai-button-primary { background-color: var(--x.ai-pure-white); color: #ffffff; border: none; border-radius: 8px; padding: 8px 15px; }