spectral-theme.md markdown

382 lines 85.9 KB

sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 9 days ago

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.

--bg-void

#07070f

--bg-base

#0d1117

--bg-surface

#161b22

--bg-elevated

#1c1c2e

--bg-overlay

#21213a

--bg-hover

#2a2a42

Borders

Opacity-based so they work on any surface layer.

--border-subtle

--border-default

--border-strong

--border-glow

Text

Primary — main content, headings--text-primary

Secondary — labels, metadata--text-secondary

Muted — timestamps, counts--text-muted

Disabled — inactive elements--text-disabled

Accent & Status

--color-accent

accent-link

--color-success

--color-warning

--color-danger

--color-purple

--color-orange

--color-rose

--color-teal

--agent-accent

Gradients

--gradient-spectral

--gradient-agent

--gradient-void

--gradient-surface

Domain Colors

code

midi

mist

generic

agent

Dimension Slots

A — Harmonic

B — Rhythmic

C — Melodic

D — Structural

E — Dynamic

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

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

A link looks like this clickable text

Inline code: compute_snapshot_id()

A blockquote — secondary color, italic, left border.

Agent Provenance

claude-sonnet-4-6 claude-code · signed

Signature verified

Spacing — 8pt Grid

1·4px

2·8px

3·12px

4·16px

5·20px

6·24px

7·32px

8·40px

9·48px

10·64px

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.

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

{{ icon("bot", 16) }}                         {# default color (currentColor) #}
{{ icon("check", 14, "icon--success") }}      {# with extra class #}

In plain HTML or docs:

<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
  <use href="#icon-bot"></use>
</svg>

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

activity

agent-sm

alert

alert-fill

alert-triangle

arrow-left

arrow-right

arrow-up-right

ban

book

book-open

books

bot

branch

branch-sm

bug

check

check-circle

chevron-down

chevron-left

chevron-right

chevrons-left

chevrons-right

chevrons-up

circle

alert-circle

clock-circle

clock-sm

code

braces

commit

copy

corner-right-down

cpu

crosshair

database

document

domain-graph

dot

download

droplet

edit

experiment

external-link

eye

file-code

file-data

file-default

file-text

flame

folder

fork

globe

grid

heart

help-circle

home

inbox

info

info-dot

info-fill

layers

link

list

loader

lock

lock-dot

lock-fill

map-pin

menu

merge

message

message-circle

message-square

moon

music

package

plus

radio

refresh-cw

search

share

shield

snowflake

split

star

sun

symbols

tag

target

terminal

trending-up

twitter

type

user

user-simple

user-sm

users

volume-2

wrench

x

explosion

zap

File History 14 commits

sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 9 days ago

sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago

sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 12 days ago

sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 15 days ago

sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago

sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 30 days ago

sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago

sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 35 days ago

sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago

sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago

sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 36 days ago

sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago

sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago

sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 51 days ago