| # 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 |
|
|
