---
title: "SpaceXSI design system"
variant: extended
source: https://x.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/x-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SpaceXSI · Design System

> Quiet, spacious design for frontier AI.

**Theme:** light · **Industry:** ai · **Source:** https://x.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A bright, restrained AI homepage pairs a centered product statement with examples of Grok across chat, coding, and voice. Warm-gray cards, dark pill CTAs, and compact editorial sections carry the visitor from exploration to API access.

## North star

Keep the interface predominantly white and ink-black, using spacious editorial sections and warm neutral cards to make product examples—not decoration—the focus.

## Overview

The page is built on a white canvas, with near-black text and warm off-white panels doing most of the visual work. Accent orange appears sparingly in small announcement details and vivid code-product artwork rather than as a broad interface color. Typography uses a clean, softly shaped sans-serif: large centered hero copy gives way to smaller, left-aligned section headings and restrained metadata. A three-column product preview makes chat, code, and bot experiences immediately legible, while later sections shift to a developer feature split, a horizontal metrics row, news cards, and a two-card onboarding choice. Generous vertical gaps keep these varied modules from feeling crowded. Rounded pill CTAs provide the strongest interaction cue; pale borders and subtle card edges separate content without heavy shadows. Product imagery is framed as interface examples and editorial thumbnails, adding color and texture while leaving the overall page calm and monochromatic.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas and light text on the dark primary API button. |
| Jet Ink | `#0a0a0a` | `--color-jet-ink` | brand | Primary headings, navigation, body copy, and the dark primary CTA. |
| Warm Porcelain | `#f9f8f6` | `--color-warm-porcelain` | surface | Warm-tinted product tiles, onboarding cards, and pale secondary link surfaces. |
| Signal Ember | `#e04a26` | `--color-signal-ember` | accent | Measured accent used sparingly in product-related artwork; not a dominant interface color. |
| Soft Hairline | `#f1f1f1` | `--color-soft-hairline` | neutral | Subtle borders and separators around cards, buttons, and navigation elements. |
| Mist Blue Gray | `#d5d9e2` | `--color-mist-blue-gray` | neutral | Fine secondary border detail, including footer-related measured elements. |
| Cloud Edge | `#e6e6e6` | `--color-cloud-edge` | neutral | Light separators and restrained secondary text detail. |
| Muted Taupe | `#8d867e` | `--color-muted-taupe` | semantic | Muted text on pale surfaces, including understated supporting copy. |
| Pale Silver | `#e1e1e1` | `--color-pale-silver` | semantic | Muted text on dark or inverse areas where lighter contrast is needed. |
| Graphite Note | `#24292e` | `--color-graphite-note` | neutral | Secondary dark text detail; subordinate to the primary near-black ink. |
| Code Charcoal | `#151515` | `--color-code-charcoal` | surface | Dark code-preview card, creating a strong contrast against the white page. |
| Quiet Slate | `#6c6c6c` | `--color-quiet-slate` | semantic | Subdued navigation, link, and supporting text detail. |
| Button Fog | `#ececec` | `--color-button-fog` | neutral | Light button and text detail for low-emphasis controls. |
| Peach Haze | `#ffefe6` | `--color-peach-haze` | accent | Warm tint appearing within measured accent artwork and gradients. |
| Apricot Glow | `#ff9c6a` | `--color-apricot-glow` | accent | Orange highlight within the developer code illustration, not a general UI fill. |
| Tangerine Flare | `#ff7a45` | `--color-tangerine-flare` | accent | Vivid illustration gradient color; keep confined to product artwork. |
| Deep Signal Blue | `#032f62` | `--color-deep-signal-blue` | accent | Sparse accent text detail rather than a large section or interface background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f8f6` (Warm Porcelain) · `--color-surface-2` → `#151515` (Code Charcoal) · `--color-text` → `#0a0a0a` (Jet Ink) · `--color-text-muted` → `#8d867e` (Muted Taupe) · `--color-text-subtle` → `#e1e1e1` (Pale Silver) · `--color-border` → `#f1f1f1` (Soft Hairline) · `--color-accent` → `#e04a26` (Signal Ember) · `--color-accent-2` → `#032f62` (Deep Signal Blue) · `--color-accent-3` → `#ff9c6a` (Apricot Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#f9f8f6` | 18.65:1 | AAA |
| `#0a0a0a` | `#151515` | 1.08:1 | fail |
| `#8d867e` | `#ffffff` | 3.59:1 | AA-large |
| `#8d867e` | `#f9f8f6` | 3.39:1 | AA-large |
| `#8d867e` | `#151515` | 5.08:1 | AA |
| `#e1e1e1` | `#ffffff` | 1.31:1 | fail |
| `#e1e1e1` | `#f9f8f6` | 1.23:1 | fail |
| `#e1e1e1` | `#151515` | 13.96:1 | AAA |
| `#e04a26` | `#ffffff` | 4.06:1 | AA-large |

### Gradients

