@jaimevalasek/aioson 1.5.1 → 1.6.0

package/template/.aioson/locales/pt-BR/agents/setup.md

@@ -31,7 +31,15 @@ Comportamento obrigatorio para projetos existentes com contexto inconsistente:
 NAO refazer o onboarding completo a menos que o usuario solicite explicitamente ou que a ambiguidade restante realmente exija respostas de onboarding.
 
 **Primeiro acesso (arquivo nao existe):**
-Prosseguir com a deteccao e onboarding completo abaixo.
+Verificar se o template AIOSON esta instalado (diretorio `.aioson/` existe). Se o template nao estiver instalado, orientar o usuario a executar o comando de setup:
+
+```bash
+npx @jaimevalasek/aioson setup .
+```
+
+Este unico comando instala o template, detecta automaticamente o framework, infere o idioma do sistema e gera um `project.context.md` inicial. Apos executar, o usuario ativa `@setup` para confirmar ou ajustar o contexto gerado.
+
+Se o template ja estiver instalado mas `project.context.md` nao existir, prosseguir com a deteccao e onboarding completo abaixo.
 
 ## Sequencia obrigatoria
 1. **Verificacao de entrada** (acima) — exibir resumo se project.context.md existir e estiver valido; fazer auto-reparo primeiro se existir mas estiver inconsistente; fluxo completo caso nao exista.
@@ -95,6 +103,30 @@ Se o framework nao for detectado:
 
 ## Onboarding por perfil
 
+### Etapa 0 — Varrer o workspace antes de qualquer pergunta
+
+Antes de qualquer pergunta, executar:
+```bash
+aioson setup:context . --defaults --json
+```
+
+Isso retorna os valores auto-inferidos (framework, idioma do sistema, nome do projeto pelo diretorio, classificacao). Mostrar ao usuario como bloco de confirmacao:
+
+> **Auto-detectado:**
+> - Nome: `{projectName}` (do diretorio)
+> - Framework: `{framework}` (detectado no workspace: `{frameworkInstalled}`)
+> - Tipo: `{projectType}` (inferido do framework)
+> - Classificacao: `{classification}` (pontuacao automatica)
+> - Idioma: `{conversationLanguage}` (do locale do sistema)
+>
+> "Esta correto? Me diga o que mudar ou confirme para continuar."
+
+Aguardar a resposta. Aplicar as correcoes como flags explicitas `--option=value` ao chamar o comando final `aioson setup:context` na Etapa 6.
+
+Se `aioson` nao estiver disponivel (modo direto sem CLI), pular esta etapa e ir direto para a Etapa 1 com inferencia manual do workspace.
+
+> **Observacao:** Se o usuario ja executou `aioson setup .` antes de ativar este agente, `project.context.md` ja foi gerado com os valores auto-detectados. Nesse caso, tratar a Etapa 0 como passagem de confirmacao — mostrar o contexto existente e perguntar apenas o que precisa ser corrigido.
+
 ### Etapa 1 — Entender o projeto
 Fazer UMA pergunta aberta. Nao mostrar formulario:
 > "Descreva o projeto em uma ou duas frases — o que faz e para quem e?"

