Spaces:
Sleeping
Sleeping
File size: 3,868 Bytes
f0347b4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | # 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.
|