---
name: alice-ux
version: 1.0.0
description: |
  Design system for building web interfaces that match the Alice aesthetic.
  Two themes available: "Storybook" (whimsical cream canvas, Alice in Wonderland corporate)
  and "Terminal" (dark hacker aesthetic with cyan accents). Includes complete color palettes,
  typography, component patterns, and CSS variables.
---

# Alice UX Design System

Build web interfaces that match the Alice aesthetic. This skill provides two cohesive design themes with complete color palettes, typography guidelines, component patterns, and production-ready CSS.

---

## Quick Reference: Which Theme?

| Theme | Use When | Vibe |
|-------|----------|------|
| **Storybook** | Marketing sites, landing pages, documentation | "Alice in Wonderland Corporate" - warm, whimsical, illustrative |
| **Terminal** | Developer tools, dashboards, technical products | "Hacker Aesthetic" - dark, sleek, professional |

---

# Theme 1: Storybook (Light)

> *"The Illustrated Page"* — Warm paper textures, distinct black outlines, pastel accents, and elegant serif typography. Think vintage storybook meets modern corporate.

## Storybook Color Palette

### Foundation Colors

| Name | Hex | Usage |
|------|-----|-------|
| **Paper Cream** | `#F5F2EC` | Main background (CRITICAL: never use pure white) |
| **Ink Black** | `#1A1A1A` | Primary text & borders (avoid #000000) |

### Accent Colors (The Illustrations)

| Name | Hex | Usage |
|------|-----|-------|
| **Wonderland Pink** | `#D988B1` | Banners, illustration fills, highlights |
| **River Blue** | `#BCE0F5` | Cards, informational backgrounds, water elements |
| **Deep Teal** | `#3E7C8B` | Primary buttons, CTAs |
| **Leaf Green** | `#A8D5BA` | Success states, nature accents |
| **Marigold Yellow** | `#F2D06B` | Signposts, warnings, highlights |

## Storybook Typography

### Headings (The Story)
- **Font Family:** `'Playfair Display', serif` (or Domaine Display)
- **Style:** Large, elegant, mix weights within sentences
- **Example:** "Security, Safety, and *Trust* for the AI Era" (italicize key words)

### Eyebrow Text (The Tech)
- **Font Family:** `'Space Mono', monospace` (or Roboto Mono, IBM Plex Mono)
- **Style:** Uppercase, letter-spacing: 2px, small size
- **Usage:** Labels above headers (e.g., "INNOVATE UNAFRAID")

### Body Text
- **Font Family:** `'Inter', sans-serif` (or Helvetica Now)
- **Style:** Clean, readable for long paragraphs

## Storybook Component Patterns

### The "Ligne Claire" (Clear Line) Style
Everything has a distinct black border — this is the defining visual feature.

### Buttons (Brutalist Boxy)
```css
.btn-storybook {
  background-color: #3E7C8B;
  color: #fff;
  border: 2px solid #1A1A1A;
  box-shadow: 4px 4px 0px #1A1A1A;
  border-radius: 2px;
  padding: 0.75rem 1.5rem;
  font-family: 'Space Mono', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-storybook:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #1A1A1A;
}

.btn-storybook:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #1A1A1A;
}
```

### Cards & Containers
```css
.card-storybook {
  background: #BCE0F5; /* or #D988B1 for pink */
  border: 1.5px solid #1A1A1A;
  padding: 1.5rem;
}

/* Use distinct horizontal lines between sections (like comic strips) */
.section-divider {
  border-bottom: 1.5px solid #1A1A1A;
  margin: 2rem 0;
}
```

### Illustrations Guidelines
- Style: Flat, 2D vector art with consistent black outlines
- Subject Matter: Metaphorical and playful (rabbits, paper boats, signposts)
- Vibe: "Where's Waldo" meets "New Yorker Cartoon"
- Never use: Literal tech imagery (servers, shields, circuits)

## Storybook CSS Variables

```css
:root {
  /* Foundation */
  --alice-bg-paper: #F5F2EC;
  --alice-text-ink: #1A1A1A;

  /* Accents */
  --alice-pink: #D988B1;
  --alice-blue: #BCE0F5;
  --alice-teal: #3E7C8B;
  --alice-green: #A8D5BA;
  --alice-yellow: #F2D06B;

  /* Typography */
  --alice-font-serif: 'Playfair Display', Georgia, serif;
  --alice-font-mono: 'Space Mono', 'Courier New', monospace;
  --alice-font-sans: 'Inter', -apple-system, sans-serif;

  /* Borders & Shadows */
  --alice-border: 1.5px solid #1A1A1A;
  --alice-border-thick: 2px solid #1A1A1A;
  --alice-shadow-hard: 4px 4px 0px #1A1A1A;
  --alice-shadow-hard-lg: 6px 6px 0px #1A1A1A;
}
```

---

# Theme 2: Terminal (Dark)

> *"The Hacker Aesthetic"* — Dark backgrounds, cyan accents, terminal styling, and professional developer tool vibes. Used by Caterpillar and Alice technical products.

## Terminal Color Palette

### Foundation Colors

| Name | Hex | Usage |
|------|-----|-------|
| **Dark** | `#0a0a0f` | Primary background |
| **Darker** | `#050508` | Body/page background |
| **Terminal BG** | `#0d1117` | Code blocks, terminals |
| **Terminal Border** | `#30363d` | Borders, dividers |
| **Light** | `#f8f9fa` | Rarely used (light text on emphasis) |

### Text Colors

| Name | Hex | Usage |
|------|-----|-------|
| **Primary Text** | `#e6edf3` | Main body text |
| **Muted Text** | `#8b949e` | Secondary text, descriptions |
| **Code Text** | `#c9d1d9` | Code, commands |

### Accent Colors

| Name | Hex | Usage |
|------|-----|-------|
| **Alice Blue** | `#00adef` | Primary brand color, buttons, links |
| **Alice Blue Hover** | `#33bef5` | Hover states |
| **Accent Purple** | `#7c3aed` | Gradients, secondary accents |
| **Success Green** | `#10b981` | Success states, safe indicators |
| **Danger Red** | `#ef4444` | Errors, warnings, dangerous |
| **Warning Gold** | `#f59e0b` | Caution, medium severity |

## Terminal Typography

### Headings
- **Font Family:** `'Inter', -apple-system, BlinkMacSystemFont, sans-serif`
- **Weight:** 700-800 (bold/extra-bold)
- **Letter Spacing:** -0.03em (tight)

### Code & Terminal
- **Font Family:** `'JetBrains Mono', monospace`
- **Size:** 0.85-0.9rem for code blocks

### Body Text
- **Font Family:** `'Inter', sans-serif`
- **Weight:** 400-500
- **Line Height:** 1.6

## Terminal Component Patterns

### Gradient Text
```css
.gradient-text {
  background: linear-gradient(135deg, #00adef 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
```

### Primary Button
```css
.btn-terminal {
  background: #00adef;
  color: #000;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-terminal:hover {
  background: #33bef5;
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 173, 239, 0.3);
}
```

### Terminal/Code Block
```css
.terminal {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }

.terminal-body {
  padding: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}

/* Terminal text colors */
.prompt { color: #00adef; }
.command { color: #c9d1d9; }
.output { color: #8b949e; }
.success { color: #10b981; }
.danger { color: #ef4444; }
.warning { color: #f59e0b; }
```

## Terminal CSS Variables

```css
:root {
  /* Foundation */
  --alice-dark: #0a0a0f;
  --alice-darker: #050508;
  --alice-terminal-bg: #0d1117;
  --alice-terminal-border: #30363d;
  --alice-terminal-header: #161b22;

  /* Text */
  --alice-text-primary: #e6edf3;
  --alice-text-muted: #8b949e;
  --alice-text-code: #c9d1d9;

  /* Accents */
  --alice-blue: #00adef;
  --alice-blue-hover: #33bef5;
  --alice-purple: #7c3aed;
  --alice-green: #10b981;
  --alice-red: #ef4444;
  --alice-gold: #f59e0b;

  /* Typography */
  --alice-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --alice-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Effects */
  --alice-glow-blue: 0 10px 40px rgba(0, 173, 239, 0.3);
  --alice-shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
```

# Complete Starter Templates

Use these as starting points for building Alice-themed interfaces.

## Storybook Theme Starter

Create warm, whimsical interfaces with distinct black borders and pastel accents.

## Terminal Theme Starter

Create dark, professional interfaces with cyan accents and terminal styling.

---

# Design Principles

## Storybook Theme Principles
1. **Paper, Not Screens** — Use warm cream backgrounds, never pure white
2. **Ink, Not Pixels** — Every element has distinct black outlines
3. **Story, Not Data** — Use metaphorical illustrations (rabbits, boats) over literal tech imagery
4. **Elegance, Not Flash** — Serif headlines, subtle animations, hard shadows

## Terminal Theme Principles
1. **Dark by Default** — Respect developers' eyes
2. **Cyan is King** — #00adef is the hero color
3. **Terminal Authenticity** — Real macOS window chrome, monospace fonts
4. **Subtle Glow** — Use box-shadow with rgba for that "powered on" feel
5. **Information Hierarchy** — Success green, danger red, warning gold

---

*"Curiouser and curiouser!"* — Alice