# Spectral
The visual language of MuseHub.
A theme built on opacity-layered surfaces, spectral gradients, and a strict token hierarchy. Every pixel on screen traces back to one file: src/scss/theme/_tokens.scss
---
## Color System
### Background Layers
Four depth levels. Never skip a layer or go backwards.
### Borders
Opacity-based so they work on any surface layer.
### Text
Primary — main content, headings --text-primary
Secondary — labels, metadata --text-secondary
Muted — timestamps, counts --text-muted
Disabled — inactive elements --text-disabled
### Accent & Status
### Gradients
### Domain Colors
code
midi
mist
generic
agent
### Dimension Slots
---
## Typography
### Families
--font-sans — Inter
The quick brown fox jumps over the lazy dog
--font-mono — JetBrains Mono
fn compute_snapshot_id(path: &str) -> Hash {
### Size Scale
Aa --text-3xl · 48px · display
Aa --text-2xl · 32px · hero heading
Aa --text-xl · 24px · page heading
Aa --text-lg · 20px · section heading
Aa --text-md · 17px · emphasized body
Aa --text-base · 15px · body
Aa --text-sm · 13px · secondary text
Aa --text-xs · 11px · micro labels
---
## Components
### Buttons
Primary
Secondary
Ghost
Danger
Small
Disabled
### Badges & Pills
success
warning
danger
accent
agent
default
### Cards & Surfaces
Surface card
--bg-surface
Elevated card
--bg-elevated
Gradient surface
--gradient-surface
### Code Block
fn render_markdown (content: &str ) -> String {
mistune ::html(content)
.pipe(inject_heading_anchors)
}
### Inline Elements
Inline code: compute_snapshot_id()
A blockquote — secondary color, italic, left border.
### Agent Provenance
claude-sonnet-4-6
claude-code · signed
---
## Spacing — 8pt Grid
---
## Architecture
Two-layer SCSS split. A selector **never** appears in both layers.
components/
color · background · border · font-* · letter-spacing · text-transform · transition · animation · box-shadow · opacity · cursor
pages/
display · flex · grid · padding · margin · gap · width · height · overflow · position · align-items · justify-content
---
## Quick Reference
| Token group | Prefix | Count |
|-------------|--------|-------|
| Backgrounds | `--bg-*` | 6 |
| Borders | `--border-*` | 4 |
| Text | `--text-*` | 4 sizes + 8 scale |
| Colors | `--color-*` | 12 |
| Gradients | `--gradient-*` | 6 |
| Domains | `--domain-*` | 5 × 3 |
| Dimensions | `--dim-*` | 5 × 2 |
| Spacing | `--space-*` | 12 |
| Agent | `--agent-*` | 2 |
All tokens defined in [`src/scss/theme/_tokens.scss`](../../src/scss/theme/_tokens.scss).
---
## Icons
All icons are SVG symbols in `_icon_sprite.html` and rendered via the `icon(name, size, class)` Jinja2 global. The sprite is inlined in `base.html` so every page has access.
**Usage**
```jinja2
{{ icon("bot", 16) }} {# default color (currentColor) #}
{{ icon("check", 14, "icon--success") }} {# with extra class #}
```
In plain HTML or docs:
```html
```
**Sizing convention**
| Context | Size |
|---------|------|
| Nav / toolbar button | 16 |
| Inline text (body) | 14 |
| Small meta / badge | 12 |
| Micro / status dot | 10 |
| Hero / empty state | 32–48 |
**Icon catalog**
ban
circle
alert-circle
commit
domain-graph
dot
grid
info
list
menu
plus
share
split
symbols
target
x