Screenshot of Xai

Xai

x.ai

The reference for treating a single glowing wordmark as the only light source in a near-black void (#0c0c0b), with whisper-thin 400-weight type and one electric-blue (#2563eb) focus accent.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
universalSansDisplay
body
universalSans
mono
GeistMono

Do / Don't

Reference it for

  • Void-black canvas (#0c0c0b) with a self-illuminated wordmark as the hero, glow bleeding from one side like a light source off-frame
  • Single uniform type weight (400) across the entire scale (12/14/16/20/36/48/80px), letting negative space and tracking carry hierarchy instead of bold
  • Centred chat-style input as the primary hero CTA: dark fill, 24px radius, placeholder 'What do you want to know?', circular up-arrow send button bottom-right
  • Hairline borders at #1f2228 and ghost pills (fully rounded, transparent fill, thin outline) for nav CTA and secondary buttons like TRY GROK / READ ANNOUNCEMENT
  • Letter-spaced small-caps nav (GROK / API / COMPANY / COLOSSUS) in muted ash (#7d8187) for a restrained tech-utility register
  • Colour used as rare atmospheric event only: one electric blue (#2563eb) focus ring, a warm amber horizon wash, otherwise pure monochrome
  • Input focus elevation as a soft 2px outer ring (rgb(113,113,122) 0 0 0 2px) rather than a shadow
  • Footer announcement bar pairing a two-line note with a ghost-pill CTA at the lower edge

Do not copy

  • The xAI / X wordmark and the slashed-X logo lockup
  • The 'Grok' product name and its glowing chrome render
  • The exact deep-space cosmic light photography behind the hero
  • The nav product list (COLOSSUS, SPACEX, NEWS) specific to xAI's properties
  • The 'What do you want to know?' / 'Announcing Grok Voice Think Fast 1.0' product copy
  • The universalSans + GeistMono brand type pairing as a literal lift