awesome-design-md 1.0.0

package/design-md/x.ai/DESIGN.md

@@ -0,0 +1,257 @@
+# Design System: xAI
+
+## 1. Visual Theme & Atmosphere
+
+xAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of sophistication. The entire experience is anchored to an almost-black background (`#1f2228`) with pure white text (`#ffffff`), creating a high-contrast, terminal-inspired aesthetic that signals deep technical credibility. There are no gradients, no decorative illustrations, no color accents competing for attention. This is a site that communicates through absence.
+
+The typographic system is split between two carefully chosen typefaces. `GeistMono` (Vercel's monospace font) handles display-level headlines at an extraordinary 320px with weight 300, and also serves as the button typeface in uppercase with tracked-out letter-spacing (1.4px). `universalSans` handles all body and secondary heading text with a clean, geometric sans-serif voice. The monospace-as-display-font choice is the defining aesthetic decision -- it positions xAI not as a consumer product but as infrastructure, as something built by people who live in terminals.
+
+The spacing system operates on an 8px base grid with values concentrated at the small end (4px, 8px, 24px, 48px), reflecting a dense, information-focused layout philosophy. Border radius is minimal -- the site barely rounds anything, maintaining sharp, architectural edges. There are no decorative shadows, no gradients, no layered elevation. Depth is communicated purely through contrast and whitespace.
+
+**Key Characteristics:**
+- Pure dark theme: `#1f2228` background with `#ffffff` text -- no gray middle ground
+- GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury
+- Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding
+- universalSans for body text at 16px/1.5 and headings at 30px/1.2 -- clean contrast
+- Zero decorative elements: no shadows, no gradients, no colored accents
+- 8px spacing grid with a sparse, deliberate scale
+- Heroicons SVG icon system -- minimal, functional
+- Tailwind CSS with arbitrary values -- utility-first engineering approach
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.
+- **Dark Background** (`#1f2228`): The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of `#000000` while maintaining deep darkness.
+
+### Interactive
+- **White Default** (`#ffffff`): Link and interactive element color in default state.
+- **White Muted** (`rgba(255, 255, 255, 0.5)`): Hover state for links -- a deliberate dimming rather than brightening, which is unusual and distinctive.
+- **White Subtle** (`rgba(255, 255, 255, 0.2)`): Borders, dividers, and subtle surface treatments.
+- **Ring Blue** (`rgb(59, 130, 246) / 0.5`): Tailwind's default focus ring color (`--tw-ring-color`), used for keyboard accessibility focus states.
+
+### Surface & Borders
+- **Surface Elevated** (`rgba(255, 255, 255, 0.05)`): Subtle card backgrounds and hover surfaces -- barely visible lift.
+- **Surface Hover** (`rgba(255, 255, 255, 0.08)`): Slightly more visible hover state for interactive containers.
+- **Border Default** (`rgba(255, 255, 255, 0.1)`): Standard border for cards, dividers, and containers.
+- **Border Strong** (`rgba(255, 255, 255, 0.2)`): Emphasized borders for active states and button outlines.
+
+### Functional
+- **Text Primary** (`#ffffff`): All headings, body text, labels.
+- **Text Secondary** (`rgba(255, 255, 255, 0.7)`): Descriptions, captions, supporting text.
+- **Text Tertiary** (`rgba(255, 255, 255, 0.5)`): Muted labels, placeholder text, timestamps.
+- **Text Quaternary** (`rgba(255, 255, 255, 0.3)`): Disabled text, very subtle annotations.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Buttons**: `GeistMono`, with fallback: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
+- **Body / Headings**: `universalSans`, with fallback: `universalSans Fallback`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
+|------|------|------|--------|-------------|----------------|-----------|-------|
+| Display Hero | GeistMono | 320px (20rem) | 300 | 1.50 | normal | none | Extreme scale, monospace luxury |
+| Section Heading | universalSans | 30px (1.88rem) | 400 | 1.20 (tight) | normal | none | Clean sans-serif contrast |
+| Body | universalSans | 16px (1rem) | 400 | 1.50 | normal | none | Standard reading text |
+| Button | GeistMono | 14px (0.88rem) | 400 | 1.43 | 1.4px | uppercase | Tracked monospace, commanding |
+| Label / Caption | universalSans | 14px (0.88rem) | 400 | 1.50 | normal | none | Supporting text |
+| Small / Meta | universalSans | 12px (0.75rem) | 400 | 1.50 | normal | none | Timestamps, footnotes |
+
+### Principles
+- **Monospace as display**: GeistMono at 320px is not a gimmick -- it is the brand statement. The fixed-width characters at extreme scale create a rhythmic, architectural quality that no proportional font can achieve.
+- **Light weight at scale**: Weight 300 for the 320px headline prevents the monospace from feeling heavy or brutish at extreme sizes. It reads as precise, not overwhelming.
+- **Uppercase buttons**: All button text is uppercase GeistMono with 1.4px letter-spacing. This creates a distinctly technical, almost command-line aesthetic for interactive elements.
+- **Sans-serif for reading**: universalSans at 16px/1.5 provides excellent readability for body content, creating a clean contrast against the monospace display elements.
+- **Two-font clarity**: The system uses exactly two typefaces with clear roles -- monospace for impact and interaction, sans-serif for information and reading. No overlap, no ambiguity.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (White on Dark)**
+- Background: `#ffffff`
+- Text: `#1f2228`
+- Padding: 12px 24px
+- Radius: 0px (sharp corners)
+- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
+- Hover: `rgba(255, 255, 255, 0.9)` background
+- Use: Primary CTA ("TRY GROK", "GET STARTED")
+
+**Ghost / Outlined**
+- Background: transparent
+- Text: `#ffffff`
+- Padding: 12px 24px
+- Radius: 0px
+- Border: `1px solid rgba(255, 255, 255, 0.2)`
+- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
+- Hover: `rgba(255, 255, 255, 0.05)` background
+- Use: Secondary actions ("LEARN MORE", "VIEW API")
+
+**Text Link**
+- Background: none
+- Text: `#ffffff`
+- Font: universalSans 16px weight 400
+- Hover: `rgba(255, 255, 255, 0.5)` -- dims on hover
+- Use: Inline links, navigation items
+
+### Cards & Containers
+- Background: `rgba(255, 255, 255, 0.03)` or transparent
+- Border: `1px solid rgba(255, 255, 255, 0.1)`
+- Radius: 0px (sharp) or 4px (subtle)
+- Shadow: none -- xAI does not use box shadows
+- Hover: border shifts to `rgba(255, 255, 255, 0.2)`
+
+### Navigation
+- Dark background matching page (`#1f2228`)
+- Brand logotype: white text, left-aligned
+- Links: universalSans 14px weight 400, `#ffffff` text
+- Hover: `rgba(255, 255, 255, 0.5)` text color
+- CTA: white primary button, right-aligned
+- Mobile: hamburger toggle
+
+### Badges / Tags
+**Monospace Tag**
+- Background: transparent
+- Text: `#ffffff`
+- Padding: 4px 8px
+- Border: `1px solid rgba(255, 255, 255, 0.2)`
+- Radius: 0px
+- Font: GeistMono 12px uppercase, letter-spacing 1px
+
+### Inputs & Forms
+- Background: transparent or `rgba(255, 255, 255, 0.05)`
+- Border: `1px solid rgba(255, 255, 255, 0.2)`
+- Radius: 0px
+- Focus: ring with `rgb(59, 130, 246) / 0.5`
+- Text: `#ffffff`
+- Placeholder: `rgba(255, 255, 255, 0.3)`
+- Label: `rgba(255, 255, 255, 0.7)`, universalSans 14px
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 8px, 24px, 48px
+- The scale is deliberately sparse -- xAI avoids granular spacing distinctions, preferring large jumps that create clear visual hierarchy through whitespace alone
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: full-viewport height with massive centered monospace headline
+- Feature sections: simple vertical stacking with generous section padding (48px-96px)
+- Two-column layouts for feature descriptions at desktop
+- Full-width dark sections maintain the single dark background throughout
+
+### Whitespace Philosophy
+- **Extreme generosity**: xAI uses vast amounts of whitespace. The 320px headline with 48px+ surrounding padding creates a sense of emptiness that is itself a design statement -- the content is so important it needs room to breathe.
+- **Vertical rhythm over horizontal density**: Content stacks vertically with large gaps between sections rather than packing horizontally. This creates a scroll-driven experience that feels deliberate and cinematic.
+- **No visual noise**: The absence of decorative elements, borders between sections, and color variety means whitespace is the primary structural tool.
+
+### Breakpoints
+- 2000px, 1536px, 1280px, 1024px, 1000px, 768px, 640px
+- Tailwind responsive modifiers drive breakpoint behavior
+
+### Border Radius Scale
+- Sharp (0px): Primary treatment for buttons, cards, inputs -- the default
+- Subtle (4px): Occasional softening on secondary containers
+- The near-zero radius philosophy is core to the brand's brutalist identity
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, body content |
+| Surface (Level 1) | `rgba(255,255,255,0.03)` background | Subtle card surfaces |
+| Bordered (Level 2) | `1px solid rgba(255,255,255,0.1)` border | Cards, containers, dividers |
+| Active (Level 3) | `1px solid rgba(255,255,255,0.2)` border | Hover states, active elements |
+| Focus (Accessibility) | `ring` with `rgb(59,130,246)/0.5` | Keyboard focus indicator |
+
+**Elevation Philosophy**: xAI rejects the conventional shadow-based elevation system entirely. There are no box-shadows anywhere on the site. Instead, depth is communicated through three mechanisms: (1) opacity-based borders that brighten on interaction, creating a sense of elements "activating" rather than lifting; (2) extremely subtle background opacity shifts (`0.03` to `0.08`) that create barely-perceptible surface differentiation; and (3) the massive scale contrast between the 320px display type and 16px body text, which creates typographic depth. This is elevation through contrast and opacity, not through simulated light and shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#1f2228` as the universal background -- never pure black `#000000`
+- Use GeistMono for all display headlines and button text -- monospace IS the brand
+- Apply uppercase + 1.4px letter-spacing to all button labels
+- Use weight 300 for the massive display headline (320px)
+- Keep borders at `rgba(255, 255, 255, 0.1)` -- barely visible, not absent
+- Dim interactive elements on hover to `rgba(255, 255, 255, 0.5)` -- the reverse of convention
+- Maintain sharp corners (0px radius) as the default -- brutalist precision
+- Use universalSans for all body and reading text at 16px/1.5
+
+### Don't
+- Don't use box-shadows -- xAI has zero shadow elevation
+- Don't introduce color accents beyond white and the dark background -- the monochromatic palette is sacred
+- Don't use large border-radius (8px+, pill shapes) -- the sharp edge is intentional
+- Don't use bold weights (600-700) for headlines -- weight 300-400 only
+- Don't brighten elements on hover -- xAI dims to `0.5` opacity instead
+- Don't add decorative gradients, illustrations, or color blocks
+- Don't use proportional fonts for buttons -- GeistMono uppercase is mandatory
+- Don't use colored status indicators unless absolutely necessary -- keep everything in the white/dark spectrum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hero headline scales dramatically down |
+| Small Tablet | 640-768px | Slight increase in padding |
+| Tablet | 768-1024px | Two-column layouts begin, heading sizes increase |
+| Desktop | 1024-1280px | Full layout, generous whitespace |
+| Large | 1280-1536px | Wider containers, more breathing room |
+| Extra Large | 1536-2000px | Maximum content width, centered |
+| Ultra | >2000px | Content stays centered, extreme margins |
+
+### Touch Targets
+- Buttons use 12px 24px padding for comfortable touch
+- Navigation links spaced with 24px gaps
+- Minimum tap target: 44px height
+- Mobile: full-width buttons for easy thumb reach
+
+### Collapsing Strategy
+- Hero: 320px monospace headline scales down dramatically (to ~48px-64px on mobile)
+- Navigation: horizontal links collapse to hamburger menu
+- Feature sections: two-column to single-column stacking
+- Section padding: 96px -> 48px -> 24px across breakpoints
+- Massive display type is the first thing to resize -- it must remain impactful but not overflow
+
+### Image Behavior
+- Minimal imagery -- the site relies on typography and whitespace
+- Any product screenshots maintain sharp corners
+- Full-width media scales proportionally with viewport
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Dark (`#1f2228`)
+- Text Primary: White (`#ffffff`)
+- Text Secondary: White 70% (`rgba(255, 255, 255, 0.7)`)
+- Text Muted: White 50% (`rgba(255, 255, 255, 0.5)`)
+- Text Disabled: White 30% (`rgba(255, 255, 255, 0.3)`)
+- Border Default: White 10% (`rgba(255, 255, 255, 0.1)`)
+- Border Strong: White 20% (`rgba(255, 255, 255, 0.2)`)
+- Surface Subtle: White 3% (`rgba(255, 255, 255, 0.03)`)
+- Surface Hover: White 8% (`rgba(255, 255, 255, 0.08)`)
+- Focus Ring: Blue (`rgb(59, 130, 246)` at 50% opacity)
+- Button Primary BG: White (`#ffffff`), text Dark (`#1f2228`)
+
+### Example Component Prompts
+- "Create a hero section on #1f2228 background. Headline in GeistMono at 72px weight 300, color #ffffff, centered. Subtitle in universalSans 18px weight 400, rgba(255,255,255,0.7), max-width 600px centered. Two buttons: primary (white bg, #1f2228 text, 0px radius, GeistMono 14px uppercase, 1.4px letter-spacing, 12px 24px padding) and ghost (transparent bg, 1px solid rgba(255,255,255,0.2), white text, same font treatment)."
+- "Design a card: transparent or rgba(255,255,255,0.03) background, 1px solid rgba(255,255,255,0.1) border, 0px radius, 24px padding. No shadow. Title in universalSans 22px weight 400, #ffffff. Body in universalSans 16px weight 400, rgba(255,255,255,0.7), line-height 1.5. Hover: border changes to rgba(255,255,255,0.2)."
+- "Build navigation: #1f2228 background, full-width. Brand text left (GeistMono 14px uppercase). Links in universalSans 14px #ffffff with hover to rgba(255,255,255,0.5). White primary button right-aligned (GeistMono 14px uppercase, 1.4px letter-spacing)."
+- "Create a form: dark background #1f2228. Label in universalSans 14px rgba(255,255,255,0.7). Input with transparent bg, 1px solid rgba(255,255,255,0.2) border, 0px radius, white text 16px universalSans. Focus: blue ring rgb(59,130,246)/0.5. Placeholder: rgba(255,255,255,0.3)."
+- "Design a monospace tag/badge: transparent bg, 1px solid rgba(255,255,255,0.2), 0px radius, GeistMono 12px uppercase, 1px letter-spacing, white text, 4px 8px padding."
+
+### Iteration Guide
+1. Always start with `#1f2228` background -- never use pure black or gray backgrounds
+2. GeistMono for display and buttons, universalSans for everything else -- never mix these roles
+3. All buttons must be GeistMono uppercase with 1.4px letter-spacing -- this is non-negotiable
+4. No shadows, ever -- depth comes from border opacity and background opacity only
+5. Borders are always white with low opacity (0.1 default, 0.2 for emphasis)
+6. Hover behavior dims to 0.5 opacity rather than brightening -- the reverse of most systems
+7. Sharp corners (0px) by default -- only use 4px for specific secondary containers
+8. Body text at 16px universalSans with 1.5 line-height for comfortable reading
+9. Generous section padding (48px-96px) -- let content breathe in the darkness
+10. The monochromatic white-on-dark palette is absolute -- resist adding color unless critical for function

package/design-md/x.ai/README.md

@@ -0,0 +1,24 @@
+# xAI Inspired Design System
+
+[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) extracted from the public [xai](https://x.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `DESIGN.md` | Complete design system documentation (9 sections) |
+| `preview.html` | Interactive design token catalog (light) |
+| `preview-dark.html` | Interactive design token catalog (dark) |
+
+
+Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the xAI design language.
+
+## Preview
+
+A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
+
+### Dark Mode
+![xAI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-dark-screenshot.png)
+
+### Light Mode
+![xAI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-screenshot.png)

package/design-md/x.ai/preview-dark.html

@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: xAI (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #1f2228;
+    --bg-page: #1f2228;
+    --white: #ffffff;
+    --text-primary: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --text-disabled: rgba(255, 255, 255, 0.3);
+    --border: rgba(255, 255, 255, 0.1);
+    --border-strong: rgba(255, 255, 255, 0.2);
+    --surface: rgba(255, 255, 255, 0.03);
+    --surface-hover: rgba(255, 255, 255, 0.08);
+    --ring-blue: rgb(59, 130, 246);
+    --font-display: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, monospace;
+    --font-body: 'Inter', -apple-system, system-ui, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg-page);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 16px; font-weight: 400; line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* NAV */
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 32px;
+    background: rgba(31,34,40,0.90);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+  }
+  .nav-brand { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px; }
+  .nav-links { display: flex; gap: 24px; list-style: none; }
+  .nav-links a { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
+  .nav-links a:hover { color: var(--text-muted); }
+  .nav-cta {
+    display: inline-block; background: var(--white); color: var(--bg);
+    padding: 8px 16px; border-radius: 0px;
+    font-family: var(--font-display); font-size: 12px; font-weight: 400;
+    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
+    transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.85; }
+
+  /* DARK MODE BADGE */
+  .dark-badge {
+    position: fixed; top: 16px; right: 16px; z-index: 200;
+    background: var(--white); color: var(--bg);
+    font-family: var(--font-display); font-size: 11px; font-weight: 400;
+    padding: 4px 10px; border-radius: 0px;
+    text-transform: uppercase; letter-spacing: 1px;
+  }
+
+  /* HERO */
+  .hero { padding: 96px 32px 80px; text-align: center; }
+  .hero h1 {
+    font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1.20;
+    color: var(--text-primary); margin-bottom: 16px;
+  }
+  .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+  .btn-primary {
+    display: inline-block; background: var(--white); color: var(--bg);
+    padding: 12px 24px; border-radius: 0px; border: none;
+    font-family: var(--font-display); font-size: 14px; font-weight: 400;
+    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
+    cursor: pointer; transition: opacity 0.15s;
+  }
+  .btn-primary:hover { opacity: 0.85; }
+  .btn-ghost {
+    display: inline-block; background: transparent; color: var(--text-primary);
+    padding: 12px 24px; border-radius: 0px;
+    border: 1px solid var(--border-strong);
+    font-family: var(--font-display); font-size: 14px; font-weight: 400;
+    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;
+    cursor: pointer; transition: opacity 0.15s;
+  }
+  .btn-ghost:hover { opacity: 0.6; }
+
+  /* SECTIONS */
+  .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
+  .section-label { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }
+  .section-title { font-family: var(--font-body); font-size: 30px; font-weight: 400; line-height: 1.20; margin-bottom: 32px; color: var(--text-primary); }
+  .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
+
+  /* COLORS */
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
+  .color-swatch { overflow: hidden; border: 1px solid var(--border); }
+  .color-swatch-block { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 10px 12px; }
+  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }
+  .color-swatch-hex { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); }
+  .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
+  .color-group-label { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin: 24px 0 10px; }
+
+  /* TYPOGRAPHY */
+  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-meta { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 8px; }
+
+  /* BUTTONS */
+  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
+  .button-item { text-align: center; }
+  .button-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
+  .btn-text-link {
+    display: inline-block; background: none; color: var(--text-primary);
+    padding: 8px 16px; font-family: var(--font-body); font-size: 16px;
+    font-weight: 400; text-decoration: none; transition: opacity 0.15s;
+  }
+  .btn-text-link:hover { opacity: 0.5; }
+  .badge-mono {
+    display: inline-block; background: transparent; color: var(--text-primary);
+    padding: 4px 8px; font-family: var(--font-display); font-size: 12px;
+    text-transform: uppercase; letter-spacing: 1px;
+    border: 1px solid var(--border-strong);
+  }
+
+  /* CARDS */
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
+  .card {
+    background: var(--surface); padding: 24px;
+    border: 1px solid var(--border);
+    transition: border-color 0.2s ease;
+  }
+  .card:hover { border-color: var(--border-strong); }
+  .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }
+  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.60; }
+  .card-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border: 1px solid var(--border-strong); margin-bottom: 12px; color: var(--text-muted); }
+
+  /* FORMS */
+  .form-group { margin-bottom: 20px; max-width: 400px; }
+  .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; }
+  .form-input {
+    width: 100%; background: transparent; color: var(--text-primary);
+    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;
+    font-family: var(--font-body); font-size: 14px; font-weight: 400; outline: none;
+    transition: border-color 0.15s;
+  }
+  .form-input:focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
+  .form-input--focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
+  .form-textarea {
+    width: 100%; min-height: 80px; background: transparent; color: var(--text-primary);
+    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;
+    font-family: var(--font-body); font-size: 14px; font-weight: 400; resize: vertical; outline: none;
+  }
+  .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+  /* SPACING */
+  .spacing-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
+  .spacing-item { text-align: center; }
+  .spacing-block { background: var(--white); margin-bottom: 6px; height: 28px; }
+  .spacing-value { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }
+
+  /* RADIUS */
+  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
+  .radius-item { text-align: center; }
+  .radius-box { width: 64px; height: 64px; background: var(--white); margin-bottom: 6px; }
+  .radius-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }
+  .radius-context { font-size: 10px; color: var(--text-muted); }
+
+  /* ELEVATION */
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
+  .elevation-card { background: var(--surface); padding: 20px; text-align: center; }
+  .elevation-label { font-size: 14px; font-weight: 400; margin-bottom: 4px; color: var(--text-primary); }
+  .elevation-desc { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); }
+
+  /* FOOTER */
+  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
+  .footer a { color: var(--text-primary); text-decoration: underline; }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 36px; }
+    .nav-links { display: none; }
+    .section { padding: 48px 20px; }
+    .card-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <a class="nav-brand" href="#">awesome-design-md</a>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+  </ul>
+  <a class="nav-cta" href="#">TRY GROK</a>
+</nav>
+<div class="dark-badge">Dark Mode</div>
+
+<section class="hero">
+  <h1>Design System Inspired by xAI</h1>
+  <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.</p>
+  <div class="hero-buttons">
+    <a class="btn-primary" href="#">GET STARTED</a>
+    <a class="btn-ghost" href="#">VIEW DOCUMENTATION</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors">
+  <div class="section-label">01 / Colors</div>
+  <h2 class="section-title">Color Palette</h2>
+
+  <div class="color-group-label">Primary</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228; border-bottom: 1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Background</div><div class="color-swatch-hex">#1f2228</div><div class="color-swatch-role">Page background</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Text, foreground</div></div></div>
+  </div>
+
+  <div class="color-group-label">Text Opacity Scale</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,1);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Primary</div><div class="color-swatch-hex">rgba(255,255,255,1)</div><div class="color-swatch-role">Headings, labels</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.7);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Secondary</div><div class="color-swatch-hex">rgba(255,255,255,0.7)</div><div class="color-swatch-role">Descriptions</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.5);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Muted</div><div class="color-swatch-hex">rgba(255,255,255,0.5)</div><div class="color-swatch-role">Hover state, placeholders</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.3);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Text Disabled</div><div class="color-swatch-hex">rgba(255,255,255,0.3)</div><div class="color-swatch-role">Disabled states</div></div></div>
+  </div>
+
+  <div class="color-group-label">Border & Surface</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.1);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Border Default</div><div class="color-swatch-hex">rgba(255,255,255,0.1)</div><div class="color-swatch-role">Cards, dividers</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.2);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Border Strong</div><div class="color-swatch-hex">rgba(255,255,255,0.2)</div><div class="color-swatch-role">Active, buttons</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.03);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Surface Subtle</div><div class="color-swatch-hex">rgba(255,255,255,0.03)</div><div class="color-swatch-role">Card backgrounds</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#1f2228"><div style="width:100%;height:100%;background:rgba(255,255,255,0.08);"></div></div><div class="color-swatch-info"><div class="color-swatch-name">Surface Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.08)</div><div class="color-swatch-role">Hover surfaces</div></div></div>
+  </div>
+
+  <div class="color-group-label">Functional</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:rgb(59,130,246)"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Ring</div><div class="color-swatch-hex">rgb(59, 130, 246)</div><div class="color-swatch-role">Keyboard focus</div></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography">
+  <div class="section-label">02 / Typography</div>
+  <h2 class="section-title">Typography Scale</h2>
+
+  <div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:300; line-height:1.20; color:var(--text-primary);">Display Hero</div><div class="type-meta">Display Hero -- 320px (shown at 72px) / GeistMono / 300 / 1.50</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-body); font-size:30px; font-weight:400; line-height:1.20; color:var(--text-primary);">Section Heading</div><div class="type-meta">Section Heading -- 30px / universalSans / 400 / 1.20</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; color:var(--text-secondary);">Body text -- xAI is a company working on building artificial intelligence to accelerate human scientific discovery.</div><div class="type-meta">Body -- 16px / universalSans / 400 / 1.50</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-display); font-size:14px; font-weight:400; line-height:1.43; text-transform:uppercase; letter-spacing:1.4px; color:var(--text-primary);">Button Label</div><div class="type-meta">Button -- 14px / GeistMono / 400 / uppercase / 1.4px tracking</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-body); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);">Label / Caption text for supporting information</div><div class="type-meta">Label -- 14px / universalSans / 400 / 1.50</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-body); font-size:12px; font-weight:400; line-height:1.50; color:var(--text-muted);">Small meta text, timestamps, footnotes</div><div class="type-meta">Small -- 12px / universalSans / 400 / 1.50</div></div>
+  <div class="type-sample"><div style="font-family:var(--font-display); font-size:12px; font-weight:400; line-height:1.50; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);">MONOSPACE TAG</div><div class="type-meta">Tag -- 12px / GeistMono / uppercase / 1px tracking</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons">
+  <div class="section-label">03 / Buttons</div>
+  <h2 class="section-title">Button Variants</h2>
+  <div class="button-row">
+    <div class="button-item"><a class="btn-primary" href="#">GET STARTED</a><div class="button-label">Primary</div></div>
+    <div class="button-item"><a class="btn-ghost" href="#">LEARN MORE</a><div class="button-label">Ghost / Outlined</div></div>
+    <div class="button-item"><a class="btn-text-link" href="#">Text Link</a><div class="button-label">Text Link</div></div>
+    <div class="button-item"><span class="badge-mono">API v2</span><div class="button-label">Mono Tag</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards">
+  <div class="section-label">04 / Cards</div>
+  <h2 class="section-title">Card Examples</h2>
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">MODEL</div>
+      <h3>Grok</h3>
+      <p>An AI assistant built to be maximally helpful. Grok has real-time knowledge, a conversational style, and handles complex reasoning tasks.</p>
+    </div>
+    <div class="card" style="border-color: var(--border-strong);">
+      <div class="card-tag">RESEARCH</div>
+      <h3>Understanding AI</h3>
+      <p>Advancing fundamental research in artificial intelligence. Card shown with stronger border for elevated emphasis.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">API</div>
+      <h3>Developer Access</h3>
+      <p>Build with Grok through the xAI API. Enterprise-grade performance with straightforward integration.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms">
+  <div class="section-label">05 / Forms</div>
+  <h2 class="section-title">Form Elements</h2>
+  <div class="form-group"><label class="form-label">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
+  <div class="form-group"><label class="form-label">Endpoint URL</label><input class="form-input form-input--focus" type="text" value="https://api.x.ai/v1/chat"><div class="form-state-label">Focus (blue ring)</div></div>
+  <div class="form-group"><label class="form-label">System Prompt</label><textarea class="form-textarea" placeholder="You are a helpful assistant..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="spacing">
+  <div class="section-label">06 / Spacing</div>
+  <h2 class="section-title">Spacing Scale</h2>
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
+    <div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
+  </div>
+  <p style="font-size:14px; color:var(--text-muted); margin-top:8px;">Base unit: 8px. Scale is deliberately sparse -- large jumps create clear hierarchy through whitespace.</p>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="radius">
+  <div class="section-label">07 / Radius</div>
+  <h2 class="section-title">Border Radius</h2>
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div><div class="radius-context">Primary (buttons, cards)</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Secondary containers</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="elevation">
+  <div class="section-label">08 / Elevation</div>
+  <h2 class="section-title">Elevation (No Shadows)</h2>
+  <div class="elevation-grid">
+    <div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border, no shadow</div></div>
+    <div class="elevation-card" style="background: var(--surface); border: 1px solid var(--border);"><div class="elevation-label">Level 1: Surface</div><div class="elevation-desc">Subtle bg (0.03 opacity)</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 2: Bordered</div><div class="elevation-desc">0.1 opacity border</div></div>
+    <div class="elevation-card" style="border: 1px solid var(--border-strong);"><div class="elevation-label">Level 3: Active</div><div class="elevation-desc">0.2 opacity border</div></div>
+    <div class="elevation-card" style="box-shadow: 0 0 0 2px rgb(59,130,246);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
+  </div>
+  <p style="font-size:14px; color:var(--text-muted); margin-top:16px;">xAI uses no box-shadows. Depth is communicated through border opacity and background opacity only.</p>
+</section>
+
+<footer class="footer">
+  Generated from <a href="https://x.ai/">x.ai</a> DESIGN.md -- awesome-design-md
+</footer>
+
+</body>
+</html>