skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-x.ai

Apply xAI's design system tokens, typography, and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#branding#design system#design tokens#xai#dark theme#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-x-ai-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-x.ai
Source: https://github.com/deepparser/skills/tree/main/design-x.ai
Command: npx skills add https://github.com/deepparser/skills --skill design-x-ai-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match xAI's dark-first, monospace-driven visual identity requires exact design tokens that are hard to reverse-engineer manually. This Skill provides the complete color palette, typography scale, component styles, and layout rules so generated UI matches xAI's brand without guesswork. ## Core Features & Use Cases - Complete Design Tokens: Exact color values (background #1f2228, white opacity scales), typography specs (GeistMono display, universalSans body), spacing scale, and border radius rules. - Component Specifications: Detailed styling for buttons, cards, navigation, badges, and form inputs, including hover and focus states with xAI's distinctive dim-on-hover behavior. - Light and Dark Previews: Bundled HTML preview files (preview.html and preview-dark.html) that visualize every token and component for visual verification. - Use Case: When asked to build a landing page or dashboard styled like x.ai, invoke this Skill to generate a hero section with a 320px-weight-300 GeistMono headline, uppercase tracked monospace buttons, sharp 0px-radius cards, and zero box shadows. ## Quick Start Use the design-x.ai skill to create a dark landing page for a developer API product styled like xAI's website.

Frequently Asked Questions about design-x.ai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a website like xAI's x.ai site?▼

Use a #1f2228 dark background with pure white text, GeistMono for display headlines and uppercase buttons with 1.4px letter-spacing, and universalSans for body text at 16px/1.5. Keep corners sharp at 0px radius and avoid all box shadows and color accents.

What fonts does the xAI design system use?▼

xAI uses two typefaces: GeistMono (Vercel's monospace font) for display headlines at up to 320px weight 300 and for all button labels, and universalSans for body text, section headings, and labels. The monospace-as-display choice is the core brand statement.

Does the xAI design system support light mode?▼

The system is dark-first, with #1f2228 as the canonical background. The skill includes a light theme preview (preview.html) that inverts the palette to dark text on white, but the dark theme is the native context for the brand.

Why does xAI dim elements on hover instead of brightening them?▼

xAI deliberately dims interactive elements to rgba(255,255,255,0.5) on hover, reversing the conventional brightening pattern. Combined with zero box shadows, depth is communicated through border and background opacity shifts rather than simulated light.

What are the limitations of the xAI design system for UI design?▼

The monochromatic white-on-dark palette prohibits color accents, gradients, and decorative illustrations, so status indicators and data visualization have no native color language. It suits minimal marketing and developer interfaces, not dense dashboards needing semantic color coding.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
monang404monang404
2

frontend-mobile-development-component-scaffold

Generates React and React Native components with TypeScript types, tests, styles, and Storybook stories.

Community
Intermediate
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
RSHVRRSHVR
1

elite-brand-design

Convert brand identity inputs into structured design tokens and style guidelines.

Community
Advanced