- `linear-gradient(120deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 52%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(circle at 59.8157% 61.9351%, rgb(255, 156, 106) 0%, rgba(0, 0, 0, 0) 36%), radial-gradient(circle at 38.1074% 56.9623%, rgb(255, 122, 69) 0%, rgba(0, 0, 0, 0) 34%), radial-gradient(circle at 52.9623% 30.3`
- `linear-gradient(90deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.25) 35%, rgb(99, 102, 241) 40%, rgb(168, 85, 247) 45%, rgb(236, 72, 153) 50%, rgb(249, 115, 22) 55%, rgb(234, 179, 8) 60%, rgba(10, 10, 10, 0.25) 65%, `

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| xVf | `--font-body` | webfont | 400, 500, 450 | Primary display, headings, navigation, body copy, buttons, and links. | Inter |
| GeistMono | `--font-mono` | webfont | 400, 700 | Code previews and compact technical interface text. | Geist Mono |
| system-ui | `--font-system-ui` | system | 400 | Minor system fallback text. | Inter |

- **xVf:** Use clean sans-serif forms, mostly regular to medium weights; tight display tracking, sentence case, with uppercase reserved for eyebrow labels.
- **GeistMono:** Monospaced technical snippets in compact sizing; use regular text for code and bold sparingly for emphasis.
- **system-ui:** Low measured share; retain as a practical sans-serif fallback without giving it a distinct visual role.

### Type scale — Perfect Fourth (ratio ≈ 1.358, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 450 | 1 | -0.01em | — | xVf | Large centered hero statement introducing the AI platform. |
| h1 | 48px | 500 | 1 | -0.01em | — | xVf | Primary page or section heading, especially the hero headline. |
| h2 | 30px | 500 | 1.2 | -0.01em | — | xVf | Major section headings for developer, news, and onboarding content. |
| h3 | 24px | 500 | 1.33 | -0.01em | — | xVf | Card headings and subordinate feature titles. |
| h4 | 18px | 400 | 1.63 | 0 | — | xVf | Supporting subheads and short explanatory statements. |
| body | 13px | 400 | 1.63 | 0 | — | xVf | Descriptions, feature copy, and standard supporting text. |
| caption | 10.5px | 400 | 1.63 | 0 | — | xVf | Compact card metadata, labels, and footer details. |
| button | 14px | 500 | 1.43 | 0 | — | xVf | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.43 | 0 | — | xVf | Top-level navigation labels and dropdown items. |
| link | 14px | 500 | 1.43 | 0 | — | xVf | Text links for documentation, news, and product navigation. |
| eyebrow | 10px | 500 | 1.5 | 0.05em | uppercase | xVf | Small uppercase category labels above section content. |
| code | 11px | 400 | 1.63 | -0.01em | — | GeistMono | Technical snippets and status text inside dark code previews. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 96 px.
- Section rhythm 148px · element gap 4px · card padding 40px · max content width 1232px.

Use a spacious centered page frame with a measured maximum width of 1232px and generous section separation. The hero is centered; feature and news sections shift to left-aligned headings and multi-column grids. The first product showcase uses three columns, followed by a two-column developer feature and paired onboarding cards. A three-column metrics band and dense multi-column footer provide compact contrast. Preserve generous whitespace around section transitions and keep card interiors calm rather than filling every grid cell with decoration.

## Shape & elevation

- Radius: button `9999px` · card `8px` · nav `6px` · link `16px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.22) 0px 16px 48px -8px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.7) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.45) 0px -1px 1px 0px inset, rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.18) 0px 0px 13.1px 0px inset`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(15, 23, 42, 0.18) 0px 18px 40px -24px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 95, 87, 0.18) 0px 0px 10px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 189, 46, 0.12) 0px 0px 10px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat surfaces and faint borders over strong shadows. Warm-gray cards are separated mainly by their fill and rounded corners; the dark code preview is a deliberate high-contrast layer. Reserve subtle shadowing for floating navigation or layered card details, and avoid making the page feel glossy or deeply stacked.

## Imagery

Use product interfaces as the primary visual evidence: chat conversations, a dark code terminal, and a bot prompt appear as a three-column showcase. Mix these with editorial news thumbnails and the warm orange code illustration. Keep imagery within cards or framed previews; saturated color is mostly confined to the artwork, while the surrounding interface remains white and neutral.

## Components

### Pill CTA

Use fully rounded buttons; the primary API action is near-black with white text, while documentation and sales actions use pale neutral fills.

### Product preview tiles

Arrange chat, code, and bot examples in a three-column showcase with warm pale surfaces, concise labels, and small Explore links.

### Code preview

Set terminal-like content in a charcoal panel with compact GeistMono text and restrained colorful status details.

### Developer feature split

Pair left-aligned API copy and compact actions with a vivid code illustration on the opposite side.

### Metrics band

Present three prominent numeric proof points in a horizontal row, divided by light vertical rules.

### News cards

Use a row of editorial thumbnail cards with category/date metadata, concise titles, and a light overall treatment.

### Onboarding cards

