skills.rest
hapy8
hapy8COMMUNITY
Explore all skills by this author →
𝕏@hapyjhaGitHub

xAI-design-analysis

Applies xAI's dark-canvas design tokens and component specs to generate branded UI surfaces.

Updated Sep 9, 2025
Search Tags:#typography#design system#brand identity#design tokens#xai#ui components#dark theme
One-click install
npx skills add https://github.com/hapy8/modern-ball --skill xai-design-analysis-hapy8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xAI-design-analysis
Source: https://github.com/hapy8/modern-ball/tree/main/.agents/skills/X-ai%20design
Command: npx skills add https://github.com/hapy8/modern-ball --skill xai-design-analysis-hapy8

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating xAI's distinctive near-black, pill-button design language requires precise tokens for colors, typography, spacing, and components that are otherwise undocumented and easy to get wrong. ## Core Features & Use Cases - Complete Design Token System: Provides color, typography, spacing, radius, and elevation tokens matching xAI's engineered-cosmic aesthetic, including Universal Sans display styles and Geist Mono eyebrow labels. - Component Specifications: Defines nav bars, outline pill buttons, content cards, text inputs, hero bands, and footers with exact token references. - Use Case: A designer building a landing page for an AI product can apply these tokens to produce a dark-canvas page with white outline pill CTAs, weight-400 display headlines with negative tracking, and hairline-bordered cards that match xAI's visual identity. ## Quick Start Use the xAI design skill to generate a landing page hero section with a 96px headline, mono eyebrow label, and outline pill CTA on a near-black canvas.

Frequently Asked Questions about xAI-design-analysis

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

FAQPage Schema
How do I recreate xAI's website design style?▼

Use a near-black canvas (#0a0a0a) with white outline pill buttons, weight-400 display headlines with negative letter-spacing, and uppercase Geist Mono eyebrow labels. Cards use 8px radius with 1px hairline borders and no shadows.

What fonts does the xAI design system use?▼

The system uses Universal Sans at weight 400 for all display and body text, paired with Geist Mono for uppercase tracked labels. Open-source substitutes include Inter with negative letter-spacing for display and JetBrains Mono or IBM Plex Mono for mono roles.

Does the xAI design system support light mode?▼

No, the brand is dark-canvas only. The specification explicitly prohibits introducing a light-mode counterpart, reserving #0a0a0a as the sole page surface across all components.

What button styles are used in xAI's design language?▼

Every button is a 9999px pill with a 1px translucent-white border on the dark canvas. A white-filled pill is reserved for a single primary Sign Up CTA; all other actions use the outline variant.

When should I not use this dark-only design system?▼

Avoid it for products requiring light-mode accessibility defaults, content-heavy editorial sites needing varied surfaces, or brands whose identity depends on color-rich marketing visuals rather than restrained monochrome minimalism.

Related Skills

Explore More Design & Creative Skills→
gkswls5006-webgkswls5006-web

moai-domain-brand-design

Generate brand-consistent design tokens and accessibility-compliant guidelines for web projects.

Community
Advanced
eesha000009-deveesha000009-dev
1

frontend-design

Transform UI requirements into token-driven frontend code with CSS custom properties and TypeScript components.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
Marcus-BoniMarcus-Boni
1

shadcn

Manage shadcn components and project configurations via CLI.

Community
Advanced