spectral-theme.md markdown

382 lines 85.9 KB

sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day 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 1 commit

sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago