Palettes & Spectral Families

Colors in the Spwashi architecture are not hard-coded hexadecimal strings. They are projected through semantic handles, environmental resonance, and underlying theme contexts.

Testing Global Contexts

Change the light level and theme family using the root settings controls. The components below respond instantly via data-site-setting-set.

Auto mode uses prefers-color-scheme to match your system preference.

Palette Resonance Dials

The data-spw-palette-resonance attribute biases the active accent tokens (like --active-op-color).

Current theme pack: neutral paper.

This affects how operators glow and how the "resonance" probe identifies conceptual links.

^"environment_synchronization"

Environment Synchronization

Key tokens are mapped to the html element's data-spw-color-mode. In "Auto" mode, these adapt dynamically without a page refresh.

Current Ink

--ink

Primary text and contrast color.

Current Surface

--surface

Base material background color.

Current Line

--line

Structural border and separator color.

Active Accent

--active-op-color

Resonance-driven signature color.

<"spectral_resonance_mapping"

Spectral Resonance Mapping

Resonance modes are semantic biases that shift the site's accent colors toward specific "spectral families." This allows different routes to carry a distinct visual weight.

Route Resonance

The fallback mode. Accents are tied to the specific route family (e.g. blue for editorial, teal for home).

Craft Resonance

Biases towards building and making. Accents use higher saturation teals and ambers.

Software Resonance

A technical, high-contrast mode. Accents are anchored in structural teals and diagnostic violets.

Math Resonance

An abstract, inquiry-driven mode. Uses deep violets and contrastive oranges to highlight relations.

^"spectral_families"

Granular Spectral Families

These are pure pigment tokens from spw-tokens.css. They provide stability for textural backgrounds, SVG charts, and specific art direction where theme-agnostic identity is required.

--pigment-teal-mineral

--pigment-teal-electric

--pigment-amber-resin

--pigment-copper-oxide

--pigment-violet-ink

--pigment-rose-dust

--pigment-clay-red

--pigment-brass-warm

--pigment-paper-cream

--pigment-charcoal-fiber

--pigment-moss-soft

--pigment-lapis-soft

^"palette_projection"

Palette Projection Registry

When an image is surface-promoted, we extract a spectral signature and project it onto the surrounding frame. This ensures that the structural bounds of the site feel connected to the content being displayed.

A readable surface study displaying cool and metallic shades. — cool resonance `#144a59, #cfa16d, #365b8c, #d4d1c3`

Extraction biases background glares and SVG stroke rendering through `--active-op-color`.

Warmly lit architectural study. — warm anchor `#C05C3B, #EAD7B6, #4C3C3B`

Extraction shifts `--surface` bias toward sun-bleached cream, grounding the image in the paper material.