Skip to content

🎨 Palette: Enhanced documentation UX and accessibility #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Igor Holt (igor-holt) wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Enhanced documentation UX and accessibility #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,8 @@ This journal contains critical UX/accessibility learnings discovered during the
**Learning:** In complex orchestration projects, Mermaid diagrams benefit significantly from visual hierarchy. Distinguishing the "Core" component using specific styling (different colors, thicker borders) provides immediate cognitive relief and helps users identify the primary system anchor within multiple layers.

**Action:** Use Mermaid `style` definitions and distinct node shapes (like double circles `((...))`) for primary architectural components in infrastructure documentation.

## 2026-06-27 - Semantic Mermaid Diagrams
**Learning:** Using semantic node shapes (stadiums for workloads, hexagons for specialized processes) in Mermaid diagrams provides immediate cognitive cues about the nature of system components. Adding explicit titles and dashed subgraph borders further enhances accessibility and visual delineation between architectural layers.

**Action:** Standardize on stadiums `([ ... ])` for cloud-native workloads and hexagons `{{ ... }}` for specialized schedulers or hardware interfaces. Use `--- title: [Text] ---` for diagram titles and `stroke-dasharray: 5 5` for layer borders.

@gemini-code-assist gemini-code-assist Bot Jun 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To ensure compatibility across various Mermaid renderers, it is safer to recommend stroke-dasharray: 5 instead of stroke-dasharray: 5 5. In SVG, a single value is automatically duplicated (e.g., 5 becomes 5, 5), which avoids space-separation parsing issues in Mermaid while achieving the same visual result.

18 changes: 14 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,37 @@ Dual nature—combining bare-metal virtualized hardware management (aSHARD VRAM
## 🏗️ Architecture

```mermaid
---
title: Arbiter Hybrid Scheduling Architecture
---
graph TD
subgraph CloudNative [Cloud Native Layer]
K8s[Kubernetes Cluster]
Workloads([AI Workloads])
K8s([Kubernetes Cluster])
end

subgraph Orchestration [Orchestration Layer]
Arbiter((Arbiter Core))
QS[Quantum Scheduler]
QS{{Quantum Scheduler}}
end

subgraph Infrastructure [Infrastructure Layer]
VP{{aSHARD VRAM Pinning}}
BM[Bare Metal Hardware]
GPU[GPU Resources]
end

Workloads --> K8s
K8s <--> Arbiter
Arbiter <--> QS
Arbiter <--> BM
Arbiter <--> VP
VP <--> BM
BM --- GPU

style Arbiter fill:#f96,stroke-width:4px
style CloudNative stroke-dasharray: 5 5
style Orchestration stroke-dasharray: 5 5
style Infrastructure stroke-dasharray: 5 5
Comment on lines +46 to +48

@gemini-code-assist gemini-code-assist Bot Jun 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using space-separated values like stroke-dasharray: 5 5 in Mermaid style declarations can cause parsing errors in some Mermaid renderers (especially older versions or specific Markdown integrations) because spaces are often used as delimiters or can confuse the parser.

Using stroke-dasharray: 5 is a safer, fully compatible alternative. In SVG, a single value for stroke-dasharray is automatically duplicated (e.g., 5 becomes 5, 5), yielding the exact same dashed visual effect without using spaces.

Suggested change
style CloudNative stroke-dasharray: 5 5
style Orchestration stroke-dasharray: 5 5
style Infrastructure stroke-dasharray: 5 5
style CloudNative stroke-dasharray: 5
style Orchestration stroke-dasharray: 5
style Infrastructure stroke-dasharray: 5

```

## 🚀 Key Features
Expand All @@ -47,7 +57,7 @@ graph TD

## 🧪 Context

`arbiter` was created by **Igor Holt** (AI Architect) as part of the **Genesis Conductor Engine**. It serves as the resource orchestration layer for AI workloads, bridging low-level hardware management with cloud-native scheduling to ensure optimal utilization of specialized compute resources.
`arbiter` was created by **Igor Holt** (AI Architect) as part of the [Genesis Conductor Engine](https://genesisconductor.io "Genesis Conductor Engine - Official Website"). It serves as the resource orchestration layer for AI workloads, bridging low-level hardware management with cloud-native scheduling to ensure optimal utilization of specialized compute resources.

## ⚖️ License

Expand Down