# Vapor Shell Palette Catalog This catalog defines reusable `app-shell` presets for host projects that consume `theme-vapor`. Apply a preset on the root element: ```html ``` Optional: host project can override shell height without changing preset IDs: ```css :root { --shell-height: 72px; } ``` ## Presets (Header + Accent) | Preset ID | Header core | Accent core | Default shell height | |---|---|---|---| | `miami-sunset` | `#fbe5f8` | `#ff7ec7` | `66px` | | `neon-grid` | `#f5eeff` | `#ff4fd8` | `64px` | | `laser-flamingo` | `#ffe8f4` | `#ff6fae` | `70px` | | `synth-lagoon` | `#e8f6ff` | `#67d7ff` | `62px` | | `mall-soft` | `#fff1f8` | `#ffb5d7` | `68px` | | `hologram-sky` | `#edf9ff` | `#5ce4ff` | `64px` | | `peach-drive` | `#fff0e6` | `#ff9a6a` | `72px` | | `ultraviolet-plaza` | `#f0e8ff` | `#b26dff` | `66px` | | `cyber-mint` | `#ebfff7` | `#57f0c1` | `62px` | ## Token Surface Each preset resolves these tokens in `static/vapor.css`: - `--shell-height` - `--shell-bg-light`, `--shell-bg-dark` - `--shell-border-light`, `--shell-border-dark` - `--shell-accent-light`, `--shell-accent-dark` - `--shell-accent-line-light`, `--shell-accent-line-dark`