xAI

## Overview

Futuristic and cosmic with a premium, space-age aesthetic. The design feels expansive and mysterious, using dramatic gradients and lighting effects to create depth. The overall tone is sophisticated and cutting-edge, befitting an AI company with cosmic ambitions.

Centered layout with generous whitespace. The design uses a single-column approach with elements centered both horizontally and vertically. Navigation is horizontally distributed across the top, with the main content area featuring a large search input as the focal point.

Uses a 4px base grid with scale: 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 32, 64.

## Colors

### Dark Theme
- **Background Primary** (#1f2228): Main background color for dark theme
- **Text Primary** (#ffffff): Primary text color, navigation, headings
- **Text Secondary** (#7d8187): Secondary text, muted content
- **Deep Black** (#0a0a0a): Deep background elements, overlays
- **Accent Blue** (#2563eb): Interactive elements, links, highlights
- **Border Gray** (#0c0c0b): Subtle borders and dividers

### Light Theme
- **Background Light** (#ffffff): Light theme background
- **Text Dark** (#1f2228): Primary text in light theme
- **Text Muted** (#7d8187): Secondary text in light theme
- **Accent Blue** (#2563eb): Interactive elements, consistent across themes

## Typography
- **Headline Font**: universalSans
- **Body Font**: universalSans
- **Label Font**: universalSans
- **Code Font**: GeistMono

The typography system uses universalSans as the primary typeface across all contexts, with negative letter-spacing on larger sizes (-2px on 80px, -1.2px on 48px) to maintain optical balance. GeistMono serves as the monospace option with increased letter-spacing (1.2-1.4px) for better code readability. The weight remains consistently at 400 across all sizes, relying on size and spacing for hierarchy rather than weight variation.

## Elevation

Depth is created primarily through gradient backgrounds, transparency effects, and layered text rather than traditional shadows. The design uses a single subtle shadow for form elements but relies heavily on opacity and gradient overlays to create visual hierarchy and spatial relationships.

## Components
- **Cosmic Hero Section**: Large gradient background with semi-transparent text overlay and dramatic lighting effects
- **Pill Navigation**: Horizontal navigation with rounded pill-shaped buttons using 9999px border radius
- **Search Input**: Large rounded input field with dark background and subtle borders
- **Announcement Banner**: Bottom-positioned banner with call-to-action button and descriptive text
- **Gradient Text Effect**: Large text with transparency and layered effects creating depth

## Do's and Don'ts
- Do use negative letter-spacing on large text sizes to maintain optical balance
- Don't use font weights other than 400 - rely on size and spacing for hierarchy
- Do maintain high contrast between text and background for accessibility
- Don't overuse the accent blue - reserve it for truly interactive elements
- Do use pill-shaped buttons (9999px radius) for primary actions
- Don't mix border radius styles - stick to either pill or 24px radius
- Do leverage transparency and gradients to create depth rather than shadows
- Don't use more than 3 text sizes in a single interface section