docs: design language is now glassmorphism + gradients

Updates §11 to reflect the shipped app-wide glassmorphism theme (frosted glass over a
gradient field, dark-glass sidebar, gradient primary actions), the animated agent-identity
face, and the Action→Result→Run log review inbox — superseding the original flat language.
The load-bearing seat-state triad is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-16 07:30:32 +03:30
parent dcf345885c
commit 13d01391da
+1 -1
View File
@@ -120,7 +120,7 @@ Design phase complete (product, architecture, access, admin/authoring, UI). **St
## 11. Design language (summary)
A **calm command center**: deep indigo sidebar, light content, color rationed so it always means something. The **seat-state triad is load-bearing** — human = slate, open = amber, AI = indigo — used on avatars, pills, bars, board cards. Teal = approved/good; amber = open/held; red = destructive only. The **autonomy dial** is a recurring color-graded control (draft slate → gated indigo → auto teal). Two trust surfaces get the most polish: **agent identity** (name, voice, work history) and the **review inbox** (with an expandable reasoning trace). Production font: Hanken Grotesk. Full hi-fi mockups exist (see deliverables index).
**Glassmorphism over a gradient field** (shipped 2026-06): frosted-glass surfaces — cards, popovers, sheets, selects, inputs, pills — sit translucent (`backdrop-blur` + hairline borders) over a soft indigo/teal/pink gradient background; the sidebar is dark frosted glass; primary actions carry an indigo→violet gradient. *(This supersedes the original flat "calm command center" language; the central theme lives in `client/src/index.css`, keyed on shadcn `data-slot`s + tokens, so it applies app-wide.)* The **seat-state triad is still load-bearing** — human = slate, open = amber, AI = indigo — on avatars, pills, board cards; teal = approved/good; amber = open/held; red = destructive only. The **autonomy dial** is a color-graded control (draft slate → gated indigo → auto teal). Two trust surfaces get the most polish: **agent identity** — an animated "Companion" face whose expression reflects live run state (idle/thinking/working/held/done/failed) — and the **review inbox**, where each held item reads as **Action → Result → Run log** (latency, skills, tools called, memory hits, product-identity inclusion, raw output, assembled prompt). Production font: Hanken Grotesk. *(Gradient "Team" view is a deliberate fuller-gradient showcase.)*
---