Pure-black foundation-model marketing — single sans-serif family, zero illustration, near-zero motion. xAI sells confidence through absence and proves that a category-leading AI company can afford to say nothing more than what it has to say. The taste is in what isn't shown.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in xAI’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Pure-black foundation-model marketing — single sans-serif family, zero illustration, near-zero motion, copy carries 100% of the message. The page is a statement: if you're scared of monochrome, you're not the audience.
Main prompt
Use this capture as a design-language brief for a foundation-model or austere AI product marketing page. Adopt the pure-black canvas, single-family typography system, zero illustration, and near-zero motion approach. Restraint is the entire message — if you're tempted to add something, remove something instead. Apply this only to brands that can sustain the austerity claim.
Layout
Stacked
Content width
Bounded
Framing
Flat
Grid strength
Weak
Dark-first canvas — primary surface #404040 paired with foreground #ffffff doing the bulk of reading-layer work. Accent moments use #0051c3 + #000000 sparingly. Near-black backdrop with restrained warm or cool accents.
Mode strategydark-first
#404040 — primary surface / dominant background
#595959 — primary foreground / reading layer
#0051c3 — first accent — used for CTAs and highlights
#000000 — secondary accent / hover states
#ffffff — tertiary surface / panels
Gradients (paste-ready)
// No gradient extracted — use solid surfaces
Primary family: -apple-system. Mono fallback: JetBrains Mono for code and tabular numerics.
Weight ladder: 300 / 400 / 600. Keep substitutions tight — the captured ladder is the typographic signature.
Display tracking uses negative px (not em) for optical correction at large sizes — typically -0.5 to -1.5px at 48-64px hero scale.
Heading line-height tightens at display sizes (1.0-1.2); body sits at 1.4-1.6. Captions and small UI labels at 1.3.
Tabular numerals mandatory on aligned columns: font-variant-numeric: tabular-nums.
Italic reserved for editorial quotes and emphasis where weight cannot carry — never for product UI labels.
Paragraph max 45-55ch at body size; dense data tables may extend to 65ch with line-height 1.5.
Scale (observed): 3 / 5 / 15 / 23 / 30 / 40 / 60 px. Stay on the scale — no magic numbers.
Container max-width: -Infinitypx. Secondary bounded rails for narrow content clusters at ~480-640px.
Section vertical rhythm: 64-128px on desktop, 40-80px on mobile, scaled by page depth.
Card padding: 16-24px on desktop, 12-16px on mobile.
Gutter values draw from the smaller half of the scale (4 / 8 / 12 / 16 / 24).
Surface styleFlat
Primary elevation is inset 1px border shadow — `box-shadow: <border-color> 0 0 0 1px inset`. Use this before reaching for drop shadow.
Drop shadows stay subtle (opacity 0.05-0.4, blur 1-12px, zero spread). No bloom, no halo.
Layering depth comes from border weight + background tone shift, not stacked shadow.
Focus state uses inset ring at accent color — never an outer glow on form fields.
Techniques
Inset-1px border as surface delimiter
Cards default to a 1px inset border shadow at the surface-divider color. Hover adds a second inset in the accent color. Never switch to outer drop-shadow for hover.
Radii0 / 4 / 8Icon treatmentLinearIcon setsNone
Radius scale: 0 / 4 / 8. Buttons default to 8px, cards to 8px, modals to 8px.
Icon style is linear — stroke-based at 1.5-2px weight; no filled or duotone variants.
Tap targets minimum 44×44 on touch, 40×40 on pointer devices.
Hoveropacity + color shift on interactive elements (160-200ms on ease-out), subtle scale (1.0 → 1.02) on cards and tappable surfaces, rarely above 1.05, background tone shift between surface and surface-elevated on hover
Scroll patterns
Intersection-triggered opacity + translateY reveals (12-24px) on 0.3-0.5s ease-out
Stagger 40-80ms between grouped cards or list items
No parallax beyond 2-4% translateY — subtle depth, never theatrical
Hover and reveal motion use the same primary easing curve to feel consistent across the page.
Segmented controls for binary/ternary choices (pricing toggle, doc version switcher) over toggle switches.
Accordion: single-open for FAQ; multi-open only for deeply nested documentation.
Tooltips: hover + focus with 300-400ms delay, dismiss instantly on blur.
Modals for destructive confirmations; drawers for mobile-only expansions; never nested modals.
Form validation: inline below field on blur; submit disabled until pristine.
Empty states: small icon + one-line copy + primary action link, no illustrations beyond brand pattern.
Loading states: skeleton shimmer for content blocks; inline spinner for button confirm states.
Approachdesktop-first
Desktop-first because the audience is technical teams on wide displays. Mobile adapts the same language without reinventing it — no hamburger-revealed alternate architecture.
Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder.
Container max-width: -Infinitypx. Below 1280, padding compresses but composition holds.
Hide-on-mobile is banned — if a control exists on desktop, it must reach mobile via reflow.
Tap target minimum 44×44 on touch; 40×40 on pointer devices.
Typography scales proportionally: hero 48-64 → 32-40 on tablet → 28-32 on mobile.
Color contrast: foreground #ffffff on background #404040 should meet WCAG AA at minimum (4.5:1 for body, 3:1 for display). Verify with axe-core or Lighthouse.
focus-visible: 2px ring at accent color, never display:none on focus outline. Mandatory on every interactive element.
All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
ARIA labels on icon-only buttons; aria-expanded on collapsibles; aria-live='polite' on toasts.
Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable entirely.
Form errors announced via aria-describedby on the associated input; never color-only signaling.
Screen reader-only content uses sr-only; never display:none for meaningful context.
Framer MotionNext/ImageLucide
Motion library not directly observable in extract. Image handling uses Next/Image (or equivalent) with lazy-loading default. Icons: None.
Motion: motion.div with whileInView and viewport={{ once: true, margin: '-10%' }} for scroll reveals.
Transitions use constants only — define ease and duration as named tokens (e.g. ease.standard, duration.fast).
useReducedMotion guard wraps every animation primitive — no exceptions.
Next/Image with sizes attribute always set; priority only on LCP candidate (hero image).
No canvas, no WebGL, no Lottie unless required by product (e.g. waveform demos).
Apply focus-visible ring at accent color #0051c3 on every interactive element.
Use tabular-nums on aligned numerics; reach for monospace fallback for code and kbd inline.
Stay within the captured spacing scale (3, 5, 15, 23, 30, 40 px) — no magic numbers.
Break body text at 45-55ch; dense tables may extend to 65ch at 13-14px.
Reach for inset 1px border shadows before any drop shadow.
Pass every page through useReducedMotion before shipping.
Default to the primary easing curve for interactive transitions; reserve longer durations for atmospheric beats.
Never introduce a font weight outside the captured ladder — the discipline is the signature.
Never invent durations or easings outside the captured set — pick from the existing scale.
Never use drop shadows above 0.4 opacity or 16px blur — heavy elevation breaks the surface language.
Never introduce a secondary display font without explicit reason — one family + one mono is the boundary.
Never animate height: auto — use measured transforms or scaleY.
Never use em for tracking on display sizes — the px-based scale is an optical constant.
Never apply hover-only affordances — every interaction must be keyboard + screen reader reachable.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS beyond the design system.
Spacing scale: 3 / 5 / 15 / 23 / 30 / 40 / 60 px.
Container max-width: -Infinitypx — do not exceed.
Single font family: -apple-system, plus JetBrains Mono mono fallback.
Weight ladder: 300 / 400 / 600 — no substitutions.
Font weight grep: only 300, 400, 600 appear in computed styles.
Transition timing-function values draw from the captured easing set (ease-out + cubic-bezier(0.4, 0, 0.2, 1)).
Transition duration values draw from {0.15s}s.
Shadow audit: every elevation uses an inset 1px shadow first; drop shadows ≤ 0.4 opacity.
Image audit: loading='lazy' on every non-LCP image; priority only on hero.
Contrast audit: body text on dominant background ≥ 4.5:1 (WCAG AA).
Tap target audit: minimum 44×44 on touch surfaces; 40×40 on pointer.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 2 nodes across 2 levels, shallow to deep by color.
body1
div
Accessibility
Contrast matrix
22 combinations - 16 pass AA - 12 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox17.62
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#EBEBEB
APCA Lc
+94
Use
foreground on background
AaThe quick brown fox17.62
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EBEBEB
bg
#000000
APCA Lc
-95
Use
background on foreground
AaThe quick brown fox10.37
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#404040
bg
#FFFFFF
APCA Lc
+94
Use
foreground on background
AaThe quick brown fox10.37
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#404040
APCA Lc
-98
Use
background on foreground
AaThe quick brown fox8.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#404040
bg
#EBEBEB
APCA Lc
+82
Use
foreground on background
AaThe quick brown fox8.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EBEBEB
bg
#404040
APCA Lc
-85
Use
background on foreground
AaThe quick brown fox7.08
NormalAAANormal text passes AAALargeAAALarge text passes AAA
