Spaces:
Running
Running
| # 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. | |