DESIGN.md

Daimon - Design System (UI contract)

The visual language for the Daimon UI: a single gr.Blocks app in app/blocks_ui.py, mounted at / (the offbrand-frontend persona owns this file). Dark theme, three columns, everything bound to real state.json / audit data.

---

1. Principles

1. Show the cage. Every governed trait (L3, L5) is drawn as a bar against its envelope [min, max], with a tick for its declared baseline. The boundary is the point: the persona moves freely, but never past the wall.
2. Truth over spectacle. Every number and every audit line binds to real state.json / mutation_log. Never show a mutation, clamp, or rejection that did not happen.
3. The rejection is the climax. The governance demo (identity-change attempt blocked, envelope overflow clamped) must be the most visually distinct event on screen.
4. One accent for life/governance, one for danger. Restraint everywhere else.

---

2. Color tokens

Defined once in CUSTOM_CSS (app/blocks_ui.py); don't hardcode hex elsewhere.

Role	Token	Value	Use
Background	--bg	#0a0a10	Page background
Panel	--panel / --panel-2	#14141f / #191926	Cards, chat, panels
Border	--panel-border	rgba(255,255,255,0.08)	Card and bar borders
Text	--ink / --ink-dim	#f1f0f7 / #908dab	Primary / muted text
Accent	--accent	#8c7bf6	Bar fill, governance-controlled badge
Baseline	--baseline	#4fd1c5	Baseline tick on bars
Caution	--clamp	#f0a93a	A delta that hit the envelope wall (clamped)
Danger	--block	#f06a6a	Governance-blocked mutation, human-approval badge

---

3. Layout

One screen, three columns side by side, each scrolling independently (the page itself does not scroll):

+----------------------------------------------------------------+
| # Daimon - Governed, self-evolving local AI persona            |
+------------------+---------------------------+-----------------+
| ## Talk to Daimon | ## State vector - 10 layers | ## PERSONA.md |
|                   |                              | - live persona|
| gr.Chatbot        | 10 layer cards:              |               |
| (streaming, via   |  - L1/L2/L4/L6-L10: read-only| ## Audit log  |
|  loop.step_stream)|  - L3/L5: bars [min..max] +  |               |
|                   |    baseline tick + GitHub-   | ## Governance |
| textbox + send    |    style diffs (- before /   | demo          |
|                   |    + after) for recent edits |  [Run] button |
+------------------+---------------------------+-----------------+

• Layer cards carry a badge: human approval required / governance controlled / review required, matching personaxis.md's edit policy per layer.
• Audit log: append-only diff blocks, newest last. A clamped delta gets the --clamp border; a blocked mutation gets --block.
• Governance demo: two real checks against the spec engine (engine/governance_demo.py, no model needed) - an identity-change attempt (blocked) and an envelope overflow (clamped), then a reset to baseline.

---

4. Typography

• UI text: system sans (Gradio default).
• Data/log/values: monospace (--mono, "Roboto Mono").
• No serif, no extra display faces.

---

5. Do / Don't

Do

• Draw L3/L5 traits against their declared envelope and baseline.
• Make the governance rejection visually distinct (--block).
• Bind all visuals to real state.json / mutation_log / PERSONA.md.
• Keep each of the three columns independently scrollable; the page itself never scrolls.

Don't

• Don't fake a mutation, clamp, or rejection.
• Don't add gradients, glows, or colors beyond the tokens above.
• Don't claim the persona is conscious; it is a functional state model.