package/template/.aioson/skills/design/aurora-command-ui/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: aurora-command-ui
+description: Aurora Command UI is a hybrid design system fusing command-center structure with dark glass surfaces over a mandatory aurora gradient substrate. Use it when `design_skill: aurora-command-ui` is set in project.context.md OR when the user explicitly asks for "aurora command", "dark glass dashboard", "glass command center", "aurora dark UI", "teal violet glass", "dark frosted panels", "aurora infra dashboard", or similar. Ideal for SOC platforms, AI tools, security dashboards, dev platforms, CRM with presence, and any product where operational authority and visual depth must coexist. Dark by default with a light aurora option. Do NOT use this skill unless explicitly selected.
+---
+
+# Aurora Command UI
+
+Aurora Command UI lives at the intersection of **military-grade data command center** and **layered glass depth**. It is built from the structural DNA of Cognitive Core (mono rails, dense stat numbers, section zones, command shell) fused with the glass substrate engine of Glassmorphism (backdrop-filter surfaces, aurora gradient, luminous borders, ::before reflections).
+
+The result: a dark glass shell where every panel reveals the aurora gradient underneath, operational data reads with precision, and the interface feels simultaneously tactical and premium.
+
+**This is one visual system.** Never combine it with another design skill.
+
+## Package structure
+
+```text
+.aioson/skills/design/aurora-command-ui/
+  SKILL.md                      ← you are here (load this first)
+  references/
+    art-direction.md            ← intent, 5 expression modes, signature library, anti-generic tests
+    design-tokens.md            ← CSS variables dark + light, glass tokens, typography, spacing, shadows
+    components.md               ← 22+ components (glass variants + command structure)
+    patterns.md                 ← Page layouts: aurora app shell, dashboard, detail, settings, auth, list-detail
+    dashboards.md               ← 5 dashboard presets + chart palette + glass panel rules
+    websites.md                 ← Aurora landing page patterns, hero variants, section patterns
+    motion.md                   ← Animations: glass entrances, aurora-aware motion, command transitions
+```
+
+## Activation rules
+
+- Apply this package **only** when `project.context.md` contains `design_skill: "aurora-command-ui"` or the user explicitly chooses it.
+- If another design skill is selected, do **not** load this package.
+- Never auto-select this skill — always require explicit confirmation.
+- If no skill is set yet, the active agent must ask or confirm before applying.
+
+## Responsibility boundary
+
+This skill defines:
+- Visual direction and aesthetic DNA (dark glass over aurora gradient, command structure)
+- Design tokens (glass surfaces, accent fusion, shadows, typography, spacing, radius)
+- Component vocabulary and anatomy (22+ components — glass shell + command mono rails)
+- Page composition patterns (aurora substrate → glass shell → glass panels → mono section rails → content)
+- Theme switching behavior (dark default / light aurora option)
+
+This skill does **not** decide:
+- Stack (React, Vue, Blade, HTML, etc.)
+- Output format (single file, multi-file, CSS modules, Tailwind, etc.)
+- Icon library choice
+- Whether a theme toggle exists in the product (the agent decides)
+- Animation library (CSS or JS — motion.md is stack-agnostic)
+
+## Loading guide
+
+Always load only what the current task needs:
+
+| Task | Load |
+|---|---|
+| Any UI work | `references/design-tokens.md` |
+| Reusable components | `references/design-tokens.md` + `references/components.md` |
+| Dashboard or admin panel | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` + `references/dashboards.md` |
+| Detail / profile page | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` |
+| Landing page or website | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/websites.md` |
+| Motion / animation | add `references/motion.md` when animation materially improves the result |
+| Full UI build | all seven reference files |
+
+## Visual signature — three pillars
+
+1. **Aurora depth** — A dark aurora gradient (`linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%)`) is the mandatory substrate. Dark glass panels (`rgba(10,14,26,0.65)` with `backdrop-filter`) float over it, revealing the aurora below. The gradient is not decoration — it is structurally required. Remove it and the glass has nothing to reveal.
+2. **Command authority** — Mono uppercase rails on every section. Dense stat numbers. Compact density that communicates operational mastery. The information structure feels like a mission control panel: labeled zones, one focal block per viewport, restrained accent usage.
+3. **Teal-violet fusion** — A single accent gradient `linear-gradient(135deg, #00C8E8, #7C3AED)` used on CTAs, active states, stat numbers, borders, and glow shadows. Teal-electric (`#00C8E8`) is the operational signal. Violet (`#7C3AED`) is the highlight and CTA. They only appear as a gradient pair — never in isolation except for semantic purposes.
+
+## Hybrid DNA
+
+**From cognitive-core-ui (structure side):**
+- Command center shell with mono section rails
+- Dense stat numbers (text-4xl, tabular-nums)
+- Top bar + sidebar + tab navigation structure
+- Compact density system for dashboards and admin
+- Section headers with mono labels and icon rails
+- Sidebar active item: border-left 3px accent + elevated surface
+
+**From glassmorphism-ui (glass side):**
+- `backdrop-filter: blur()` on all major surfaces
+- Aurora gradient substrate — mandatory, not decorative
+- Luminous borders: `rgba(255,255,255,0.10)` on dark glass
+- Top reflection `::before` on every glass card
+- `@supports (backdrop-filter: blur(1px))` fallback always required
+- Glass levels: shell → surface → elevated (3 distinct opacity layers)
+
+**New in aurora-command-ui (hybrid elements):**
+- Dark tinted glass: panels use `rgba(10,14,26,0.65)` — NOT white-transparent. The aurora shows through dark glass, not bright glass.
+- Accent gradient on stat numbers, not just CTAs
+- Teal-electric glow shadows: `0 0 30px rgba(0,200,232,0.12)`
+- Aurora glow behind hero metric panels: `radial-gradient(circle at 50% 0%, rgba(0,200,232,0.08), transparent 70%)`
+
+## Theme system
+
+```html
+<div data-theme="dark">   <!-- or data-theme="light" -->
+```
+
+- **Dark (default)**: All operational products — dashboards, monitoring, security, AI tools, dev platforms. The aurora gradient is deep navy + deep violet. Glass is dark tinted.
+- **Light**: Client-facing apps, institutional variants, content-heavy pages. The aurora gradient is soft lavender-gray. Glass is white tinted.
+
+If the user does not specify: default to **dark with a theme toggle** in the top bar.
+
+## Visual DNA — dark theme
+
+### Aurora substrate (mandatory)
+```css
+background: linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%);
+background-attachment: fixed;
+```
+
+### Dark glass surfaces
+- Shell (sidebar, top bar): `rgba(8, 12, 22, 0.75)` + `backdrop-filter: blur(24px)`
+- Surface cards: `rgba(10, 14, 26, 0.65)` + `backdrop-filter: blur(16px)`
+- Elevated (hover, nested): `rgba(14, 20, 36, 0.75)` + `backdrop-filter: blur(16px)`
+
+### Accents
+- Teal-electric: `#00C8E8` (operational signals, active states, glow)
+- Violet: `#7C3AED` (CTAs, highlights, gradient endpoint)
+- Accent gradient: `linear-gradient(135deg, #00C8E8, #7C3AED)`
+- Glow shadow: `0 0 30px rgba(0,200,232,0.12), 0 8px 24px rgba(0,0,0,0.40)`
+
+### Typography
+- Headings: `Inter`, weight 700, `letter-spacing: -0.02em`
+- Body: `Inter`, weight 400, `line-height: 1.6`
+- Mono rails: `JetBrains Mono`, weight 600, uppercase, `letter-spacing: 0.12em`, `font-size: 0.675rem`
+- Stats: `Inter`, weight 700, `font-size: var(--text-4xl)`, gradient text on hero metric
+
+## Layout structure (aurora app shell)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│            AURORA GRADIENT BACKGROUND (substrate, fixed)        │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │ GLASS TOP BAR — backdrop-blur-lg, glass-shell            │   │
+│  │ [Logo] ─── [Tab Nav Center] ─── [Actions + Toggle]      │   │
+│  ├─────────────────┬────────────────────────────────────────┤   │
+│  │ GLASS SIDEBAR   │  CONTENT AREA                         │   │
+│  │ 200-220px       │  [MONO SECTION HEADER]                │   │
+│  │ backdrop-blur   │  [GLASS STAT CARDS — aurora showing]  │   │
+│  │ glass-shell     │  [GLASS DATA TABLE]                   │   │
+│  │ glass-border    │  [GLASS CHART CONTAINER]              │   │
+│  │ aurora visible  │                                       │   │
+│  │                 │                                       │   │
+│  └─────────────────┴────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Signature details
+- Glass cards always have `::before` top reflection: `linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 50%)`
+- Teal-electric bottom border on active tabs: `3px solid #00C8E8`
+- Sidebar active item: `border-left: 3px solid var(--accent-primary)` + `background: var(--glass-elevated)`
+- Mono section headers always precede content zones
+- Hero stat card: gradient text on main number (`background: var(--accent-gradient); -webkit-background-clip: text`)
+- Every glass container uses `@supports (backdrop-filter: blur(1px))` fallback
+
+## Application rules
+
+- Treat `references/design-tokens.md` as the source of truth for ALL tokens.
+- Treat `references/art-direction.md` as the source of truth for expression, signature, and anti-generic decisions.
+- The aurora gradient substrate is **non-negotiable** — never place glass panels over a solid background.
+- Dark glass opacity must be enough to reveal the aurora. If panels are too opaque, reduce `rgba` alpha toward 0.55.
+- Limit glass nesting to 3 levels max. Each `backdrop-filter` is a composite layer.
+- Always include `@supports (backdrop-filter: blur(1px))` fallbacks.
+- Mono rails are the structural backbone — use them for section headers, stat labels, and metadata rails ONLY. Do not mono-label paragraphs, nav links, or body copy.
+- The teal-violet gradient is the single accent family. Do not introduce secondary accent colors.
+- Never combine this package with `cognitive-core-ui`, `glassmorphism-ui`, `interface-design`, or any other design skill.
+- Adapt code examples to the active stack. Reference snippets are design specifications, not copy-paste code.
+- Accessibility, responsiveness, and production semantics are the agent's responsibility (not this skill).
+
+## Intent before visuals
+
+Before choosing layout, answer all three:
+
+1. Who is the human using this page right now?
+2. What is the main action or decision they must complete?
+3. How should this interface feel in concrete words, not generic labels?
+
+Bad answers:
+- "for users"
+- "manage data"
+- "dark and cool"
+
+Good answers:
+- "security analyst identifying active threats during a live incident"
+- "AI platform admin comparing agent performance across production workloads"
+- "surgical, atmospheric, authoritative — the aurora background communicates depth, the mono rails communicate precision"
+
+## Workflow discipline
+
+1. Confirm the aurora gradient substrate is in place before building any component.
+2. Choose one expression mode from `references/art-direction.md`.
+3. Name one signature glass+command move and repeat it intentionally across the page.
+4. Run the Glass Test: remove `backdrop-filter` from all cards — if the UI looks fine without it, glass is decorative, not structural. Fix: reduce dark glass opacity so the aurora is clearly visible behind panels.
+5. Build from tokens first, then components, then page composition.
+6. Validate state parity: default, hover, active, focus, disabled — all glass token transitions.
+7. Validate contrast: dark glass surfaces must meet WCAG AA. Increase opacity on body text surfaces if needed.
+
+## Non-negotiable quality gates
+
+- The aurora gradient substrate is non-negotiable. No gradient = no glass system.
+- Dark glass must reveal the aurora — opacity must stay at or below 0.75. Do not "solidify" panels.
+- Never use saturated neon colors. Teal-electric is at the saturation limit — do not push beyond it.
+- Never nest more than 3 glass layers (performance + visual confusion).
+- Shadows must be tinted with teal-electric, not plain black. `rgba(0,200,232,0.12)` is the glow baseline.
+- Fallback without `backdrop-filter` must be tested: use `rgba(8,12,22,0.95)` solid for dark, `rgba(255,255,255,0.95)` for light.
+- Every page must pass the **Glass Test**: backdrop-blur is structural, aurora is visible behind panels.
+- Every page must pass the **Command Test**: mono rails appear on section headers, stat labels, and metadata only — not overused.
+- Every page must pass the **Depth Test**: squinting reveals at least 3 depth layers (substrate → glass panel → content).
+- Sameness is failure. If the result looks like a default dark admin with blur added, iterate on composition before finishing.
+
+## Positioning vs parent skills
+
+| Aspect | aurora-command-ui | cognitive-core-ui | glassmorphism-ui |
+|--------|------------------|-------------------|-----------------|
+| Surfaces | Dark glass (rgba dark tinted) | Solid surfaces (bg-surface) | White glass (rgba light tinted) |
+| Background | Aurora gradient (mandatory) | Solid void/base | Lavender aurora gradient |
+| Accent | Teal-electric + Violet gradient | Teal/cyan only | Violet-blue |
+| Default theme | Dark | Dark | Light |
+| Depth model | Blur layers (dark) | Border/shadow depth | Blur layers (light) |
+| Mono usage | Section rails + stats | Section rails + stats | None (uses plain sans) |
+| Best for | SOC, AI platforms, dev tools | Command centers, SaaS | Fintech, mobile, media |
+
+## Delivery modes
+
+### Greenfield
+1. Choose expression mode (Eclipse Command, Deep Analytics, Void Editorial, Quantum Workspace, Crystal Intelligence)
+2. Establish aurora gradient background substrate first
+3. Load relevant references
+4. Apply token scope from `design-tokens.md` (glass tokens are the foundation)
+5. Compose layout from `patterns.md` or `websites.md`
+6. Build components from `components.md`
+
+### Brownfield
+1. Audit existing UI before rewriting
+2. Check if the aurora gradient background can be introduced without breaking existing work
+3. Map Aurora Command tokens onto the existing component library
+4. Add glass surfaces progressively: start with top bar + sidebar, then cards
+5. Consolidate duplicate variants before introducing new ones
+6. Prefer targeted upgrades over full rewrites unless the user asks for a redesign

package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md

@@ -0,0 +1,293 @@
+# Art Direction — Aurora Command UI
+
+Read this file for any page-level work where differentiation matters: dashboards, apps, landing pages, detail pages, and major flows.
+
+This file exists to stop Aurora Command UI from collapsing into the same "dark blur dashboard" every time. The glass system and command structure stay coherent, but the expression must change with the product, the user, and the dominant task.
+
+---
+
+## Core Rule
+
+**Same hybrid system, different expressions.**
+
+Keep the Aurora Command DNA:
+- aurora gradient substrate (always — non-negotiable)
+- dark glass surfaces revealing the aurora below
+- teal-electric + violet accent fusion
+- mono section rails (section headers, stat labels, metadata only)
+- command center structural discipline
+
+But do **not** keep the exact same layout, stat row, sidebar density, or glass intensity from product to product.
+
+---
+
+## Mandatory Pre-Build Outputs
+
+Before designing a full page, produce all of these:
+
+1. **Human**
+   The real person using this page right now. Not a persona category — a specific human in a specific moment.
+
+2. **Main action**
+   The one decision, action, or question that matters most on this screen.
+
+3. **Felt quality**
+   Concrete words such as `surgical`, `atmospheric`, `immersive`, `authoritative`, `precise`, `cold`, `elevated`, `focused`.
+   Never use empty labels like `dark and modern`, `clean`, or `glassmorphic`.
+
+4. **Domain vocabulary**
+   At least 5 concepts from the product's world.
+   Example for security: `threat vector`, `signal`, `incident`, `triage`, `posture`.
+   Example for AI platforms: `agent`, `token budget`, `inference`, `pipeline`, `hallucination rate`.
+
+5. **Material world**
+   At least 5 tones or materials that belong to that product world.
+   Example for infra/ops: deep void black, aurora teal glow, electrical violet pulse, graphite panel, amber alert.
+   Example for AI tools: obsidian depth, charged teal, spectral violet, crystalline white, signal amber.
+
+6. **Defaults to avoid**
+   Name 3 obvious choices that would make the result generic.
+   Example: "blur everything at the same opacity", "four equal KPI cards as the opening statement", "teal glow on every surface equally".
+
+7. **Signature move**
+   One memorable glass+command detail that appears in at least 5 places on the page.
+   Example: "gradient stat numbers (teal → violet) in the hero metric card, repeated in chart highlights, progress bar fills, active badge text, and the primary CTA."
+
+If you cannot produce these seven, you are not ready to compose the page.
+
+---
+
+## Expression Modes
+
+Choose **one primary mode** per screen. You may borrow small traits from a secondary mode only after the main expression is clear.
+
+### 1. Eclipse Command
+
+**For:** SOC platforms, infra monitoring, security operations, network command centers, incident response tools.
+
+**Feel:** cold, surgical, exact, high-trust, atmospheric authority.
+
+**User:** security analyst or infra engineer making rapid triage decisions under pressure.
+
+**Composition:**
+- Aurora substrate at deep navy-black end of the spectrum
+- Glass panels dense with real-time signals — alert clusters, live metrics, service health maps
+- Mono section rails everywhere — ACTIVE THREATS / SIGNAL FEED / SERVICE STATUS
+- One dominant threat/signal surface above the fold
+- Sidebar is narrow and utilitarian — icon labels, no decorative padding
+- Teal-electric accent for alert signals, status dots, and live indicators
+- Violet accent for severity escalation, CTA actions, and critical alerts
+
+**Visual cues:**
+- `--glass-blur-md` (16px) on panels — crisp, not atmospheric
+- Tight vertical rhythm (compact density)
+- Alert tape or live status strip as section opener
+- Mono IDs and timestamps as primary metadata rails
+- Semantic red/amber/green for operational health (never for decoration)
+
+**Signature ideas:**
+- Status tape across the top of the main panel showing live signal counts
+- Inset command strip for rapid actions (acknowledge, escalate, assign)
+- Threat heat row with severity-color glass chips
+- Live pulse animation on active threat metrics (glow-pulse at low amplitude)
+
+**Blur level:** `--glass-blur-md` (16px) for panels — visibility over atmosphere.
+
+---
+
+### 2. Deep Analytics
+
+**For:** BI platforms, data warehouses, revenue analytics, financial intelligence, performance reporting.
+
+**Feel:** precise, dense, trustworthy, data-rich, controlled.
+
+**User:** analyst or finance director extracting insight from structured data to support a decision.
+
+**Composition:**
+- Aurora substrate at the deeper indigo/violet end of the spectrum
+- Glass chart containers are the hero — full-width area charts, donut breakdowns, ranked tables
+- Stat row with gradient numbers as the credibility anchor above charts
+- Sidebar holds dimension filters and saved views — compact glass list
+- Gradient fills in all chart areas (teal → transparent area, violet → transparent for secondary)
+- One dominant trend chart above the fold as the main analytical narrative
+
+**Visual cues:**
+- `--glass-blur-md` for chart containers, `--glass-blur-sm` for data rows (visibility)
+- Tabular-nums throughout — numbers must align
+- Chart tooltips as small glass cards (not white boxes)
+- Section headers over every major data zone
+- Gradient accent on the "hero" metric only — not all four stats
+
+**Signature ideas:**
+- Metric strip glass bar (one full-width glass strip with 4-5 metrics inline, dividers glass-border)
+- Hero trend chart with gradient fill revealing aurora below
+- Gradient text only on the principal metric (revenue total, pipeline value, key KPI)
+- Chart area fills that echo the aurora gradient — teal to transparent, not flat fill
+
+**Blur level:** `--glass-blur-md` (16px) for containers, `--glass-blur-sm` (8px) for rows.
+
+---
+
+### 3. Void Editorial
+
+**For:** Dark aurora landing pages, product websites, developer tool marketing, AI company home pages, premium SaaS marketing.
+
+**Feel:** atmospheric, premium, intelligent, aspirational, technically credible.
+
+**User:** prospect or evaluator scanning for whether this product belongs in their world.
+
+**Composition:**
+- Full-viewport aurora hero — gradient pushed toward the deepest end
+- Glass hero card or glass content strip floating over the aurora
+- Asymmetric or split narrative sections — not centered text on every section
+- Gradient text on key headline words
+- Glass feature cards with stagger entrance
+- Mono overlines above hero heading and section titles
+- Proof rail, testimonial glass card, stats strip
+
+**Visual cues:**
+- `--glass-blur-lg` (24px) for hero card and featured glass elements
+- More whitespace between sections than dashboards — `var(--space-20)` to `var(--space-24)`
+- Aurora gradient orbs (decorative blobs, absolute positioned, extreme blur) behind the hero
+- Glass nav that becomes more opaque on scroll
+- One gradient CTA button — primary, large, confident
+
+**Signature ideas:**
+- Aurora orbs visible behind the glass hero card (4 blobs, deep navy → teal → violet)
+- Gradient text only on the power words in the hero headline
+- Glass proof strip (full-width glass bar with social proof metrics)
+- Product theater frame in a glass card with slight rotation
+
+**Blur level:** `--glass-blur-lg` (24px) for hero, `--glass-blur-md` (16px) for feature cards.
+
+---
+
+### 4. Quantum Workspace
+
+**For:** AI development platforms, code editors with AI, ML training dashboards, developer workspace tools, API playgrounds.
+
+**Feel:** immersive, focused, intelligent, enabling, technically saturated.
+
+**User:** developer or ML engineer spending extended time working inside the platform.
+
+**Composition:**
+- Aurora substrate as the persistent atmosphere for a full-screen workspace
+- Glass app shell: top bar + glass sidebar + main work surface + right context panel
+- Main work surface dominates — not a grid of cards but a primary editor/output/canvas area
+- Context panels (metrics, logs, agent status) as glass panels flanking the work surface
+- Mono labels for context rails: MODEL / TOKENS / LATENCY / PIPELINE STEP
+- Violet accent for model selection and primary actions; teal for runtime signals and live status
+
+**Visual cues:**
+- `--glass-blur-sm` (8px) for non-primary panels (performance — this is a working environment)
+- `--glass-blur-md` (16px) for sidebar and top bar
+- Compact density throughout — this is not a marketing dashboard
+- Code/mono typography for output areas and configuration rails
+- Gradient only on active model indicator and primary CTA
+
+**Signature ideas:**
+- Token budget progress bar (teal fill, width animates as tokens consumed)
+- Live inference latency gauge as a glass instrument panel chip
+- Active pipeline step indicator: mono step number + teal border on active step card
+- Status ribbon: RUNNING / IDLE / ERROR / QUEUED — teal/amber/red/gray chips in a glass strip
+
+**Blur level:** `--glass-blur-sm` (8px) primary panels, `--glass-blur-md` (16px) shell elements.
+
+---
+
+### 5. Crystal Intelligence
+
+**For:** AI agent CRM, sales intelligence platforms, contact management with AI enrichment, talent intelligence, account management.
+
+**Feel:** curated, intelligent, elevated, dimensional, trustworthy.
+
+**User:** account manager or analyst working within a rich entity profile — a person, company, or deal.
+
+**Composition:**
+- Aurora substrate at moderate depth — not the deepest void, slightly more luminous
+- Profile header glass card as the focal anchor: avatar + name + stat cards + badge chips
+- Tab navigation within the profile — Properties / Activity / Intelligence / History
+- Detail sections as glass cards in a structured 2-column layout
+- DNA/trait panels with progress bars and tag clusters
+- Relation cards (linked entities) as compact glass mini-cards in a grid
+
+**Visual cues:**
+- `--glass-blur-md` (16px) for all containers
+- Avatar with glass border (luminous rgba white)
+- Gradient text on the "lead stat" (score, value, rank)
+- Progress bars with teal fill for positive metrics, amber/red for risk
+- Mono section headers: INTELLIGENCE PROFILE / ENGAGEMENT SIGNALS / RELATIONS
+
+**Signature ideas:**
+- Profile header glass card with aurora peeking through — identity panel with depth
+- Trait/DNA panel as a visual signature — labeled progress rows with color semantic fills
+- Relation network: compact glass cards in auto-fill grid, each with status badge
+- "Intelligence score" as a circular progress indicator or large gradient stat
+
+**Blur level:** `--glass-blur-md` (16px) throughout — consistency reinforces trust.
+
+---
+
+## Signature Library
+
+These are immediately available for any Aurora Command composition. Pick at least 2 per screen.
+
+| Detail | Usage |
+|--------|-------|
+| Gradient stat numbers (teal → violet) | Hero metrics, KPI cards, principal report numbers |
+| Mono section rail (uppercase, text-xs, tracking-widest) | Every section header, stat label, metadata zone |
+| Top reflection `::before` | Every glass card, modal, sidebar |
+| Teal glow shadow | Active states, featured cards, hero containers |
+| Glass sidebar revealing aurora | App shell, always |
+| Accent gradient on primary CTA | Buttons, key actions, active badges |
+| Status tape above main panel | Ops/monitoring dashboards |
+| Compact alert chip row | Incident feeds, urgency signals |
+| DNA/trait panel with progress rows | Profile pages, entity detail |
+| Aurora orbs behind hero | Landing pages, auth pages |
+| Live pulse on active metric | Real-time dashboards, monitoring |
+| Glass nav deepening on scroll | All website navigation |
+
+---
+
+## Anti-Generic Tests
+
+Run all five before presenting the result.
+
+### Aurora Glass Test
+Remove `backdrop-filter: blur()` from all glass panels. If the UI still looks fine without it, glass is decorative — the aurora is not showing through the panels. Fix: reduce dark glass alpha so the aurora gradient is clearly visible behind every major panel. The aurora must be the "floor" the glass rests on, not just a background hidden behind solid panels.
+
+### Command Test
+Remove all mono labels. If the section structure collapses without them, they are load-bearing. If nothing changes, mono was decorative noise — remove the overuse. Mono rails should appear 4-8 times on a typical dashboard page, not on every text element.
+
+### Depth Test
+Squint your eyes. Can you distinguish: (1) the aurora substrate, (2) the glass panels, (3) the content within panels? If everything blurs into the same dark soup, increase the opacity contrast between the aurora background and the glass panels, or increase blur intensity.
+
+### Gradient Test
+Does the accent gradient appear in a meaningful structural place — not just buttons? It should appear in at least: stat numbers (hero metric), one CTA, one active state (tab underline or sidebar indicator), and a chart fill or progress bar. If it only appears on one button, it's a decoration token, not a signature.
+
+### Domain Test
+Hide the product name. Does the page still feel like it belongs to a specific operational world — security, analytics, AI workspace, or sales intelligence? Or does it feel like "dark SaaS with teal"? If domain identity is absent, push the composition to reflect the product's operational vocabulary.
+
+---
+
+## What Makes Each Mode Distinct
+
+| | Eclipse Command | Deep Analytics | Void Editorial | Quantum Workspace | Crystal Intelligence |
+|---|---|---|---|---|---|
+| Aurora depth | Deepest void (almost black) | Deep indigo | Deep, atmospheric | Moderate (work surface) | Moderate + luminous |
+| Glass blur | blur-md (crisp) | blur-md / blur-sm | blur-lg (atmospheric) | blur-sm / blur-md | blur-md (consistent) |
+| Opening move | Alert/signal cluster | Hero trend chart | Aurora hero + glass card | Work surface dominates | Profile header card |
+| Mono usage | Dense — all metadata rails | Data labels + stats | Hero overline + sections | Context rails | Section headers |
+| Density | High (compact) | High (data-rich) | Low (marketing) | Medium-high (workspace) | Medium |
+| Signature element | Status tape / live signals | Gradient stat numbers | Aurora orbs + glass hero | Token budget / pipeline steps | DNA trait panel |
+
+---
+
+## Non-Negotiable Expression Rules
+
+1. One aurora depth tone, one expression mode, one signature move per page.
+2. The teal-violet gradient belongs to the structural vocabulary — not scattered as decoration.
+3. Mono rails signal operational zone boundaries — overuse destroys the signal.
+4. The aurora substrate must show through the glass — this is the proof of craft.
+5. Background atmosphere supports the operational narrative; it does not replace it.
+6. If the design feels like "dark dashboard with blur filter", push the composition until the aurora and glass relationship is structurally evident.