# Design System: Nyra Chat

**Product:** Nyra Chat  
**Theme name:** Void Observatory  
**Platform:** Hugging Face Spaces (Gradio + ZeroGPU)

## 1. Visual Theme & Atmosphere

Cinematic void with an intelligent glow. The interface feels dense but breathable: deep black canvas, graphite panels, and a single solar-amber spark that marks brand and primary actions. Premium chat product energy — never default Gradio chrome, never generic purple AI gradients.

Mood words: *nocturnal, sharp, warm-witty, observatory, glass-over-void*.

Signature memory: a floating glass input bar over a slowly drifting amber mesh, with Lucide sparkles as the monogram.

## 2. Color Palette & Roles

| Role | Descriptive name | Hex / value | Functional role |
|---|---|---|---|
| Canvas | Void Black | `#07070A` | Full-app background |
| Surface | Graphite Night | `#121218` | Sidebar, elevated chrome |
| Surface raised | Smoke Glass | `#1A1A22` / `rgba(255,255,255,0.04)` | Assistant bubbles, cards |
| User bubble | Ember Glass | `rgba(245, 166, 35, 0.12)` | User message fill |
| Primary accent | Solar Amber | `#F5A623` | Send, active states, brand |
| Accent glow | Amber Bloom | `#FFB84D` | Focus rings, soft outer glows |
| Text primary | Starlight | `#F4F4F5` | Message body and titles |
| Text muted | Quiet Silver | `#8B8B96` | Hints, timestamps, secondary labels |
| Border | Hairline Mist | `rgba(255,255,255,0.08)` | Dividers, input stroke |
| Danger | Soft Crimson | `#F07178` | Stop / errors |
| Success | Mint Pulse | `#7FD99A` | Online / ready indicator |

## 3. Typography Rules

| Role | Family | Character |
|---|---|---|
| Display / brand | **Syne** | Slightly geometric display; used sparingly for “Nyra” and empty-state headline |
| Body / chat | **IBM Plex Sans** | Technical warmth, excellent readability at 15–16px |
| Code / mono | **IBM Plex Mono** | Fenced code and inline ticks |

Scale:
- Chrome / labels: 12–13px, medium weight, Quiet Silver
- Message body: 15–16px, regular, line-height ~1.55
- Empty-state headline: 24–28px Syne, Starlight
- Tagline: 14px, Quiet Silver

Letter-spacing: slightly open on brand wordmark (+0.02em); normal on body.

## 4. Component Stylings

### Buttons
- **Primary:** solid Solar Amber, text near-black (`#0A0A0B`), generously rounded (~12–999px pill for send), soft amber outer glow on hover, press scale ~0.96
- **Ghost / secondary:** transparent fill, Hairline Mist border, Starlight text
- **Danger:** Soft Crimson outline or fill for stop

### Cards / containers
- Graphite Night surfaces with 1px Hairline Mist edge
- Whisper-soft multi-layer shadow: `0 8px 32px rgba(0,0,0,0.45)`
- Corner roundness: ~16–20px (bubbles), ~14px (panels), ~20px (input shell)

### Inputs / forms
- Glass shell: `rgba(18,18,24,0.72)` + backdrop blur ~16px
- Stroke: Hairline Mist → Amber Bloom on focus
- Placeholder: Quiet Silver

### Chat bubbles
- Assistant: left-aligned Smoke Glass, optional avatar ring with amber hairline
- User: right-aligned Ember Glass
- Enter animation: 8–12px rise + fade, ~200ms ease-out

### Sidebar
- Width 260px, Graphite Night
- Collapses to drawer on mobile
- “New chat” as ghost button with Lucide `message-square-plus`

## 5. Layout Principles

- Full-viewport shell; chat column max-width ~820px centered in main pane
- Top bar ~56px: brand left, utilities right
- Message stream fills remaining height; input sticky at bottom with safe padding
- Vertical rhythm 16–24px between messages
- Suggestion chips in a responsive wrap under empty state
- Whitespace is intentional: avoid cramming chrome; let the void breathe

### Wireframe

```
┌──────────────────────────────────────────────────────────┐
│ [≡]  ✨ Nyra · Chat                        [lang][gear]  │
├────────────┬─────────────────────────────────────────────┤
│ New chat   │                                             │
│ History…   │     empty hero + chips  OR  message stream  │
│            │                                             │
│            │  ┌─────────────────────────────────────┐    │
│            │  │  input · arrow-up send              │    │
│            │  └─────────────────────────────────────┘    │
└────────────┴─────────────────────────────────────────────┘
```

## 6. Motion Language

| Moment | Behavior |
|---|---|
| Page load | Fade-up brand + main column, 400ms ease-out |
| Message enter | TranslateY(10px) → 0 + opacity, 200ms |
| Send press | Scale 0.96 + amber bloom expand |
| Typing | Three soft pulses (staggered dots) |
| Ambient mesh | 60s slow gradient drift on canvas |
| Sidebar | Width/opacity 250ms |

**Reduced motion:** disable ambient drift and non-essential transitions when `prefers-reduced-motion: reduce`.

## 7. Iconography (Lucide)

| Action | Icon |
|---|---|
| Brand | `sparkles` |
| New chat | `message-square-plus` |
| Send | `arrow-up` |
| Stop | `square` |
| Copy | `copy` |
| Settings | `settings-2` |
| Menu | `panel-left` |
| Clear | `trash-2` |
| Language | `languages` |
| Chips | `zap`, `code-2`, `globe`, `lightbulb` |

Stroke: 1.75–2px, currentColor, size 18–20px chrome / 16px inline.

## 8. Brand voice in UI copy

- Product name **Nyra** only — never Grok / xAI
- Bilingual PT + EN labels
- Empty state is a greeting, not a sales pitch
- Errors explain what happened and what to try next

## 9. Implementation notes (Gradio)

- Tokens live in `static/app.css` as CSS variables
- Lucide via CDN + `static/app.js` hydration
- Skin Gradio with `elem_id` / `elem_classes` and aggressive chrome overrides
- Dark `color-scheme` forced for the app shell