SpaceXAI

Design Specification — SpaceXAI

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#0A0A0A), a vivid accent (#FF6308). All type is set in var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace. Detected font weights: 400, 500, 550, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://x.ai/favicon.ico?favicon.2d4mbjsd0b5n4.ico?dpl=18e58718cb1732925af7c225b56876b729d6e365

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(90deg, hsl(0 0% 4% / 0.25) 0%, hsl(0 0% 4% / 0.25) 35%, #6366f1 40%, #a855f7 45%, #ec4899 50%, #f97316 55%, #eab308 60%, hsl(0 0% 4% / 0.25) 65%, hsl(0 0% 4% / 0.25) 100%)
• linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 52%, transparent 60%, transparent 100%)
• linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%)
• linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%)
• linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%)
• linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%)
• radial-gradient(at 0 0,#e2e1e2,#00000000 50%),radial-gradient(at 33% 0,#cdcfcd,#00000000 50%),radial-gradient(at 67% 0,#cfcecf,#00000000 50%),radial-gradient(at 100% 0,#cbcecb,#00000000 50%),radial-gradient(at 0 50%,#d2d4d2,#00000000 50%),radial-gradient(at 33% 50%,#403f40,#00000000 50%),radial-gradient(at 67% 50%,#939593,#00000000 50%),radial-gradient(at 100% 50%,#6c6c6c,#00000000 50%),radial-gradient(at 0 100%,#c8c9c8,#00000000 50%),radial-gradient(at 33% 100%,#4d4c4d,#00000000 50%),radial-gradient(at 67% 100%,#707470,#00000000 50%),radial-gradient(at 100% 100%,#7d7c7d,#00000000 50%)
• radial-gradient(at 0 0,#515750,#00000000 50%),radial-gradient(at 33% 0,#78787a,#00000000 50%),radial-gradient(at 67% 0,#656765,#00000000 50%),radial-gradient(at 100% 0,#4a4f43,#00000000 50%),radial-gradient(at 0 50%,#525152,#00000000 50%),radial-gradient(at 33% 50%,#d1d2d0,#00000000 50%),radial-gradient(at 67% 50%,#818281,#00000000 50%),radial-gradient(at 100% 50%,#939394,#00000000 50%),radial-gradient(at 0 100%,#2c2b2c,#00000000 50%),radial-gradient(at 33% 100%,#bcbdbb,#00000000 50%),radial-gradient(at 67% 100%,#636463,#00000000 50%),radial-gradient(at 100% 100%,#737375,#00000000 50%)
• radial-gradient(at 0 0,#7e1d22,#00000000 50%),radial-gradient(at 33% 0,#82191f,#00000000 50%),radial-gradient(at 67% 0,#943b36,#00000000 50%),radial-gradient(at 100% 0,#9d2b21,#00000000 50%),radial-gradient(at 0 50%,#6b1729,#00000000 50%),radial-gradient(at 33% 50%,#5d2418,#00000000 50%),radial-gradient(at 67% 50%,#824d41,#00000000 50%),radial-gradient(at 100% 50%,#903324,#00000000 50%),radial-gradient(at 0 100%,#692f37,#00000000 50%),radial-gradient(at 33% 100%,#5f3c39,#00000000 50%),radial-gradient(at 67% 100%,#8a6059,#00000000 50%),radial-gradient(at 100% 100%,#8c4e40,#00000000 50%)
• radial-gradient(at 0 0,#637788,#00000000 50%),radial-gradient(at 33% 0,#677289,#00000000 50%),radial-gradient(at 67% 0,#475d8c,#00000000 50%),radial-gradient(at 100% 0,#727684,#00000000 50%),radial-gradient(at 0 50%,#7f7a7f,#00000000 50%),radial-gradient(at 33% 50%,#68697c,#00000000 50%),radial-gradient(at 67% 50%,#696b89,#00000000 50%),radial-gradient(at 100% 50%,#603f48,#00000000 50%),radial-gradient(at 0 100%,#71808f,#00000000 50%),radial-gradient(at 33% 100%,#738499,#00000000 50%),radial-gradient(at 67% 100%,#96a3ad,#00000000 50%),radial-gradient(at 100% 100%,#74848e,#00000000 50%)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-geist-mono) — stack: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace

Font stacks (most used first)

• var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace
• universalSans
• universalSansDisplay
• var(--font-geist-mono)
• inherit
• var(--font-universal-sans)
• var(--font-universal-sans-display)
• universalSans Fallback
• universalSansDisplay Fallback

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 550, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 1px 3px #00000014
• 0 0 0 1px , 0 3px 0
• 0 1px 3px #00000014, 0 0 0 4px hsl(0 0% 4% / .06)
• inset 0 1px 0 rgba(255,255,255,0.03)

Layout

Container max-width: 1280px

Grid columns (largest detected grid): 6

Breakpoints

• 640px
• 768px
• 1024px
• 1100px
• 1280px

Animation & Motion

Transitions

• border-color .15s,box-shadow .15s
• opacity 0.12s ease, transform 0.12s ease
• width 700ms cubic-bezier(0.23, 1, 0.32, 1)
• background-color 90ms linear

Easing curves

• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(0.23, 1, 0.32, 1)

Keyframes

@keyframes gridShimmerH { 0% { transform: translateX(-45cqw); } 100% { transform: translateX(145cqw); } }
@keyframes marquee { 0%{transform:translate(0%)}to{transform:translate(-50%)} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes waveform { 0%,to{height:calc(var(--bar-h,100%) * .4)}50%{height:var(--bar-h,100%)} }
@keyframes fadeIn { 0%{opacity:0}to{opacity:1} }
@keyframes tooltip-in { 0%{opacity:0;transform:scale(.96)translateY(2px)}to{opacity:1;transform:scale(1)translateY(0)} }
@keyframes tooltip-out { 0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.96)translateY(2px)} }
@keyframes border-beam { to{--angle:360deg} }
@keyframes context-menu-in { 0%{opacity:0;transform:scale(.95)translateY(-4px)}to{opacity:1;transform:scale(1)translateY(0)} }
@keyframes context-menu-out { 0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(-4px)} }
@keyframes hero-shimmer { 0%{background-position:150%}to{background-position:-150%} }
@keyframes border-shimmer { 0%{background-position:100%}60%{background-position:0%}to{background-position:0%} }

Animations

• none
• hero-shimmer 3000ms linear 1

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Contact Sales”

button-secondary — sample text: “Try for free”

navigation-link

badge

CTA labels found on page

• Contact Sales
• Try for free
• Get API Access
• View Documentation
• Get API Key
• Read Docs
• Start Building

Effects

• backdrop-filter: blur(12px)
• backdrop-filter: blur(0.5px)
• backdrop-filter: blur(1px)
• backdrop-filter: blur(2px)
• backdrop-filter: blur(4px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --font-geist-mono: "GeistMono", ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
  --font-universal-sans: "universalSans", "universalSans Fallback";
  --font-universal-sans-display: "universalSansDisplay", "universalSansDisplay Fallback";
  --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%;
  --terminal-traffic-red: #ff5f57;
  --terminal-traffic-red-glow: #ff5f572e;
  --terminal-traffic-yellow: #ffbd2e;
  --terminal-traffic-yellow-glow: #ffbd2e1f;
  --terminal-traffic-green: #28c840;
  --terminal-traffic-green-glow: #28c8401f;
  --primary: var(--color-jet);
  --primary-hover: var(--color-umbra);
  --secondary: var(--color-fog);
  --secondary-hover: var(--color-pewter);
  --accent: var(--color-sunset);
  --accent-hover: var(--color-dawn);
  --background: var(--color-white);
  --background-hover: var(--color-dove);
  --foreground: var(--color-jet);
  --foreground-hover: var(--color-umbra);
  --card: var(--color-ivory);
  --border: var(--color-dove);
  --input: var(--color-white);
  --success: 142 71% 45%;
  --warning: 45 93% 47%;
  --error: 0 84% 60%;
  --info: var(--color-breeze);
  --scroll-size: 6px;
  --scroll-track-color: var(--color-white);
  --scroll-thumb-color: var(--color-dove);
  --radius: .5rem;
  --site-header-h: 4rem;
  --site-header-bg: hsl(var(--background) / .85);
  --site-header-blur: 12px;
  --home-hero-pt-gap: 2.25rem;
  --btn-bg: hsl(var(--primary) / 1);
  --btn-border: hsl(var(--primary) / 1);
  --btn-hover: hsl(var(--color-nimbus) / 1);
  --btn-text: hsl(var(--background) / 1);
  --angle: 360deg;
  --terminal-bg: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #FF6308 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 550, 600, 700, 800, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-surface: #F9F8F6;
  --color-text-primary: #0A0A0A;
  --color-border: #D5D9E2;
  --color-primary: #0A0A0A;
  --color-accent: #FF6308;
  --color-secondary: #000000;
  --color-text-secondary: #E1E4E8;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F2EDE5;
  --color-surface-container: #E1E4E8;
  --color-surface-container-high: #E1E1E1;
  --font-sans: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-display: 60px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 22.9px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --font-size-label-sm: 12px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50%;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 0 0 1px , 0 3px 0;
  --shadow-lg: 0 1px 3px #00000014, 0 0 0 4px hsl(0 0% 4% / .06);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-display: -0.01em;
  --tracking-label: .025em;
  --container-max: 1280px;
}