v0.4 · November 2026

Nuphos Design System

Foundations, layout and core components of the Nuphos desktop app.

Principles

Layers, not lines

Separate areas with surface and elevation. No dividers, no accent stripes.

Only agents have faces

Portraits identify agents. Runtimes show their provider mark; chats and tasks carry no portrait.

Reveal in place

Show what is needed at rest. Details appear on hover or focus without changing the size of anything.

Quiet, but responsive

Everything clickable looks clickable and answers with a short, precise response.

Layout

The sidebar sits on the canvas. The workspace is a raised surface with an 8px inset and a 14px radius. Hover the tasks to see details revealed in place.

Search⌘K
New task
Inbox1
Chats
marketing
support
Agents
Support Lead
Engineering Lead
Marketing Lead
Tasks
Competitor Onboarding Analysis2 merged · Claude Code · MacBook Pro
Fix Esc interrupt lagNeeds your input · NUPS-1266
iOS keyboard Return sends1 merged
Competitor Onboarding Analysis

Conversation…

Color

Light

Canvas#F5F4F2
Surface#FCFBF9
Sunken#EEECE8
Text#1C1A17
Text 2#5C5852
Text 3#69645D

Matches nuphos.ai. Primary actions use the text color; there is no separate brand color.

Dark

Canvas#141312
Surface#1A1917
Sunken#272624
Text#F2F0EC
Text 2#B8B4AD
Text 3#A09C95

As warm as the light theme, no warmer. Reads as black.

Status and data

Success#2B7346
Needs you#B83A0A
Data#2F4F7F
Data (dark)#7C9CCB

Status colors read as text on every surface (WCAG AA). Data uses one muted blue; intensity is shown with opacity of the same hue, so charts and heatmaps read as one family on the warm neutrals.

Sidebar

SectionMeaningRow
ChatsChannels the team talks in# mark and channel name
AgentsAgents you keep and work with over timePortrait and the name you gave it; single line
TasksWork you hand outTitle only; state on the right when it matters; details on hover

All rows are 36px with 4px spacing. Portraits 22px. Titles 14px, weight 450. Selected and hover rows change surface only, no shadow. The title marquee starts from anywhere on the row.

Labels: New task, Untitled task, Keep as agent, Move to tasks.

Components

Buttons

One primary per view. 10px radius, pressed scale 97%. Disabled uses the sunken surface rather than a faded fill.

Charts

Single series in the data blue. Further series step down in opacity before adding another hue.

Activity

Five levels of the data blue, from empty to busiest.

Shortcuts

Shown in hover and focus tooltips next to the action name. Search ⌘K is the only shortcut shown at rest.

Motion and icons

Click to compare. Respects reduced motion; nothing loops except a running state.

Icons

Lucide only. 1.75 stroke, round caps, 16, 18 or 20px, text colors only. Provider marks keep their own form and color.

Open items

  • Translations for the new labels.
  • Inbox list: reveal in place.
  • Remaining hard-coded violet on other pages.
  • Runtime label showing computer and subscription.
  • Agent gaze interactions.
  • Full dark theme review.