Component Options / Aesthetics
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.
New palette work starts as a reference assignment, not a global recolor. A seed should name roles such as field, paper, signal, oxide, or pin, then test them on one route or component before promoting shared tokens.
This route should reward skimming. Read it like a prompt cabinet: each card names a role, a material move, a behavior, and a place to test it before anything becomes a shared token.
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.
Theme Pack Role Map
Theme packs already carry field, surface, signal, marker, and depth. Read them like modes: each pack changes how a component invites, settles, reveals, warns, or resonates while the HTML keeps the structure stable. Each pack entry here distinguishes the component's own identity (its assignment and role) from the esteem it earns only in composition (how it behaves and attends when clustered). New seeds start as inspiration, tested for unique content value before they reduce redundancy or earn promotion — the same discipline that keeps a spatial experience from becoming a sea of undifferentiated glows.
Neutral Paper
The reading standard. Quiet field, paper surface, teal structure, amber lift. Depth stays low so the words can carry the lead.
- pack
neutral-paper- role
- reading baseline
- behavior
- settle
- attention
- read
Oxide Ledger
A cool ledger with warm oxide in the margins. Use it for records, traces, and weathered surfaces that need memory without alarm.
- pack
oxide-ledger- role
- archive depth
- behavior
- reveal
- attention
- compare
Electric Studio
Blue signal, clean edge, bright diagnostic pressure. Focus and resonance come forward without drowning the operator colors.
- pack
electric-studio- role
- signal clarity
- behavior
- resonate
- attention
- compare
Ritual Vellum
Warm vellum, amber line, soft violet undertone. Use it when reveal should feel patient, authored, and a little ceremonial.
- pack
ritual-vellum- role
- ceremonial surface
- behavior
- reveal
- attention
- try
Copper Brace
Forged warmth with a cool teal brace. Copper marks binding and emphasis; paper keeps the hand on the control.
- pack
copper-brace- role
- crafted constraint
- behavior
- warn
- attention
- try
Glass Console
Cool glass for inspectable layers. Let the system show through, but keep the text sharp enough to solo.
- pack
glass-console- role
- inspectable layer
- behavior
- invite
- attention
- try
Reference Color Seeds
These studies are not promoted assets. Each seed should name a role, test one behavior, choose one owner, and leave one result note.
Woven Signal Stack
Deep teal, cream paper, rusted copper, amber signal, ochre fiber. Use it to test field, paper, signal, oxide, and fiber roles on one route before promoting shared palette aliases.
- assignment
design-palette-woven-signal- role
- route-local palette
- behavior
- resonate
- owner
- design route
- result
- untried
Folded Amber Register
Soft paper register, teal mass, amber pane, oxide depth, copper pin. Use it for selected, pinned, or collected states where the marker stays small, legible, and local.
- assignment
component-register-folded-amber- role
- component state marker
- behavior
- reveal
- owner
- component specimens
- result
- untried
RPG Wednesday Veil Table
Teal story field, map paper, gold writing, floating globes, warm table cube. Use it for RPG Wednesday when the page needs shared focus without making every panel a hero image.
- assignment
rpg-veil-table-resonance- role
- route atmosphere
- behavior
- resonate
- owner
- RPG Wednesday
- result
- untried
Rice Paper Vellum Fold
Thick translucent paper, fibrous cream light, curled edge, folded body. Use it for a foreground card that reveals depth softly while keeping text and slots readable.
- assignment
component-vellum-fold-surface- role
- foreground surface
- behavior
- reveal
- owner
- component specimens
- result
- untried
Material Theatre Directions
Some references are useful because they suggest what could be made. Use these directions when a component session needs breadth, wonder, and a lighting cue.
Think in changes of state. Fiber softens the attack. Paper folds the phrase. Broth carries the theme. Copper warms the hit. Glass opens the voicing. Theatre light tells the room when to listen.
Fiber And Paper Art
Treat cards, panels, and captions like folded material: pulp, vellum, thread, deckled edge, hinge, seam, pin, shadow. Keep the take only if the HTML slots read clearer.
fiber-paper-surface-study · material clarity · reveal
Culinary Engineering
Use cooking as component logic: mise en place for slots, reduction for copy, emulsion for unlike media, proofing for patient state, service for the room.
culinary-component-engineering · component method · settle
Theatre Lighting
Use light as behavior: side light for texture, footlight for active state, backlight for depth, blackout for rest, warm focus for the object that matters now.
theatre-lighting-behavior · staged interaction · invite
Spell And Cauldron Hooks
Use these as prompt handles for students of Spw semantics. A spell names a replayable, inspectable move. A cauldron is the holding space for ingredients before the move solidifies. The gesture copy should be plain: tap inspects, hold primes, drag projects, double-click inspects and primes, and keyboard commit follows the same primed path. These hooks make abstract operators concrete and discoverable: curious visitors get immediate reasons to engage; active learners see the progression from gathering (cauldron) to casting (spell). Each hook should still point to a route, component, state, or HTML owner so the learning transfers back into the surface. A concept-cluster frame from an older interface, a generated image, or a small data hash can enter here as ingredients: lighting, palette, material, sensory cue, culinary verb, research domain, dream posture, and the consequence the story or interface should communicate.
Replayable Spell
A small action with memory: ground a route, restore a working set, reveal a card, compare two surfaces, or cast a saved prompt back into the page.
spell[behavior]{repeat.move} · learnability · return
Prompt Cauldron
A holding bowl for ingredients: route, object, material, light, state, constraint, sensory cue, culinary verb, research domain, and result note. Useful when wonder needs a place to gather before it becomes instruction.
cauldron[prompt]{mix.ingredients} · promptability · collect
Concept Cluster Feedback
Use this when an abstract interface sketch or generated image has enough data to deserve continuation. Preserve the label, hash, visual relation, color pressure, sensory words, and research neighbors, then link it to a playable trope or prompt packet.
concept_cluster[render]{light.color.semantic} · story forge · dimensional imagination
Dimension Rail Feedback
A vertical rail of modes can turn one concept through several readable passes: spw, story, debug, query, node, filter, map, color, and reflex. The selected rail item changes which evidence matters while the concept remains stable.
rail[dimension]{select.read.shift} · posture · salience · interface literacy
Sigil With Plain Text
Keep the mark and the label together. The sigil gives rhythm; the text gives auditability. If a learner cannot say what the chip does, the spell has become ornament too soon.
operator[label]{teach.sigil} · HTML clarity · inspect
Daily Practice Ground
Give generativity a landing point: one route, one component, one ingredient, one question, one take. The wonder can be wide if the next move is small.
practice[seed]{wonder.ground} · daily use · settle
Primed Brace Cauldron Demo
Use this specimen when styling interaction hints. The HTML names the consequence first, then lets the brace runtime write live charge state during tap, hold, drag, double-click, and keyboard use.
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
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 Workshop
This is the live instrument. The four resonance modes are not abstract labels — they are distinct visual personalities that re-color operators, probe bars, accent fields, and canvas tints across the entire surface. Click any button below (or in the hero above). The whole page, including the chips and swatches inside this workshop, will shift. Changing resonance is a combinatoric act: salience, clustering, timing, locality, and flow all update together. This is design as mathematics for experiences as a physical dimension — the same moves (with their material semantics) become the basis for dense interactive semantics in spatial or augmented reality, where a "context-led" probe cluster might drive a room's lighting grammar or a gesture's attentional echo. The page itself is the tunable material; the hooks are exploration instruments for learning science and integrated design.
Compose a palette seed
This is the approved pattern for introducing new palette thinking. Name a role, pick a behavior, declare an owner, then test on one surface before promoting tokens.
Copy the attributes onto a frame-panel or image-study. Then test the result on the owner route before proposing a shared token.
Open the full design catalog Open settings (all dials + lab views)
Granular Spectral Families
These are pure pigment tokens from tokens/core.css. They provide stability for textural backgrounds, SVG charts, and specific art direction where theme-agnostic identity is required. (The workshop above demonstrates how resonance modes re-interpret the same underlying hues.)
See all tokens in the design catalog (regenerate after any token promotion).
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. These same seeds and resonance dials are the material basis for modernization: page architecture as tunable substance, not decoration. The combinatoric play of salience, clustering, timing, locality, and flow here is the mathematics of experience as a physical dimension — the same handles become lighting probes, surface response curves, gesture affordances, and attentional flow fields in augmented or virtual reality. Unique material semantics (a pigment as "spatial probe" or "binding warmth") give component utility a clear segue from screen to spatial computing without redundancy; each seed stays distinct in identity while earning compositional esteem only when it earns its place in a scene.
Extraction biases background glares and SVG stroke rendering through --active-op-color. In spatial contexts the same tokens drive probe lights and surface shaders.
Extraction shifts --surface bias toward sun-bleached cream, grounding the image in the paper material. The same grounding becomes floor, table, or horizon hue in a physical experience.