DESIGN.md

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