Initial commit: Trauma-Informed Interface Design System

- Complete design system with atomic design methodology
- Trauma-informed button system with Alpine.js interactivity
- Emergency exit functionality and safe mode features
- GitHub Pages deployment configuration
- Comprehensive component library and documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: babayomi

.claude/settings.local.json

@@ -0,0 +1,30 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep:*)",
+      "Bash(find:*)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"font-playfair font-bold.*text-grey-\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n -A 2 -B 2 \"h[2-4].*text-azurite-blue-900\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n -C 3 \"text-h[2-4].*text-azurite-blue-900\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(rg:*)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"font-playfair font-bold\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"<h[1-4].*font-playfair\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"class=\"\".*font-playfair.*font-bold\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"text-h[1-4]\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"font-playfair.*text-black\\|font-playfair.*text-gray\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"text-black\\|text-gray\" /Users/abayomi/Documents/uiui/src --type html)",
+      "Bash(npm run dev:*)",
+      "Bash(/Users/abayomi/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg \"bg-azurite-blue text-selenite-white-50.*text-base sm:text-sm\\\"\" src/components/molecules/alert.html)",
+      "Bash(npm run build:*)",
+      "Bash(npm run serve:*)",
+      "Bash(mkdir:*)",
+      "Bash(timeout 5s npm run serve)",
+      "Bash(true)",
+      "Bash(ls:*)",
+      "Bash(git init:*)",
+      "Bash(git remote add:*)",
+      "Bash(git add:*)"
+    ],
+    "deny": []
+  }
+}

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build CSS
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './src'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,88 @@
+# Dependencies
+node_modules/
+package-lock.json
+
+# Build outputs (CSS is tracked since it's needed for deployment)
+# src/output.css is included for deployment
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

CLAUDE.md

@@ -0,0 +1,93 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Build and Development
+- **`npm run dev`** - Start development server with live CSS rebuild
+  - Runs Tailwind CSS in watch mode
+  - Starts live-server on port 3000
+  - Opens /src/index.html automatically
+
+- **`npm run build`** - Production build
+  - Builds CSS from src/input.css to src/output.css
+  - Uses Tailwind CSS to process utility classes
+
+- **`npm run serve`** - Development server only
+  - Runs live-server without CSS rebuild
+  - Useful when focusing on HTML changes
+
+### Testing and Linting
+- No test framework is currently configured
+- No linting tools are set up
+- Consider implementing these for code quality
+
+## Architecture Overview
+
+### Project Structure
+This is a **trauma-informed UI component library** built using:
+- **Atomic Design methodology** - Components organized as atoms, molecules, organisms, pages, and templates
+- **Static HTML/CSS** - No JavaScript framework, pure HTML with Tailwind CSS
+- **Tailwind CSS** - Utility-first CSS with extensive customization for trauma-informed design
+
+### Component Organization
+```
+src/components/
+├── atoms/        # Basic building blocks (buttons, typography, form elements)
+├── molecules/    # Simple combinations of atoms (planned)
+├── organisms/    # Complex UI components (planned)
+├── pages/        # Page-specific compositions (planned)
+└── templates/    # Page layout structures
+```
+
+### Design System
+
+#### Color Palette
+The project uses a mineral-inspired color system:
+- **Azurite Blue** (#284251) - Primary headers, navigation
+- **Chrysocolla Green** (#264c52) - CTAs, success states
+- **Sunstone Orange** (#ce7755) - Warnings, special actions
+- **Rhodochrosite Rose** (#d4a18c) - Emergency exits, emphasis
+- **Selenite White** (#f6f0e9) - Primary background
+
+#### Typography
+- **Playfair Display Black** - Headlines (serif)
+- **Montserrat** - Body text and UI elements (sans-serif)
+- Responsive type scale with mobile, tablet, and desktop sizes
+
+#### Spacing System
+Based on 8px grid: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px)
+
+### Trauma-Informed Design Principles
+
+1. **Safety & Predictability** - Consistent patterns, gentle transitions (300ms), calming colors
+2. **User Control** - Content warnings, format alternatives, clear exit options
+3. **Clear Communication** - Supportive microcopy, non-pressuring language
+4. **Emotional Support** - Break reminders, grounding exercises (planned)
+5. **Spaciousness** - Ample white space, rounded corners, visual breathing room
+
+### Key Conventions
+
+- **Mobile-first responsive design** - All components scale from 320px to desktop
+- **Semantic HTML** with proper ARIA labels for accessibility
+- **BEM-like class naming** using Tailwind utilities
+- **Consistent hover states** with 300ms transitions
+- **Touch-friendly targets** (minimum 44px on mobile)
+
+### Current Implementation Status
+- **Atoms**: Actively developed (buttons, typography, colors, forms, status indicators)
+- **Molecules**: Structure exists, components marked "Coming Soon"
+- **Organisms**: Structure exists, components marked "Coming Soon"
+- **Templates**: Basic page structure template available
+
+### Icon System
+SVG icons organized by category in `/src/assets/icons/`:
+- Accessibility, Content & Learning, Emotional Support, Forms, Navigation, Safety & Support, etc.
+- Designed to be scalable (16px-64px) and trauma-appropriate
+
+### Important Notes
+- No external dependencies beyond Tailwind CSS
+- All components are static HTML - no JavaScript interactivity yet
+- Focus is on establishing design patterns and visual language
+- Emergency Exit button is a core trauma-informed feature present on all pages