Show self-serve and supported-start options as two warm-neutral panels with short lists and a clear action per panel.

### Measured component styles

- **Primary button** (“Contact Sales”): background #f2f1ef · text #0a0a0a · radius 9999px · padding 10px 18px · 500 14px xVf
- **Secondary button** (“Get API Access”): background #0a0a0a · text #ffffff · radius 9999px · padding 12px 20px · 500 14px xVf
- **Link** (“Explain quantum entanglement simply Two ”): background #f9f8f6 · text #0a0a0a · radius 16px · padding 0px · 400 16px xVf
- **Card** (“Build on your own Launch your AI-powered”): background #f9f8f6 · text #0a0a0a · radius 16px · padding 40px · 400 16px xVf
- **Navigation item** (“Products Solutions Developer Company Pri”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 16px xVf

## Do

- Keep the canvas white and primary copy near-black.
- Use warm off-white panels for product and onboarding cards.
- Make the hero statement centered and visually dominant.
- Use dark pill styling for the primary CTA.
- Let product screenshots and previews carry the visual variety.
- Separate major sections with generous whitespace.

## Don't

- Do not turn orange accents into a page-wide color system.
- Do not use heavy borders or pronounced shadows on every card.
- Do not crowd the hero with secondary content.
- Do not make every section centered; retain left-aligned content modules.
- Do not use saturated artwork as a substitute for product examples.
- Do not introduce dense decorative patterns into the quiet canvas.

## Agent prompt

Build a new AI product page in this style using a white Gallery White (#ffffff) canvas and Jet Ink (#0a0a0a) typography. Start with a centered, confident headline, a short supporting sentence, and a black pill CTA with a pale secondary action. Use Warm Porcelain (#f9f8f6) for product and onboarding cards, and keep Soft Hairline (#f1f1f1) borders subtle. Organize content into spacious editorial sections: product previews, a developer feature split, metrics, news, and a clear onboarding choice. Use GeistMono for code samples and the primary sans-serif for all other content. Keep orange tones such as Apricot Glow (#ff9c6a) confined to illustrations or product artwork. Use rounded cards, restrained elevation, and clear alignment changes between centered hero content and left-aligned sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement and headline above CTAs, followed by a three-column product preview grid. | Announcement link, Primary and secondary CTA, Product exploration links | Centered hero typography, Black pill button, Warm neutral preview tiles, Dark code preview |
| 2 | feature-split | Left-aligned API copy and actions beside a large code illustration. | API access CTA, Documentation link, Language tabs | Two-column split, Code illustration, Compact developer metrics |
| 3 | stats | Three figures aligned in a horizontal row with fine vertical separators. | At-a-glance proof points | Large numerals, Muted captions, Light divider rules |
| 4 | content-feed | Left-aligned section heading above a four-column row of editorial news cards. | All-posts link, Clickable news cards | Thumbnail images, Small category and date labels, Concise headlines |
| 5 | pricing | Centered heading over two side-by-side warm neutral cards. | Compare self-serve and supported paths, Distinct action per card | Two rounded cards, Feature lists, Pill-shaped actions |
| 6 | footer | Brand and copyright at left with several compact link columns across the footer. | Grouped navigation links, Legal and product destinations | Multi-column link grid, Subtle top divider, Small muted labels |

## Source CSS custom properties (selected)

```css
--color-jet: 0 0% 4%;
--color-charcoal: 0 0% 10%;
--color-umbra: 221 12% 14%;
--color-ink: 213 11% 16%;
--color-ash: 216 5% 19;
--color-steel: 216 4% 22%;
--color-fog: 216 4% 51%;
--color-pewter: 213 12% 70%;
--color-dove: 222 19% 86%;
--color-nimbus: 228 21.74% 95.49%;
--color-ivory: 40 18% 97%;
--color-white: 0 0% 100%;
--color-midnight: 214 58.3% 9.4%;
--color-evenfall: 214 16.1% 28%;
--color-breeze: 214 48.9% 73.9%;
--color-dawn: 37 100% 76%;
--color-sunset: 22 100% 51.6%;
--color-dusk: 263 70% 50.4%;
--color-twilight: 255 92% 76%;
--color-codeblock: 0 0% 7%;
--primary: 0 0% 4%;
--primary-hover: 221 12% 14%;
--secondary: 216 4% 51%;
--secondary-hover: 213 12% 70%;
--accent: 22 100% 51.6%;
--accent-hover: 37 100% 76%;
--background: 0 0% 100%;
--background-hover: 222 19% 86%;
--foreground: 0 0% 4%;
--foreground-hover: 221 12% 14%;
--border: 222 19% 86%;
--scroll-track-color: 0 0% 100%;
--scroll-thumb-color: 222 19% 86%;
--radius: .5rem;
--site-header-bg: hsl(0 0% 100% / .85);
--pill-hero-pt-gap: 2.25rem;
--terminal-bg: #0a0a0a;
--terminal-fg: #d7d1c9;
--terminal-surface: #202020;
--terminal-editor-bg: #151515;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/x-ai