Design Catalog

Cross-reference of data-spw-* attributes, CSS clusters, custom-property tokens, and .spw philosophy documents, scanned across the site-facing surfaces. Generated .

442 attributes • 1767 tokens • 87 CSS files • 58 philosophy docs • 139 images

Orphans & gaps

Places where the traceability graph is incomplete.

attrs in CSS, not in HTML (171)
data-spw-allocation data-spw-animation-throttling data-spw-annotation data-spw-annotation-match data-spw-annotation-state data-spw-attention data-spw-author-surface data-spw-beat data-spw-bookmarked data-spw-brace-state data-spw-breadcrumb-menu-changed data-spw-breadcrumb-menu-clarity data-spw-breadcrumb-menu-mode data-spw-breadcrumb-menu-phase data-spw-breadcrumb-menu-state data-spw-breadcrumb-reversible data-spw-breadcrumb-state data-spw-brush-active data-spw-brush-mode data-spw-cadence data-spw-charge-direction data-spw-charge-state data-spw-child-active data-spw-cognitive-handles data-spw-collected data-spw-collection-intention data-spw-color-mode data-spw-component-density data-spw-component-genome data-spw-component-id data-spw-component-kind data-spw-config-domain data-spw-container data-spw-context-match data-spw-contrast-state data-spw-controls-open data-spw-current data-spw-debug data-spw-debug-mode data-spw-delight data-spw-developmental-climate data-spw-developmental-indicators data-spw-deviation data-spw-effect data-spw-effect-stop data-spw-empty data-spw-enhancement-level data-spw-field-wonder data-spw-filters data-spw-gesture data-spw-grain-state data-spw-grain-theme data-spw-grounded data-spw-grounded-in data-spw-guide-kind data-spw-guide-value data-spw-guided data-spw-handle-advanced data-spw-handle-phase data-spw-handle-shell-state data-spw-harmony data-spw-high-contrast data-spw-hint-density data-spw-hint-surface data-spw-hold-state data-spw-image-effect data-spw-image-gesture data-spw-image-input data-spw-image-layout data-spw-image-preview data-spw-image-resonance data-spw-image-state data-spw-inline-form data-spw-inspectability data-spw-interaction-context data-spw-interactivity data-spw-knowledge data-spw-latched data-spw-learning-mode data-spw-learning-surface data-spw-meaning-mode data-spw-medium data-spw-memo-wonder data-spw-menu data-spw-menu-changed data-spw-menu-clarity data-spw-menu-mode data-spw-menu-phase data-spw-menu-pressure data-spw-menu-reversible data-spw-menu-topology data-spw-metric-kind data-spw-module-hydration data-spw-nav-fit data-spw-nav-tokenized data-spw-operator-reversibility data-spw-ornament data-spw-ornament-axis data-spw-ornament-density data-spw-ornament-state data-spw-override-state data-spw-page-arrival data-spw-page-arrival-step data-spw-page-presence data-spw-page-transition-phase data-spw-palette-probe-active data-spw-parallel data-spw-permeability data-spw-persona data-spw-phase data-spw-phase-indicators data-spw-physics data-spw-pinch-scaling data-spw-pinned data-spw-pivot-active data-spw-playing data-spw-popped data-spw-presentation data-spw-pretext-scaffold data-spw-primary-operator data-spw-promo-theme data-spw-publication data-spw-readable data-spw-reading-beat data-spw-reading-beat-role data-spw-reading-groove data-spw-reduce-motion data-spw-region-genome data-spw-relation data-spw-resonance data-spw-resonance-probe data-spw-rhythm data-spw-role-cluster data-spw-room data-spw-route-menu-layout data-spw-route-menu-scope data-spw-route-state data-spw-salience-state data-spw-scroll-cadence data-spw-section-handle data-spw-section-state data-spw-semantic-density data-spw-semantic-owner data-spw-semantics data-spw-sequence-state data-spw-shell-action data-spw-shell-density data-spw-shell-menu-lock data-spw-shell-pointer data-spw-shell-scroll data-spw-shell-scroll-direction data-spw-show-footer data-spw-show-semantic-metadata data-spw-sibling-resonance data-spw-spirit-phase data-spw-stage data-spw-stance data-spw-state data-spw-succession data-spw-surface-kind data-spw-svg-tune-contrast data-spw-svg-tune-motion data-spw-swipe data-spw-theme-pack data-spw-typeset data-spw-viewport data-spw-viewport-tier data-spw-visit-burst data-spw-visited data-spw-wall data-spw-wonder-block-state
attrs in HTML, not in CSS (67)
data-spw-accent-anchor data-spw-accent-colors data-spw-accent-operator data-spw-accent-resonance data-spw-accent-strength data-spw-cluster data-spw-collectability data-spw-consequence data-spw-context-actions data-spw-context-domains data-spw-context-relevance data-spw-demo-kind data-spw-dimension data-spw-form-options data-spw-friction data-spw-image-key data-spw-image-model data-spw-inspect data-spw-inspect-fields data-spw-inspect-mode-group data-spw-kernel data-spw-lattice data-spw-local-note-entry data-spw-local-notes-root data-spw-locality data-spw-materiality data-spw-meaning data-spw-memory data-spw-memory-action data-spw-memory-anchor data-spw-memory-status data-spw-page-hook data-spw-page-hook-label data-spw-page-modes data-spw-page-primary-action-label data-spw-page-responsibility-label data-spw-page-status-label data-spw-page-zone-label data-spw-palette-resonance data-spw-phrase data-spw-potential data-spw-pretext-cache data-spw-pretext-depth data-spw-principle data-spw-projection data-spw-prompt-host data-spw-prompt-teaser data-spw-prompt-title data-spw-query-family data-spw-region data-spw-related-routes data-spw-returnable data-spw-salience data-spw-seed data-spw-seed-package data-spw-serializes-as data-spw-sigil data-spw-spacing data-spw-state-contract data-spw-stateful data-spw-stub data-spw-svg-host data-spw-svg-kind data-spw-svg-motion data-spw-svg-scale data-spw-voice data-spw-wonder
attrs with no philosophy doc (379)
data-spw-accent data-spw-accent-anchor data-spw-accent-colors data-spw-accent-operator data-spw-accent-palette data-spw-accent-resonance data-spw-accent-strength data-spw-active data-spw-affordance data-spw-allocation data-spw-animation-throttling data-spw-attention data-spw-author-mode data-spw-author-surface data-spw-beat data-spw-bookmarked data-spw-brace data-spw-brace-actions data-spw-brace-actions-mounted data-spw-brace-edge data-spw-brace-state data-spw-breadcrumb-bound data-spw-breadcrumb-depth data-spw-breadcrumb-frame data-spw-breadcrumb-menu-changed data-spw-breadcrumb-menu-clarity data-spw-breadcrumb-menu-intent data-spw-breadcrumb-menu-mode data-spw-breadcrumb-menu-phase data-spw-breadcrumb-menu-pressure data-spw-breadcrumb-menu-state data-spw-breadcrumb-menu-topology data-spw-breadcrumb-mode data-spw-breadcrumb-reversible data-spw-breadcrumb-state data-spw-breadcrumb-surface data-spw-breadcrumb-viewport data-spw-brush-active data-spw-brush-mode data-spw-charge data-spw-charge-direction data-spw-charge-label data-spw-charge-state data-spw-child-active data-spw-cluster data-spw-cognitive-handles data-spw-collectability data-spw-color-mode data-spw-component data-spw-component-density data-spw-component-genome data-spw-component-kind data-spw-config-domain data-spw-consequence data-spw-console-state data-spw-container data-spw-context-actions data-spw-context-domains data-spw-context-match data-spw-context-relevance data-spw-contextual-ui-init data-spw-contrast-state data-spw-controls-open data-spw-css-observed-mutations data-spw-current data-spw-delight data-spw-demo-kind data-spw-depth data-spw-dev-server data-spw-developmental-author-label data-spw-developmental-climate data-spw-developmental-indicators data-spw-developmental-label data-spw-dimension data-spw-disclosure data-spw-edge data-spw-effect data-spw-effect-stop data-spw-empty data-spw-enhanced data-spw-enhancement-level data-spw-experiential-init data-spw-experiential-surface data-spw-features data-spw-field-context data-spw-field-operator data-spw-filters data-spw-flow data-spw-focus-lens data-spw-font-scale data-spw-font-size data-spw-font-size-scale data-spw-form-options data-spw-friction data-spw-generated data-spw-gesture data-spw-grain-intensity data-spw-grain-state data-spw-grain-theme data-spw-groundable data-spw-grounded data-spw-grounded-in data-spw-grounded-wonder data-spw-guide-badge-bound data-spw-guide-badge-control-bound data-spw-guide-kind data-spw-guide-previous-liminality data-spw-guide-reason data-spw-guide-value data-spw-guided data-spw-handle data-spw-handle-advanced data-spw-handle-count data-spw-handle-current data-spw-handle-index data-spw-handle-origin data-spw-handle-shell-state data-spw-handle-source data-spw-harmony data-spw-header-opacity data-spw-high-contrast data-spw-hint-density data-spw-hint-surface data-spw-hold-state data-spw-hormone-hint data-spw-hormone-phase data-spw-image-effect data-spw-image-effect-override data-spw-image-gesture data-spw-image-hero data-spw-image-input data-spw-image-key data-spw-image-layout data-spw-image-managed data-spw-image-memory-state data-spw-image-model data-spw-image-preview data-spw-image-primed data-spw-image-prominence data-spw-image-resonance data-spw-image-shape data-spw-image-state data-spw-image-surface data-spw-implementation-mutations data-spw-inline-form data-spw-inspect data-spw-inspect-fields data-spw-inspect-mode-group data-spw-inspect-mounted data-spw-inspectability data-spw-intent data-spw-interactivity data-spw-kernel data-spw-knowledge data-spw-latched data-spw-lattice data-spw-lattice-phase data-spw-learning-mode data-spw-learning-surface data-spw-line-spacing data-spw-loading-original data-spw-local-memory-controls-init data-spw-local-note-entry data-spw-local-notes-root data-spw-locality data-spw-loop-label data-spw-loop-state data-spw-loop-token data-spw-lore-role data-spw-materiality data-spw-meaning-mode data-spw-medium data-spw-memo-wonder data-spw-memory data-spw-memory-action data-spw-memory-anchor data-spw-memory-status data-spw-memory-status-timer data-spw-menu data-spw-menu-changed data-spw-menu-clarity data-spw-menu-mode data-spw-metamaterial data-spw-metric-kind data-spw-module-copy-inferred data-spw-module-hydration data-spw-module-hydration-inferred data-spw-module-inferred data-spw-monospace-variant data-spw-motion-family data-spw-nav-fit data-spw-nav-tokenized data-spw-navigation-spells-init data-spw-operator-family data-spw-operator-intent data-spw-operator-interaction data-spw-operator-reversibility data-spw-operator-saturation data-spw-operator-speech data-spw-ornament data-spw-ornament-axis data-spw-ornament-density data-spw-ornament-state data-spw-override-state data-spw-page-hook data-spw-page-hook-label data-spw-page-modes data-spw-page-primary-action data-spw-page-primary-action-label data-spw-page-responsibility data-spw-page-responsibility-label data-spw-page-seed data-spw-page-status data-spw-page-status-label data-spw-page-zone data-spw-page-zone-label data-spw-palette-probe-active data-spw-palette-resonance data-spw-parallel data-spw-passive-charge data-spw-path-available data-spw-permeability data-spw-persona data-spw-phase data-spw-phase-indicators data-spw-phase-postfix data-spw-phase-prefix data-spw-phrase data-spw-physics data-spw-pinch-scaling data-spw-pinnable data-spw-pinned data-spw-pivot-active data-spw-pivot-value data-spw-playing data-spw-pointer-mode data-spw-popped data-spw-potential data-spw-presentation data-spw-pretext-cache data-spw-pretext-density data-spw-pretext-depth data-spw-pretext-genre data-spw-pretext-influence data-spw-pretext-measure data-spw-pretext-mode data-spw-pretext-ornament data-spw-pretext-preset data-spw-pretext-projection data-spw-pretext-scaffold data-spw-pretext-width-class data-spw-primary-operator data-spw-principle data-spw-probe-wired data-spw-projection data-spw-promo-cta-style data-spw-promo-handles data-spw-promo-kind data-spw-promo-theme data-spw-promotion-cta-style data-spw-promotion-handles data-spw-promotion-kind data-spw-promotion-theme data-spw-prompt-copy-bound data-spw-prompt-host data-spw-prompt-teaser data-spw-prompt-title data-spw-publication data-spw-pulse-ts data-spw-pwa-mode data-spw-query-family data-spw-readable data-spw-reading data-spw-reading-beat data-spw-reading-beat-role data-spw-reading-groove data-spw-realization data-spw-reduce-motion data-spw-reflow-cost data-spw-reflow-reason data-spw-reflow-scope data-spw-region data-spw-region-genome data-spw-region-layer data-spw-region-linked data-spw-relation data-spw-resonance data-spw-resonance-probe data-spw-returnable data-spw-review-active data-spw-review-role data-spw-rhythm data-spw-room data-spw-route-discovery data-spw-route-discovery-count data-spw-route-discovery-layout data-spw-route-discovery-scope data-spw-route-hover data-spw-route-menu-count data-spw-route-menu-label data-spw-route-menu-layout data-spw-route-menu-scope data-spw-route-menu-state data-spw-route-state data-spw-salience data-spw-salience-state data-spw-section-handle data-spw-section-handle-desktop data-spw-seed data-spw-seed-package data-spw-selection data-spw-semantic-density data-spw-semantics data-spw-sequence-state data-spw-serializes-as data-spw-settings-preflight data-spw-shell-action data-spw-shell-density data-spw-shell-disclosure-init data-spw-shell-pointer data-spw-shell-scroll data-spw-shell-scroll-direction data-spw-show-footer data-spw-show-semantic-metadata data-spw-sibling-resonance data-spw-sigil data-spw-sigil-label data-spw-sigil-name data-spw-sigil-prefix data-spw-spacing data-spw-spell-bound data-spw-spirit-phase data-spw-stage data-spw-stance data-spw-state data-spw-state-accent data-spw-state-block data-spw-state-body data-spw-state-contract data-spw-state-dismiss data-spw-state-restore data-spw-state-summary data-spw-state-toggle data-spw-stateful data-spw-stub data-spw-substrate data-spw-succession data-spw-surface-kind data-spw-svg-companion data-spw-svg-host data-spw-svg-kind data-spw-svg-motion data-spw-svg-pointer data-spw-svg-pointer-managed data-spw-svg-pointer-state data-spw-svg-scale data-spw-svg-tune-contrast data-spw-svg-tune-motion data-spw-swappable data-spw-swipe data-spw-textual-role data-spw-theme-pack data-spw-topic data-spw-touch data-spw-typeset data-spw-typeset-surface data-spw-viewport data-spw-viewport-tier data-spw-visit-burst data-spw-visited data-spw-visited-on-page data-spw-visited-surface-count data-spw-voice data-spw-wall data-spw-wonder-block-state data-spw-wonder-memory-managed data-spw-wonder-memory-prev-field-wonder data-spw-wonder-memory-prev-memory-match data-spw-wonder-memory-prev-wonder-state

Attributes

Every data-spw-* attribute that appears anywhere in the repo, with its full cross-reference.

data-spw-role

values: action advisory analysis analytics-policy anatomy artifact boundary broadcast bundle category climate-tuning collaboration community comparison console-contract context contract control conversion coordination debug-contract definition demo-register directory education-gateway enrichment example extension-contract funding future-surface grammar gratitude +67

css: public/css/components/cards/seed-card.css public/css/components/frames.css public/css/effects/cinematic.css public/css/effects/developmental-climate.css public/css/grammar/syntax.css public/css/handles/operators.css public/css/ornament/whimsy.css public/css/systems/pretext-physics.css

js writers: public/js/interface/contextual-ui.js public/js/interface/semantic-chrome.js public/js/modules/rpg-wednesday.js

philosophy: .spw/conventions/annotation-layer.spw .spw/conventions/attention-field.spw .spw/conventions/ornament-contract.spw .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/ontology.spw .spw/reviews/runtime-audit/seams.spw .spw/site.spw

data-spw-context

values: action ambient analysis architecture collaboration comparison education learning orientation participation play publishing reading reference reflection ritual routing safety settings signal

css: public/css/effects/debug.css public/css/effects/grain-texture.css public/css/systems/substrate-ecology.css src/styles/entries/debug.css

philosophy: .spw/conventions/annotation-layer.spw .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/reviews/runtime-audit/seams.spw .spw/surfaces/page-model.spw

data-spw-seed

values: about_kernel_contract about_modular_projection about_public_contract about_semantic_lattice home_climate_tuning home_entry_loops home_kernel_hero home_local_proof_thesis home_operator_field home_promo_wonder_cycle home_reading_layers home_town_library_gateway lore_publication_bridge page_about_about__about_frame page_about_about__about_index page_about_about__attention_register page_about_about__boonhonk_mixer page_about_about__boonhonk_register page_about_about__career_register page_about_about__current_direction page_about_about__documentation_register page_about_about__kernel_lattice_register page_about_about__main_surface page_about_about__nutrition_register page_about_about__panel_1 page_about_about__panel_10 page_about_about__panel_11 page_about_about__panel_12 page_about_about__panel_13 page_about_about__panel_14 page_about_about__panel_15 page_about_about__panel_16 +1060

philosophy: no .spw doc mentions this attribute

data-spw-consequence

values: architecture artifact care conversion coordination decision entry framing identity interaction memory method model navigation next orientation portability projection return routing selection state support translation

philosophy: no .spw doc mentions this attribute

data-spw-locality

values: high medium

philosophy: no .spw doc mentions this attribute

data-spw-collectability

values: high index medium none possible some

philosophy: no .spw doc mentions this attribute

data-spw-wonder

values: accumulation adjacency aggregation approximation arithmetic art belonging boundary branding browser budget calibration change character circulation collection community comparison composition compression configurability consent consequence console constraint continuity counting css cultivation curriculum direction divisibility +68

philosophy: .spw/conventions/annotation-layer.spw .spw/reviews/runtime-audit/seams.spw

data-spw-affordance

values: act adjust build choose collect connect enter inspect learn navigate orient plan practice read reflect revisit reward try tune

css: public/css/effects/cinematic.css

philosophy: no .spw doc mentions this attribute

data-spw-related-routes

values: /cards/#card-types|/coordination/|/now/|/services/|/contact/ /cards/#consensus|/membership/|/now/|/research/|/services/ /cards/|/membership/|/coordination/|/services/#support|/contact/ /cards/|/now/|/membership/|/topics/|/services/ /design/catalog/|/design/experiments/css/|/design/experiments/svg/|/settings/ /design/catalog/|/design/|/public/images/README.md /design/components/|/play/rpg-wednesday/|/services/ /design/experiments/css/|/design/experiments/svg/|/settings/|/design/website/ /design/experiments/svg/|/design/experiments/css/|/topics/software/renderers/|/settings/ /design/|/design/composition/|/design/experiments/css/|/design/experiments/svg/|/design/components/|/play/|/settings/ /design/|/design/runtime/|/design/components/|/design/experiments/css/|/about/website/|/topics/software/spw/|/play/ /design/|/design/runtime/|/design/composition/|/design/website/|/design/experiments/css/|/settings/|/topics/software/renderers/ /design/|/design/website/|/design/density/|/design/slots/ /design/|/design/website/|/design/density/|/design/slots/|/design/affordance/ /design/|/design/website/|/design/density/|/design/slots/|/design/materials/ /design/|/design/website/|/design/experiments/svg/|/settings/|/about/website/ /design/|/design/website/|/design/materials/|/design/affordance/|/design/density/ /design/|/design/website/|/design/materials/|/design/slots/|/design/affordance/ /design/|/design/website/|/design/palettes/|/design/slots/ /now/|/cards/|/membership/|/coordination/|/research/|/about/website/|/design/website/|/design/interaction-design/|/design/accessibility/|/topics/software/pretext/|/topics/software/renderers/|/topics/architecture/|/settings/ /now/|/cards/|/membership/|/research/|/coordination/|/services/|/about/website/|/topics/software/spw/|/topics/craft/|/play/rpg-wednesday/library/|https://texture.website|https://spw.quest /now/|/cards/|/membership/|/research/|/coordination/|/services/|/about/website/|/topics/software/|/topics/software/spw/|/topics/craft/|/play/|/play/rpg-wednesday/library/|/tools/|/tools/character-sheet/|/tools/midjourney/|/settings/|https://texture.website|https://spw.quest /now/|/membership/|/coordination/|/research/|/services/#ask-card /play/rpg-wednesday/cast/|/play/rpg-wednesday/sessions/|/tools/character-sheet/|/tools/midjourney/ /play/rpg-wednesday/sessions/|/play/rpg-wednesday/cast/|/about/|/about/domains/lore.land/|/design/components/ /play/rpg-wednesday/sessions/|/play/rpg-wednesday/cast/|/play/rpg-wednesday/world/|/tools/character-sheet/|/topics/craft/ /play/rpg-wednesday/sessions/|/play/rpg-wednesday/cast/|/tools/midjourney/|/design/|/design/components/|/contact/ /play/rpg-wednesday/|/play/rpg-wednesday/sessions/|/tools/character-sheet/|/tools/midjourney/|/topics/ /play/|/play/rpg-wednesday/|/play/rpg-wednesday/sessions/|/tools/character-sheet/|/tools/midjourney/|/topics/ /play/|/rpg/|/play/rpg-wednesday/library/|/tools/character-sheet/|/play/rpg-wednesday/sessions/|/tools/midjourney/|/topics/ /services/systems/|/about/website/|/topics/architecture/|/topics/pedagogy/|/topics/software/browser/ /services/|/contact/|/settings/|/about/website/|/topics/software/|/topics/math/ +142

philosophy: .spw/surfaces/page-model.spw

data-spw-context-relevance

values: AI AST CST TypeScript about accumulation across act action actions activation active address aetheris affairs again aggregation agreement algebra algorithms analysis anatomy architecting architecture arcs area arithmetic art ask asks asset ast +557

philosophy: no .spw doc mentions this attribute

data-spw-operator

values: ! action baseline binding event frame label layer merge meta normalize object pragma probe ref relay stream substrate surface topic

css: public/css/effects/cinematic.css public/css/effects/demos.css public/css/effects/wonder.css public/css/grammar/syntax.css public/css/handles/operators.css public/css/ornament/ornament.css public/css/ornament/whimsy.css public/css/typography/base.css public/css/typography/context.css

js writers: public/js/interface/console.js public/js/interface/persona-selector.js public/js/media/image-metaphysics.js public/js/runtime/frame-navigator.js public/js/runtime/state-inspector.js public/js/semantic/operators.js public/js/semantic/smart.js

philosophy: .spw/conventions/design-whimsy.spw .spw/conventions/operator-semantics.spw .spw/conventions/ornament-contract.spw

data-spw-meaning

values: 13th 24 26th 26th, 2d API CBT CTO-as-a-service I JSON QA, Spw, a abstraction action advanced advisory agreement alchemistry algorithm along alongside anchors and annual annually application applications applications, architectural art, artifacts +413

js writers: public/js/kernel/states.js public/js/modules/rpg-wednesday.js

philosophy: .spw/conventions/annotation-layer.spw .spw/site.spw

data-spw-generated

values: breadcrumbs faq page

css: public/css/components/foundation.css

js writers: public/js/interface/semantic-chrome.js public/js/kernel/page-metadata.js

philosophy: no .spw doc mentions this attribute

data-spw-features

values: blog-interpreter collectability console contact-routing field-guide inspectability media-publishing metrics modular-projections navigator operators plan-registry portable-seeds pretext-lab profiles prompt-utils promptability rpg-capture rpg-gameplay semantic-lattice small-kernel svg-surfaces themes topic-discovery

css: public/css/grammar/syntax.css public/css/handles/operators.css public/css/shell/chrome.css public/css/systems/surfaces/media.css public/css/systems/surfaces/rpg.css public/css/systems/svg-surfaces.css

philosophy: no .spw doc mentions this attribute

data-spw-page-family

values: atlas campaign care-interface constellation coordination curriculum design experiment-lab fallback field-guide funding kernel-atlas kernel-portrait kitchen-atlas laboratory membership menu observatory operator-atlas playfield policy proof-cards recipe-book register research roadmap runtime-observatory seasonal spec studio switchboard syntax-atlas +4

css: public/css/effects/debug.css public/css/routes/design-experiments.css src/styles/entries/debug.css src/styles/entries/design-experiments.css

philosophy: .spw/conventions/annotation-layer.spw .spw/conventions/css-instruction.spw .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/surfaces/page-model.spw

data-spw-page-modes

values: archive book browse build carry choose cite collaborate collect commission compare compose contact context cook debug decide design document draft edit escalate explore export fund host implement inspect interpret join make navigate +35

philosophy: no .spw doc mentions this attribute

data-spw-page-role

values: architecture-register asset-review calculus-register campaign-portal campaign-register category-theory-register character-workshop combinatorics-register complexity-register composition-reference contact-register craft-register culinary-culture-workbench current-sprint decision-engine design-lab design-reference design-register differential-equations-register domain-specimen editorial-lab field-guide field-theory-register kernel-identity-register learning-library learning-register local-proof-card-register math-register membership-register mentorship-tool number-theory-register numerical-methods-register +30

css: public/css/effects/debug.css public/css/routes/surfaces/review-surfaces.css src/styles/entries/debug.css

philosophy: .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/surfaces/page-model.spw

data-spw-route-family

values: apprenticeship atlas authoring browser campaign care character chemistry community composition constellation coordination craft culture curriculum design documentation domain editorial experiments field-guide funding grammar identity image insights kernel kitchen lab laboratory lattice learning +44

css: public/css/effects/debug.css src/styles/entries/debug.css

philosophy: .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/surfaces/page-model.spw

data-spw-surface

values: about blog cards care contact coordination craft home membership newyear now offline plans play privacy recipes research rpg-wednesday services services-care services-creator services-ecosystem services-systems settings software tools tools-budgeting tools-character-sheet tools-midjourney tools-profile topics town +1

css: public/css/effects/debug.css public/css/reset/base.css public/css/routes/about-surface.css public/css/routes/contact-surface.css public/css/routes/craft-surface.css public/css/routes/play-surface.css public/css/routes/recipes-surface.css public/css/routes/rpg-wednesday-surface.css public/css/routes/services-surface.css public/css/routes/surfaces/blog-frames.css public/css/routes/surfaces/blog-layouts.css public/css/routes/surfaces/blog-motion.css public/css/routes/surfaces/blog.css public/css/routes/surfaces/home-panels.css public/css/routes/surfaces/home.css public/css/routes/surfaces/plans-cards.css public/css/routes/surfaces/plans-relationships.css public/css/routes/surfaces/plans-responsive.css public/css/routes/surfaces/plans.css public/css/routes/surfaces/settings-cues.css public/css/routes/surfaces/settings-forms.css public/css/routes/surfaces/settings-notes.css public/css/routes/surfaces/settings-runtime.css public/css/routes/surfaces/settings.css public/css/routes/tools-budgeting-surface.css public/css/routes/topics-surface.css public/css/routes/website-surface.css public/css/systems/surfaces/philosophy.css src/styles/entries/debug.css src/styles/entries/tools-budgeting-surface.css

js writers: public/js/interface/persona-selector.js public/js/semantic/cognitive-surface.js

philosophy: .spw/conventions/css-instruction.spw .spw/conventions/site-semantics.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/surfaces/page-model.spw

data-spw-page-seed

values: .spw/about-kernel home_kernel_atlas page_about_about_domains_baneland page_about_about_domains_boneland page_about_about_domains_bonkland page_about_about_domains_boonland page_about_about_domains_factshiftcom page_about_about_domains_honkland page_about_about_domains_loreland page_about_about_domains_rskrulescom page_about_about_domains_tealstripesvibescom page_about_about_plans page_about_about_website page_blog_blog page_cards_local_proof page_care page_contact_contact page_coordination_surface page_design_accessibility page_design_affordance page_design_catalog_assets page_design_catalog_tokens page_design_components page_design_density page_design_design_hub page_design_experiments_css page_design_experiments_css_controls page_design_experiments_svg page_design_experiments_svg_handoff page_design_interaction_design page_design_materials page_design_palettes +90

css: public/css/routes/design-surface.css

philosophy: no .spw doc mentions this attribute

data-spw-brace

values: objective subjective

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-feature

values: about-reentry boonhonk-reflection-fit care-cards care-interface-entry care-operating-model care-safety-boundaries college-wonder-path community-protocols css-literature css-rule-bench curricular-codebase-contracts curricular-codebase-lattice design-experiments design-lab-prologue engineer-translation footer-settings home-entrance-sorter home-learning-use-pattern home-lens-panels isee-world-map learning-guide-cards learning-postures library-garden-seeds math-learning-markers pedagogy-habits pedagogy-learning-bridges physics-lab-specimen play-reentry play-to-learning pretext-learning-markers pwa-status quick-demo-rail +35

css: public/css/components/promo-wonder-cycle.css public/css/effects/debug.css src/styles/entries/debug.css

js writers: public/js/interface/contextual-ui.js

philosophy: .spw/conventions/annotation-layer.spw .spw/conventions/css-instruction.spw .spw/reviews/runtime-audit/composition-ownership.spw .spw/surfaces/page-model.spw

data-spw-accent

values: crystal flow lattice resonance wave

css: public/css/ornament/canvas-accents.css

philosophy: no .spw doc mentions this attribute

data-spw-slot

values: actions body figure header

css: public/css/components/foundation.css public/css/components/frames.css public/css/components/runtime-states.css public/css/components/signals.css public/css/components/surfaces.css public/css/effects/debug.css public/css/routes/recipes-surface.css public/css/routes/topics-surface.css src/styles/entries/debug.css

js writers: public/js/interface/semantic-chrome.js

philosophy: .spw/conventions/css-instruction.spw

data-spw-accent-palette

values: cool warm

css: public/css/ornament/canvas-accents.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-sigil

values: #>next_builds #>systems_context #>town_library *boonhonk_fit *rpg_wednesday ?college_wonder_path ?pedagogy_context @character_card @character_sheet @draw_the_strike @east_ramp_works @sealed_thing @starter_quests ^archive_world ^avalanche_evan ^cask ^garden ^grounding_rod ^library_map ~cast_register ~guide_cards ~isee_map

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-textual-role

values: cue narration narration-text

css: public/css/components/content.css

philosophy: no .spw doc mentions this attribute

data-spw-accent-anchor

values: about accumulation angles area atlas atmosphere attention authors bench blog books branding calculus category-theory cognition complexity component composition constellation contact content corridor counter craft css culture design differential directions editing equations families +69

philosophy: no .spw doc mentions this attribute

data-spw-accent-operator

values: action baseline frame object probe ref stream surface topic

philosophy: no .spw doc mentions this attribute

data-spw-accent-resonance

values: anchor image manual probe recent

philosophy: no .spw doc mentions this attribute

data-spw-accent-colors

values: #0b252c #0d4e58, #0f4d5a, #113f50, #123746, #123f50, #134959, #134b57, #144a59, #144b59, #154a52, #157a82, #165d64, #1a474a, #1a9999, #1d352d, #1d57a3 #1f5b60, #214952, #22464f, #274f4d, #284e53 #2a8c76, #2d5d46 #355f77, #365b8c, #3c8d73 #3d647d, #406173 #4C3C3B #5b7f99, #5f1720 +52

philosophy: no .spw doc mentions this attribute

data-spw-realization

values: conceptual hybrid realized

css: public/css/grammar/syntax.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-cluster

values: data flow inquiry orchestration

philosophy: no .spw doc mentions this attribute

data-spw-voice

values: / accumulate act ambient base bind boundary bring collapse crossing detect drift elsewhere fires flat form frame from hold is join label layer measure merge meta name norm once outside periodic points +15

philosophy: no .spw doc mentions this attribute

data-spw-demo-kind

values: brand community learn practice proof publish qa reason scope share try

philosophy: no .spw doc mentions this attribute

data-spw-principle

values: dual-coding interleaving metacognition retrieval retrieval-transfer signaling spatial-contiguity worked-examples

philosophy: no .spw doc mentions this attribute

data-spw-svg-host

values: brand-screenshot-card care-model cognitive-machine craft-creature craft-divider craft-glyph craft-story css-rule-map diagram-posture social-care-routing

philosophy: no .spw doc mentions this attribute

data-spw-svg-kind

values: addressable-diagram addressable-illustration branded-screenshot-card cascade-map illustration

philosophy: no .spw doc mentions this attribute

data-spw-context-actions

values: build choose collect commission compare contact document enter inspect join navigate orient persist preview read return screenshot support tune understand

philosophy: no .spw doc mentions this attribute

data-spw-context-domains

values: appearance cadence cards college components contact coordination craft design discovery inspection language learning library lore math membership memory navigation play portfolio promo publishing quests reading resonance route rpg runtime science software support +8

philosophy: no .spw doc mentions this attribute

data-spw-svg-scale

values: compact narrow-wide wide

philosophy: no .spw doc mentions this attribute

data-spw-pretext-cache

values: cold warm

philosophy: no .spw doc mentions this attribute

data-spw-prompt-host

philosophy: no .spw doc mentions this attribute

data-spw-prompt-teaser

values: Reveal SVG a an and another atmosphere, blog change. clay-bubble compact component cues, current cuts. diagram diagram: extends for from handoff hierarchy, image-generator it. library, machine material may memory, metaphysics. mixes model +37

js writers: public/js/interface/prompt-utils.js

philosophy: no .spw doc mentions this attribute

data-spw-prompt-title

values: blog_signal_lattice cognitive_machine_svg_handoff component_physics_specimen design_atlas_weather image_bench_packet library_harmony_packet svg_specimen_handoff typography_register_stack

js writers: public/js/interface/prompt-utils.js

philosophy: no .spw doc mentions this attribute

data-spw-accent-strength

values: 0.94 0.95 0.96 0.98 1.04

philosophy: no .spw doc mentions this attribute

data-spw-depth

values: 1 2 3

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-seed-package

values: .spw/about-kernel .spw/about-seeds .spw/home-atlas .spw/recipes .spw/texture-portal

philosophy: no .spw doc mentions this attribute

data-spw-kernel

values: entry recipes site-settings small-stable stable

philosophy: no .spw doc mentions this attribute

data-spw-lattice

values: accessibility appearance author-workflow chrome composition developmental-climate diagnostics garden large large-semantic research sensory social typography visible

philosophy: no .spw doc mentions this attribute

data-spw-materiality

values: card editorial-kitchen kitchen-garden-print-lab packet paper print route seed shelf svg texture web zine

philosophy: no .spw doc mentions this attribute

data-spw-projection

values: author-workflow blogger-kit browser-storage climate cookbook homepage modular presets public-library runtime-summary svg-cards team-practice

philosophy: no .spw doc mentions this attribute

data-spw-svg-motion

values: static

philosophy: no .spw doc mentions this attribute

data-spw-dimension

values: gesture memory publication reading routing surface syntax

philosophy: no .spw doc mentions this attribute

data-spw-lore-role

values: bridge hook origin

css: public/css/effects/material.css

philosophy: no .spw doc mentions this attribute

data-spw-page-hook-label

values: Console Copy Current Landing Runtime diagnostics inspect modes query snippets

philosophy: no .spw doc mentions this attribute

data-spw-potential

values: active emergent ready

philosophy: no .spw doc mentions this attribute

data-spw-salience

values: ambient near strong

philosophy: no .spw doc mentions this attribute

data-spw-friction

values: deep

philosophy: no .spw doc mentions this attribute

data-spw-image-key

values: lore-land-signal-poster lore-land-threshold-seal software-compression-crystals software-scheduler-clockwork

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-inspect

values: home_frame pretext_field_lab runtime_lab runtime_preferences

philosophy: no .spw doc mentions this attribute

data-spw-palette-resonance

values: craft math route software

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-phrase

values: artifact

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-depth

values: 1 2 3

philosophy: no .spw doc mentions this attribute

data-spw-region

values: body footer header

js writers: public/js/modules/payment-card.js

philosophy: no .spw doc mentions this attribute

data-spw-returnable

values: true

philosophy: no .spw doc mentions this attribute

data-spw-form-options

values: brace,block brace,block,angle

philosophy: no .spw doc mentions this attribute

data-spw-page-hook

values: console-snippets query-recipes runtime-diagnostics

philosophy: no .spw doc mentions this attribute

data-spw-query-family

values: calibration painting plugin

philosophy: no .spw doc mentions this attribute

data-spw-section-handle-desktop

values: auto

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-serializes-as

values: spw-seed-block

philosophy: no .spw doc mentions this attribute

data-spw-image-model

values: SVG accent, and authored brand card color, diagram how interpretation labels motion, nodes notes, offer/action pointer-field region, respond screenshot-ready showing spacing, stroke, to trust tuning with

philosophy: no .spw doc mentions this attribute

data-spw-local-note-entry

philosophy: no .spw doc mentions this attribute

data-spw-spacing

values: loose tight

philosophy: no .spw doc mentions this attribute

data-spw-state-contract

values: empty:filling:complete:sealed

philosophy: no .spw doc mentions this attribute

data-spw-svg-pointer-state

values: active

css: public/css/systems/svg-surfaces.css

js writers: public/js/media/svg-tunability.js

philosophy: no .spw doc mentions this attribute

data-spw-inspect-fields

values: authorMode,currentDevelopmentalClimate,colorMode,themePack,paletteResonance,baseMetamaterial,baseAffordance,componentDensity,operatorSaturation,grainIntensity,animationIntensity,wonderMemory,busDiagnostics

philosophy: no .spw doc mentions this attribute

data-spw-inspect-mode-group

values: home-lens

philosophy: no .spw doc mentions this attribute

data-spw-local-notes-root

philosophy: no .spw doc mentions this attribute

data-spw-memory

values: local

philosophy: no .spw doc mentions this attribute

data-spw-memory-action

values: clear-grounded

philosophy: no .spw doc mentions this attribute

data-spw-memory-anchor

values: category-theory complexity memory parser-lenses parser-map parsers spw

philosophy: no .spw doc mentions this attribute

data-spw-memory-status

philosophy: no .spw doc mentions this attribute

data-spw-page-primary-action-label

philosophy: no .spw doc mentions this attribute

data-spw-page-responsibility-label

philosophy: no .spw doc mentions this attribute

data-spw-page-status-label

philosophy: no .spw doc mentions this attribute

data-spw-page-zone-label

philosophy: no .spw doc mentions this attribute

data-spw-stateful

philosophy: no .spw doc mentions this attribute

data-spw-stub

philosophy: no .spw doc mentions this attribute

data-spw-swappable

values: #>,^,?,@

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-active

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-allocation

values: adjacent inline room

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-animation-throttling

values: heavy light

css: public/css/reset/base.css

philosophy: no .spw doc mentions this attribute

data-spw-author-mode

js writers: public/js/kernel/shared.js public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-brace-actions

js writers: public/js/runtime/brace-actions.js

philosophy: no .spw doc mentions this attribute

data-spw-brace-actions-mounted

js writers: public/js/runtime/brace-actions.js

philosophy: no .spw doc mentions this attribute

data-spw-brace-edge

js writers: public/js/runtime/brace-actions.js

philosophy: no .spw doc mentions this attribute

data-spw-brace-state

values: emitting

css: public/css/effects/cinematic.css

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-bound

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-depth

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-frame

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-changed

values: mode phase state

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-clarity

values: project settle

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-intent

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-mode

values: toggle

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-phase

values: settling

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-pressure

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-state

values: closed open

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-menu-topology

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-mode

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-reversible

values: true

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-state

values: closed

css: public/css/handles/operators.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-surface

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-breadcrumb-viewport

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-brush-active

values: true

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-brush-mode

values: true

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-charge-direction

values: postfix prefix

css: public/css/effects/cinematic.css

philosophy: no .spw doc mentions this attribute

data-spw-charge-label

js writers: public/js/modules/blog-interpreter.js

philosophy: no .spw doc mentions this attribute

data-spw-cognitive-handles

values: off

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-color-mode

values: auto dark light

css: public/css/effects/developmental-climate.css public/css/effects/grain-texture.css public/css/handles/operators.css public/css/ornament/canvas-accents.css public/css/routes/about-surface.css public/css/routes/contact-surface.css public/css/routes/craft-surface.css public/css/routes/recipes-surface.css public/css/routes/surfaces/blog.css public/css/routes/surfaces/home-panels.css public/css/routes/surfaces/plans.css public/css/routes/surfaces/settings.css public/css/routes/topics-surface.css public/css/routes/website-surface.css public/css/tokens/core.css

js writers: public/js/runtime/prepaint-state.js public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-component

js writers: public/js/interface/prompt-utils.js

philosophy: no .spw doc mentions this attribute

data-spw-component-density

values: dense roomy

css: public/css/tokens/core.css

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-component-genome

values: importance-primary interactivity-controllable interactivity-inspectable

css: public/css/components/foundation.css

philosophy: no .spw doc mentions this attribute

data-spw-config-domain

values: site-settings

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-console-state

js writers: public/js/kernel/instrumentation.js

philosophy: no .spw doc mentions this attribute

data-spw-container

values: cluster concept field

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-contextual-ui-init

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-controls-open

values: true

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-css-observed-mutations

js writers: public/js/runtime/brace-gestures.js

philosophy: no .spw doc mentions this attribute

data-spw-debug-source

js writers: public/js/interface/prompt-utils.js

philosophy: .spw/surfaces/page-model.spw

data-spw-delight

values: burst settled

css: public/css/effects/wonder.css

philosophy: no .spw doc mentions this attribute

data-spw-dev-server

js writers: public/js/typed/runtime-environment.js

philosophy: no .spw doc mentions this attribute

data-spw-developmental-author-label

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-developmental-label

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-disclosure

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-effect

values: clarify pixelize semantic watercolor

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-effect-stop

values: clarify pixelize semantic watercolor

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-enhanced

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-enhancement-level

values: balanced minimal rich

css: public/css/effects/grain-texture.css

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-experiential-init

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-experiential-surface

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-field-context

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-field-operator

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-font-scale

js writers: public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-font-size

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-font-size-scale

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-grain-intensity

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-grain-state

values: active glowing projecting quiet shadowed

css: public/css/effects/grain-texture.css

philosophy: no .spw doc mentions this attribute

data-spw-grounded-in

values: action baseline binding frame layer meta normalize object pragma probe ref stream surface

css: public/css/typography/base.css

js writers: public/js/interface/haptics.js

philosophy: no .spw doc mentions this attribute

data-spw-grounded-wonder

js writers: public/js/interface/haptics.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-badge-bound

js writers: public/js/interface/guide-badge.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-badge-control-bound

js writers: public/js/interface/guide-badge.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-kind

values: realization

css: public/css/grammar/syntax.css

js writers: public/js/interface/semantic-chrome.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-previous-liminality

js writers: public/js/interface/guide.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-reason

js writers: public/js/interface/guide.js

philosophy: no .spw doc mentions this attribute

data-spw-guide-value

values: conceptual hybrid realized

css: public/css/grammar/syntax.css

js writers: public/js/interface/semantic-chrome.js

philosophy: no .spw doc mentions this attribute

data-spw-guided

values: true

css: public/css/handles/operators.css

js writers: public/js/interface/guide.js

philosophy: no .spw doc mentions this attribute

data-spw-handle-advanced

values: true

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-handle-count

js writers: public/js/runtime/attention-architecture.js

philosophy: no .spw doc mentions this attribute

data-spw-handle-current

js writers: public/js/runtime/attention-architecture.js

philosophy: no .spw doc mentions this attribute

data-spw-handle-index

js writers: public/js/runtime/attention-architecture.js

philosophy: no .spw doc mentions this attribute

data-spw-handle-origin

js writers: public/js/runtime/attention-architecture.js

philosophy: no .spw doc mentions this attribute

data-spw-handle-shell-state

values: collapsed

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-handle-source

js writers: public/js/runtime/attention-architecture.js

philosophy: no .spw doc mentions this attribute

data-spw-harmony

values: indexed responsive structured

css: public/css/grammar/syntax.css

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-header-opacity

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-hint-density

values: roomy

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-hormone-hint

js writers: public/js/kernel/shared.js

philosophy: no .spw doc mentions this attribute

data-spw-hormone-phase

js writers: public/js/kernel/shared.js

philosophy: no .spw doc mentions this attribute

data-spw-image-effect

values: clarify pixelize watercolor

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-effect-override

js writers: public/js/media/image-metaphysics.js public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-image-gesture

values: drag

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-input

values: coarse

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-layout

values: compact

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-managed

js writers: public/js/media/image-metaphysics.js public/js/runtime/state-inspector.js public/js/semantic/component-semantics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-memory-state

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-preview

values: on

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-primed

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-image-resonance

values: amber blue ink sea violet

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-implementation-mutations

js writers: public/js/runtime/brace-gestures.js

philosophy: no .spw doc mentions this attribute

data-spw-inline-form

values: angle brace circle square

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-inspect-mounted

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-inspectability

values: deep

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-instrumentation

js writers: public/js/interface/prompt-utils.js public/js/interface/semantic-chrome.js public/js/kernel/instrumentation.js

philosophy: .spw/surfaces/page-model.spw

data-spw-interactivity

values: controllable

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-knowledge

values: gained

css: public/css/handles/operators.css

js writers: public/js/kernel/core.js

philosophy: no .spw doc mentions this attribute

data-spw-lattice-phase

js writers: public/js/semantic/lattice.js

philosophy: no .spw doc mentions this attribute

data-spw-learning-mode

values: connect entry practice publish stabilize

css: public/css/effects/cinematic.css

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-line-spacing

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-loading-original

js writers: public/js/kernel/site-settings.js

philosophy: no .spw doc mentions this attribute

data-spw-local-memory-controls-init

js writers: public/js/interface/local-memory-controls.js

philosophy: no .spw doc mentions this attribute

data-spw-loop-label

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-loop-state

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-loop-token

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-meaning-mode

values: inspect quiet screenshot

css: public/css/handles/operators.css

philosophy: no .spw doc mentions this attribute

data-spw-medium

values: raster vector

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-memo-wonder

values: comparison constraint inquiry memory orientation projection resonance

css: public/css/systems/substrate-ecology.css

js writers: public/js/runtime/experiential.js

philosophy: no .spw doc mentions this attribute

data-spw-memory-status-timer

js writers: public/js/interface/local-memory-controls.js

philosophy: no .spw doc mentions this attribute

data-spw-menu

values: closed open

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-menu-changed

values: mode pressure state

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-menu-clarity

values: project settle

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-menu-mode

values: toggle

css: public/css/shell/chrome.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-module-copy-inferred

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-module-hydration-inferred

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-module-inferred

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-monospace-variant

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-motion-family

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-nav-fit

values: compressed tight

css: public/css/shell/chrome.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-navigation-spells-init

js writers: public/js/runtime/navigation-spells.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-family

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-intent

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-interaction

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-reversibility

values: committing constraining deferrable inspectable projected recoverable replayable returnable reversible revisable scoping sticky

css: public/css/handles/operators.css

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-saturation

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-operator-speech

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-ornament

values: accent-bar border-shift color-wash corner-dot fade-trail opacity-pulse stable-accent

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-ornament-axis

values: inline|stack|radial stack

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-ornament-density

values: high low low|medium|high

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-ornament-state

values: active glowing idle|glowing|revealed|active|settled revealed settled

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-override-state

values: manual

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-passive-charge

js writers: public/js/interface/haptics.js

philosophy: no .spw doc mentions this attribute

data-spw-path-available

js writers: public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-phase-postfix

js writers: public/js/kernel/states.js

philosophy: no .spw doc mentions this attribute

data-spw-phase-prefix

js writers: public/js/kernel/states.js public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-physics

values: calm puppet screenshot tactile

css: public/css/effects/cinematic.css

philosophy: no .spw doc mentions this attribute

data-spw-pinnable

js writers: public/js/runtime/brace-gestures.js

philosophy: no .spw doc mentions this attribute

data-spw-pivot-active

values: true

css: public/css/shell/layout.css

js writers: public/js/runtime/brace-pivots.js

philosophy: no .spw doc mentions this attribute

data-spw-pivot-value

js writers: public/js/runtime/brace-pivots.js

philosophy: no .spw doc mentions this attribute

data-spw-pointer-mode

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-popped

values: true

css: public/css/grammar/syntax.css

philosophy: no .spw doc mentions this attribute

data-spw-presentation

values: modal

css: public/css/components/promo-wonder-cycle.css

js writers: public/js/interface/discovery-notices.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-density

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-genre

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-influence

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-measure

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-mode

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-ornament

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-preset

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-projection

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-pretext-width-class

js writers: public/js/semantic/pretext-physics.js

philosophy: no .spw doc mentions this attribute

data-spw-primary-operator

values: action binding frame merge probe ref surface

css: public/css/components/signals.css

philosophy: no .spw doc mentions this attribute

data-spw-probe-wired

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-promo-cta-style

js writers: public/js/interface/discovery-notices.js

philosophy: no .spw doc mentions this attribute

data-spw-promo-handles

js writers: public/js/interface/discovery-notices.js

philosophy: no .spw doc mentions this attribute

data-spw-promo-kind

js writers: public/js/interface/discovery-notices.js

philosophy: no .spw doc mentions this attribute

data-spw-promo-theme

values: glass signal

css: public/css/shell/chrome.css

js writers: public/js/interface/discovery-notices.js

philosophy: no .spw doc mentions this attribute

data-spw-promotion-cta-style

js writers: public/js/typed/promo-wonder-cycle.js

philosophy: no .spw doc mentions this attribute

data-spw-promotion-handles

js writers: public/js/typed/promo-wonder-cycle.js

philosophy: no .spw doc mentions this attribute

data-spw-promotion-kind

js writers: public/js/typed/promo-wonder-cycle.js

philosophy: no .spw doc mentions this attribute

data-spw-promotion-theme

js writers: public/js/typed/promo-wonder-cycle.js

philosophy: no .spw doc mentions this attribute

data-spw-prompt-copy-bound

js writers: public/js/interface/prompt-utils.js

philosophy: no .spw doc mentions this attribute

data-spw-pulse-ts

js writers: public/js/runtime/reactive-spine.js

philosophy: no .spw doc mentions this attribute

data-spw-pwa-mode

js writers: public/js/runtime/pwa-update-handler.js

philosophy: no .spw doc mentions this attribute

data-spw-reflow-cost

js writers: public/js/kernel/instrumentation.js

philosophy: no .spw doc mentions this attribute

data-spw-reflow-reason

js writers: public/js/kernel/instrumentation.js

philosophy: no .spw doc mentions this attribute

data-spw-reflow-scope

js writers: public/js/kernel/instrumentation.js

philosophy: no .spw doc mentions this attribute

data-spw-region-genome

values: harmony-indexed harmony-structured

css: public/css/components/foundation.css

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-region-layer

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-region-linked

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-resonance

values: high medium

css: public/css/effects/cinematic.css

philosophy: no .spw doc mentions this attribute

data-spw-resonance-probe

values: action frame object probe ref stream surface

css: public/css/effects/wonder.css

philosophy: no .spw doc mentions this attribute

data-spw-review-active

js writers: public/js/modules/design-review-surfaces.js

philosophy: no .spw doc mentions this attribute

data-spw-review-role

js writers: public/js/modules/design-review-surfaces.js

philosophy: no .spw doc mentions this attribute

data-spw-rhythm

values: anchor chorus pulse

css: public/css/typography/context.css

philosophy: no .spw doc mentions this attribute

data-spw-route-discovery

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-discovery-count

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-discovery-layout

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-discovery-scope

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-hover

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-menu-count

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-menu-label

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-menu-layout

values: compact

css: public/css/shell/chrome.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-menu-scope

values: related

css: public/css/shell/chrome.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-menu-state

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-route-state

values: branching none

css: public/css/components/signals.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-section-handle

values: off

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-semantics

values: unlocked

css: public/css/effects/wonder.css

js writers: public/js/runtime/gate.js

philosophy: no .spw doc mentions this attribute

data-spw-sequence-state

values: complete idle|playing|paused|complete paused playing

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-settings-preflight

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-shell-action

values: color-

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-shell-density

values: compact roomy

css: public/css/shell/layout.css

philosophy: no .spw doc mentions this attribute

data-spw-shell-disclosure-init

js writers: public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-shell-pointer

values: tracking

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-shell-scroll

values: deep lifted

css: public/css/shell/chrome.css

js writers: public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-shell-scroll-direction

values: down up

css: public/css/shell/chrome.css

js writers: public/js/runtime/shell-disclosure.js

philosophy: no .spw doc mentions this attribute

data-spw-show-footer

values: off

css: public/css/shell/chrome.css

philosophy: no .spw doc mentions this attribute

data-spw-sibling-resonance

values: true

css: public/css/ornament/ornament.css

philosophy: no .spw doc mentions this attribute

data-spw-sigil-label

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-sigil-name

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-sigil-prefix

js writers: public/js/semantic/operators.js

philosophy: no .spw doc mentions this attribute

data-spw-spell-bound

js writers: public/js/runtime/spells.js

philosophy: no .spw doc mentions this attribute

data-spw-spirit-phase

values: anchor attune compose connect expression initiation kindle offer orient practice project publish rehearse resistance return revise settle stabilize transformation weave

css: public/css/effects/developmental-climate.css public/css/tokens/core.css

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-state

values: editing projecting

css: public/css/components/cards/seed-card.css

js writers: public/js/modules/seed-card.js

philosophy: no .spw doc mentions this attribute

data-spw-state-accent

js writers: public/js/site.js

philosophy: no .spw doc mentions this attribute

data-spw-state-block

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-state-body

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-state-dismiss

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-state-restore

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-state-summary

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-state-toggle

js writers: public/js/runtime/state-inspector.js

philosophy: no .spw doc mentions this attribute

data-spw-svg-pointer-managed

js writers: public/js/media/svg-tunability.js

philosophy: no .spw doc mentions this attribute

data-spw-svg-tune-motion

values: paused quick slow

css: public/css/systems/svg-surfaces.css

js writers: public/js/modules/design-review-surfaces.js

philosophy: no .spw doc mentions this attribute

data-spw-theme-pack

values: copper-brace electric-studio glass-console neutral-paper oxide-ledger ritual-vellum

css: public/css/tokens/core.css

js writers: public/js/runtime/prepaint-state.js

philosophy: no .spw doc mentions this attribute

data-spw-viewport

values: compact

css: public/css/shell/chrome.css

js writers: public/js/runtime/spells.js

philosophy: no .spw doc mentions this attribute

data-spw-viewport-tier

values: compact mid narrow

css: public/css/components/content.css

js writers: public/js/interface/contextual-ui.js

philosophy: no .spw doc mentions this attribute

data-spw-visit-burst

values: true

css: public/css/effects/metaphysical-paper.css

js writers: public/js/media/image-metaphysics.js

philosophy: no .spw doc mentions this attribute

data-spw-visited-on-page

js writers: public/js/runtime/visitation.js

philosophy: no .spw doc mentions this attribute

data-spw-visited-surface-count

js writers: public/js/runtime/visitation.js

philosophy: no .spw doc mentions this attribute

data-spw-wonder-block-state

values: expanded idle idle|thinking|revealed|expanded revealed thinking

css: public/css/effects/wonder.css

js writers: public/js/interface/prompt-utils.js

philosophy: no .spw doc mentions this attribute

data-spw-wonder-memory-managed

js writers: public/js/interface/wonder-memory.js

philosophy: no .spw doc mentions this attribute

data-spw-wonder-memory-prev-field-wonder

js writers: public/js/interface/wonder-memory.js

philosophy: no .spw doc mentions this attribute

data-spw-wonder-memory-prev-memory-match

js writers: public/js/interface/wonder-memory.js

philosophy: no .spw doc mentions this attribute

data-spw-wonder-memory-prev-wonder-state

js writers: public/js/interface/wonder-memory.js

philosophy: no .spw doc mentions this attribute

CSS files

Each CSS file with its layer, attributes it reads, and tokens it defines.

public/css/components/cards.css

components/cards.css -------------------------------------------------------------------------- Frame cards, link cards, and inner type hygiene for reusable card composition.

reads attrs: data-spw-nav-tokenized

public/css/components/cards/payment-card.css

payment-card.css -------------------------------------------------------------------------- Purpose - Distinct card component for payment / support links. - Built to reduce pressure for anxious users by making state legible, gentle, and non-punitive. - Designed for beautiful screenshots, theming, and downstream artistic / illustrative reinterpretation. - HTML can grow later; this file exposes a richer vocabulary now so the markup can adopt it gradually. Interaction philosophy - Missing fields should feel quiet, not alarming. - Optionality should be visible without becoming clutter. - State cha

defines tokens: --amount-bg --amount-bg-hover --amount-bg-selected --amount-border --card-bg --card-bg-soft --card-border-color --card-border-strong --card-font --card-max-width --card-padding --card-radius --card-shadow --card-shadow-active --card-text --card-text-faint --card-text-soft --hint-bg --link-bg --link-bg-hover --link-bg-selected --link-border --link-border-strong --link-min-height +11

public/css/components/cards/profile-card.css

profile-card.css -------------------------------------------------------------------------- Purpose - A composable professional identity card with room for growth, iteration, and stateful profile development. - Regions: header / badges / sections / footer / wizard / export actions. - This file should encourage deeper profile development by making maturity, completeness, openness, focus, and motion visible in subtle ways. Notes - Variants are additive and can be combined: .profile-card--screenshot .profile-card--compact .profile-card--feature .profile-card--resume .profile-card--explorer .profi

defines tokens: --card-charge --profile-accent --profile-accent-line --profile-accent-soft --profile-duration-base --profile-duration-deliberate --profile-duration-fast --profile-ease --profile-field-line --profile-gap-1 --profile-gap-2 --profile-gap-3 --profile-gap-4 --profile-gap-5 --profile-ink --profile-ink-faint --profile-ink-mid --profile-ink-soft --profile-line --profile-line-soft --profile-line-strong --profile-pad-block --profile-pad-inline --profile-radius +8

public/css/components/cards/seed-card.css

seed-card.css -------------------------------------------------------------------------- Purpose - A dimensional Spw-native vessel for capturing, shaping, and transmitting annual seeds. - Role: vessel — holds the shape of intent after the feeling fades. - Form: brace / layered vessel — left edge accumulates, right edge releases. - State contract: empty → filling → complete → sealed - Serialization: ^seed[...]{...} Spw block Design goals - Feel native to the Spw ecosystem rather than merely "form-like". - Expose semantic depth, substrate, staging, and projection through CSS. - Give JS rich vari

reads attrs: data-spw-role data-spw-stage data-spw-state data-spw-touch

defines tokens: --card-charge --seed-accent --seed-accent-quiet --seed-accent-soft --seed-border-alpha --seed-depth --seed-field-fill-alpha --seed-field-gap --seed-frame-line --seed-frame-line-strong --seed-ink --seed-ink-faint --seed-ink-mid --seed-ink-soft --seed-left-glow --seed-pad-x --seed-pad-y --seed-radius --seed-radius-pill --seed-radius-tight --seed-right-release --seed-surface-opacity --seed-transition-base --seed-transition-emit +1

public/css/components/content.css

components/content.css -------------------------------------------------------------------------- Content utilities: meaningful cards, grouping grids, references, chips, notes, lists, and media figures.

reads attrs: data-spw-attention data-spw-density data-spw-reading data-spw-textual-role data-spw-viewport-tier

defines tokens: --component-gap-tight --component-pad --spw-grid-gap-active --spw-grid-gap-base --spw-grid-gap-compact --spw-grid-gap-mid --spw-grid-gap-narrow --spw-grid-min-active --spw-grid-min-base --spw-grid-min-compact --spw-grid-min-mid --spw-grid-min-narrow

public/css/components/controls.css

components/controls.css -------------------------------------------------------------------------- Interactive component families for settings controls, vibe widgets, and local note surfaces.

public/css/components/foundation.css

components/foundation.css -------------------------------------------------------------------------- Component-layer foundations: tokens, ownership boundaries, slots, module semantics, bleed, and stance utilities.

reads attrs: data-spw-component-genome data-spw-component-kind data-spw-context-match data-spw-debug-mode data-spw-empty data-spw-floating-chrome data-spw-generated data-spw-kind data-spw-module data-spw-module-hydration data-spw-region-flow data-spw-region-genome data-spw-salience-state data-spw-show-semantic-metadata data-spw-slot data-spw-stance

defines tokens: --component-accent --component-accent-soft --component-accent-strong --component-accent-wash --component-border --component-border-quiet --component-border-strong --component-chip-height --component-code-measure --component-frame-shadow --component-frame-shadow-active --component-gap --component-gap-loose --component-gap-roomy --component-gap-tight --component-header-min-height --component-layer-base --component-layer-overlay --component-layer-raised --component-measure --component-measure-tight --component-measure-wide --component-module-active-ring --component-module-context-ring +43

public/css/components/frames.css

components/frames.css -------------------------------------------------------------------------- Site-frame structure, frame stance, hero thresholds, and metamaterial selectors.

reads attrs: data-spw-metamaterial data-spw-role data-spw-slot

defines tokens: --component-material-bg --component-material-border --component-material-shadow --component-measure --site-frame-seam-color --surface-gap --surface-padding

public/css/components/pretext.css

components/pretext.css -------------------------------------------------------------------------- Pretext flow host styles and grammar-aware text presentation.

reads attrs: data-spw-debug data-spw-flow data-spw-pretext-scaffold

defines tokens: --pretext-line-gap --pretext-local-pad --pretext-local-radius

public/css/components/promo-wonder-cycle.css

promo-wonder-cycle.css -------------------------------------------------------------------------- Reusable promo / wonder cycle component styles.

reads attrs: data-spw-feature data-spw-presentation

public/css/components/runtime-states.css

components/runtime-states.css -------------------------------------------------------------------------- Selection, active, accessibility, visibility, and responsive component states.

reads attrs: data-spw-high-contrast data-spw-reduce-motion data-spw-scroll-cadence data-spw-section-state data-spw-selection data-spw-slot

defines tokens: --component-border --component-border-strong --component-gap-tight --component-pad --surface-padding

public/css/components/signals.css

components/signals.css -------------------------------------------------------------------------- Operator accent mapping, arrival states, and component presence signals.

reads attrs: data-spw-component-kind data-spw-page-arrival data-spw-page-arrival-step data-spw-page-presence data-spw-page-transition-phase data-spw-primary-operator data-spw-route-state data-spw-slot

defines tokens: --component-arrival-offset --component-arrival-opacity --component-route-accent --component-transition-arrival

public/css/components/surfaces.css

components/surfaces.css -------------------------------------------------------------------------- Reusable card and panel surface shells shared across routes.

reads attrs: data-spw-slot

defines tokens: --component-arrival-offset --component-arrival-opacity --component-text --component-text-soft --media-focus-accent

public/css/compose.css

compose.css -------------------------------------------------------------------------- Portable composition entrypoint. Use this when another site wants Spw theming, component grammar, and handle styling without the full spwashi.com shell, route surfaces, or ornament layer. Keep this file import-only so it stays useful as a standalone bundle.

public/css/effects/cinematic.css

cinematic.css -------------------------------------------------------------------------- Purpose - Shared motion, field, and depth physics for Spw surfaces and handles. - Consumes semantic state from bus-driven charge, developmental climate, component semantics, and authored HTML attributes. - Serves as a seed layer for ethos: not just "animation", but the felt mechanics of attention, pressure, memory, and release.

reads attrs: data-spw-affordance data-spw-annotation-state data-spw-brace-state data-spw-charge data-spw-charge-direction data-spw-field-wonder data-spw-form data-spw-gesture data-spw-groundable data-spw-grounded data-spw-handle data-spw-kind data-spw-latched data-spw-learning-mode data-spw-operator data-spw-parallel data-spw-physics data-spw-pinned data-spw-resonance data-spw-role data-spw-selection data-spw-wall

defines tokens: --brace-edge-alpha --brace-glow-alpha --brace-inner-density --charge --cinematic-arrive-duration --cinematic-arrive-ease --cinematic-climate-atmosphere --cinematic-climate-charge-bias --cinematic-climate-clarity --cinematic-climate-memory --cinematic-climate-pressure --cinematic-climate-resonance --cinematic-climate-selection-bias --cinematic-depth-scale --cinematic-dwell-duration --cinematic-dwell-ease --cinematic-field-color --cinematic-field-opacity --cinematic-field-radius --cinematic-glow-scale --cinematic-intensity --cinematic-outline-alpha --cinematic-outline-scale --cinematic-release-duration +9

public/css/effects/debug.css

debug.css -------------------------------------------------------------------------- Purpose - Debug-only overlays for page surface -> feature/module -> slots. Activation - html[data-spw-debug-mode="on"] or [data-spw-debug~="css"] or [data-spw-debug~="layout"]. Ownership - Expose structure only; move required UI rules to the semantic owner.

reads attrs: data-spw-component-id data-spw-context data-spw-debug data-spw-debug-mode data-spw-feature data-spw-floating-chrome data-spw-kind data-spw-layout data-spw-layout-owner data-spw-module data-spw-page-family data-spw-page-primary-action data-spw-page-responsibility data-spw-page-role data-spw-page-status data-spw-page-zone data-spw-route-family data-spw-semantic-owner data-spw-slot data-spw-surface

defines tokens: --spw-css-debug-color

public/css/effects/demos.css

demos.css -------------------------------------------------------------------------- Purpose: - Documentation, lab, and pattern-library components. - Houses Specimen Indexes, Kernel Code blocks, Demo surfaces, and Fiber Linguistic visualizers. - Entirely portable: relies on global tokens, not route-specific scoping.

reads attrs: data-spw-operator

defines tokens: --spw-demo-accent

public/css/effects/developmental-climate.css

developmental-climate.css -------------------------------------------------------------------------- Purpose: - Treats "climate" as editorial/learning weather rather than a full theme. - Uses subtle structural, spatial, and interaction cues. - Maintains full backward compatibility with older [data-spw-spirit-phase]. - Consumes modern --climate-* variables when available.

reads attrs: data-spw-annotation data-spw-author-surface data-spw-color-mode data-spw-developmental-climate data-spw-developmental-indicators data-spw-gesture data-spw-grounded data-spw-high-contrast data-spw-latched data-spw-learning-surface data-spw-phase-indicators data-spw-pinned data-spw-publication data-spw-reduce-motion data-spw-relation data-spw-role data-spw-selection data-spw-spirit-phase data-spw-typeset-surface

defines tokens: --badge-bg --badge-text --card-border-emphasis --climate-accent --climate-accent-ink --climate-accent-line --climate-accent-line-strong --climate-accent-wash --climate-accent-wash-strong --climate-anchor-accent --climate-annotation --climate-annotation-strength --climate-atmosphere-bias --climate-badge-bg --climate-badge-text --climate-charge-bias --climate-clarity --climate-clarity-bias --climate-connection-strength --climate-density --climate-frame-header-line --climate-frame-left-rail --climate-gap-scale --climate-hint-opacity +56

public/css/effects/electromagnetic-container.css

electromagnetic-container.css -------------------------------------------------------------------------- Charged Paper Containers Containers hold state through crease weight, edge bias, and braced labels. The metaphor remains charge/coherence, but the material is paper-machine. Enhanced for dynamic text contrast and thematic resonance.

defines tokens: --charge-accent --charge-ink --charge-kinetic --charge-manifest --charge-none --charge-potential --charge-state --charge-wash --coherence --conception-color --field-intensity --kinetic-color --manifest-color --potential-color --resonance-ease --resonance-freq

public/css/effects/enhancements.css

enhancements.css -------------------------------------------------------------------------- Progressive enhancement layer. These selectors make planned features easier to read, but they do not own route structure. Removing this file should leave the pages navigable. Integrated with Spw semantic tokens, surface depths, and motion grammar.

public/css/effects/enrichment.css

enrichment.css -------------------------------------------------------------------------- Purpose: - Touch ecology, swipe physics, and enriched code block interactions. - Establishes strict boundaries for CSS scroll-snapping and prepares state hooks for JavaScript physics handoffs.

reads attrs: data-spw-swipe

public/css/effects/grain-texture.css

grain-texture.css -------------------------------------------------------------------------- Purpose - Subtle substrate texture providing tactile depth, semantic atmosphere, and artist-friendly background panels behind type. - Grain reads as layered material (texture + shadow/glow context), never raw visual noise. - Theming substrate for CSS + JS effects: grain, paper bloom, edge shadow, ambient residue, panel glow, and focusable overlays. Design stance - Body grain = ambient field memory - Surface grain = local material presence - Handle grain = smallest, quietest tactile cue - Glow/sh

reads attrs: data-spw-charge data-spw-color-mode data-spw-context data-spw-developmental-climate data-spw-enhancement-level data-spw-field-wonder data-spw-gesture data-spw-grain-state data-spw-grain-theme data-spw-grounded data-spw-high-contrast data-spw-latched data-spw-overlay data-spw-permeability data-spw-pinned data-spw-room data-spw-semantic-density data-spw-succession

defines tokens: --grain-ambient-tint --grain-atmosphere-bias --grain-blend --grain-body-contrast --grain-body-opacity --grain-body-scale --grain-glow-strength --grain-handle-contrast --grain-handle-opacity --grain-handle-scale --grain-memory-bias --grain-opacity --grain-panel-edge --grain-panel-edge-local --grain-panel-fill --grain-panel-fill-local --grain-panel-fill-strong --grain-panel-glow --grain-panel-glow-local --grain-panel-inset-highlight --grain-panel-overlay-local-opacity --grain-panel-overlay-opacity --grain-panel-rim-local-opacity --grain-panel-rim-opacity +15

public/css/effects/material.css

material.css -------------------------------------------------------------------------- Purpose: - Physics-informed material language for Spwashi.com. - Provide depth, context, and low-cost material tuning for cards, panels, chips, scenes, and text hosts. - Support present interaction systems and modern oklab/oklch color mixing.

reads attrs: data-spw-attention data-spw-charge data-spw-component-kind data-spw-filters data-spw-lore-role data-spw-metamaterial data-spw-overlay

defines tokens: --interaction-excitement --interaction-glow --material-blur-card --material-blur-frame --material-blur-soft --material-depth-opacity --material-depth-opacity-1 --material-depth-opacity-2 --material-depth-opacity-3 --material-duration-base --material-duration-deliberate --material-duration-fast --material-glide-ease --material-highlight-inset --material-ink --material-ink-soft --material-layer-content --material-layer-overlay --material-layer-substrate --material-lift-ease --material-line --material-line-strong --material-local-background --material-local-border-color +9

public/css/effects/metaphysical-paper.css

metaphysical-paper.css Semantic ornament for image-bearing surfaces. The goal is not to impose a universal card treatment, but to let image studies, SVG figures, and page artifacts share a readable image ritual: semantic treatment, hold-to-visit, and a persistent visited glow.

reads attrs: data-spw-brush-active data-spw-brush-mode data-spw-contrast-state data-spw-controls-open data-spw-effect data-spw-effect-stop data-spw-hold-state data-spw-image-effect data-spw-image-gesture data-spw-image-input data-spw-image-layout data-spw-image-preview data-spw-image-prominence data-spw-image-resonance data-spw-image-state data-spw-medium data-spw-override-state data-spw-salience-state data-spw-show-semantic-metadata data-spw-visit-burst data-spw-visited

defines tokens: --spw-image-accent --spw-image-caption-ink --spw-image-caption-shadow --spw-image-drift-x --spw-image-drift-y --spw-image-energy --spw-image-focus-x --spw-image-focus-y --spw-image-glow --spw-image-helper-bg --spw-image-helper-bg-strong --spw-image-helper-border --spw-image-helper-ink --spw-image-helper-lift-shadow --spw-image-helper-secondary-ink --spw-image-helper-shadow --spw-image-line --spw-image-memory-ink --spw-image-paper --spw-image-pixel-cell --spw-image-pixel-line --spw-image-scale --spw-image-tilt-x --spw-image-tilt-y

public/css/effects/wonder.css

wonder.css -------------------------------------------------------------------------- Purpose - Wonder, delight, threshold charge, and semantic celebration layers. - Ambient affordances that can be driven by JS without requiring JS. - Persona-aware modulation for related surfaces, tokens, images, and frames. Notes - This file should remain additive. It should not redefine baseline layout. - Most selectors are low-specificity and attach to existing component nouns. - JS can safely toggle data attributes such as: [data-spw-charge] [data-spw-wonder-state] [data-spw-delight] [data-spw-visited] [da

reads attrs: data-spw-charge data-spw-delight data-spw-form data-spw-hold-state data-spw-operator data-spw-persona data-spw-resonance-probe data-spw-semantic-density data-spw-semantics data-spw-topic data-spw-visited data-spw-wonder-block-state data-spw-wonder-state

defines tokens: --delight-color --spw-delight-ring --spw-prompt-block-bg --spw-prompt-block-ink --spw-prompt-block-line --spw-prompt-block-quiet --spw-resonance --spw-wonder-duration-base --spw-wonder-duration-deliberate --spw-wonder-duration-fast --spw-wonder-ease --spw-wonder-ease-mechanical --spw-wonder-ease-settle --spw-wonder-ring --wonder-accent-color

public/css/grammar/syntax.css

syntax.css -------------------------------------------------------------------------- Purpose - Shared spatial/container grammar for frames, clusters, concepts, forms, delimiters, topic lenses, semantic metadata, and brace/rail distinctions. - Bridge token physics to reusable structural semantics. - Keep route flavor additive while preserving predictable component grammar. - Prepare grammar for future JS cooperation, scoped enhancement, and richer testing across pages/contexts. Design stance - Structural grammar should remain legible without JS. - Metadata should be useful to CSS and runtime w

reads attrs: data-spw-attention data-spw-brace data-spw-component-kind data-spw-config-domain data-spw-container data-spw-depth data-spw-features data-spw-floating-chrome data-spw-form data-spw-gesture data-spw-guide-kind data-spw-guide-value data-spw-harmony data-spw-inspectability data-spw-interactivity data-spw-operator data-spw-overlay data-spw-persona data-spw-popped data-spw-realization data-spw-region-flow data-spw-role data-spw-role-cluster data-spw-selection data-spw-show-semantic-metadata data-spw-stance data-spw-substrate data-spw-topic

defines tokens: --angle-close-color --angle-height --angle-offset --angle-open-color --angle-stroke --angle-width --block-border-color --block-border-width --block-depth-color --block-depth-size --block-highlight-color --block-highlight-offset --block-hover-border-color --block-hover-depth-color --block-hover-highlight-color --block-inset --block-radius --brace-close-color --brace-corner-height --brace-corner-offset --brace-corner-radius --brace-corner-stroke --brace-corner-width --brace-open-color +63

public/css/handles/cognitive-handles.css

cognitive-handles.css -------------------------------------------------------------------------- Purpose: - Semantic affordances for depth, phase, relation, and foldable layers. - Handles should read as paper creases and Spw braces, not decoration. - Tied directly to the operator palette and precision motion grammar.

defines tokens: --depth-0 --depth-1 --depth-2 --depth-3 --depth-4 --handle-concept --handle-duration --handle-ease --handle-entry --handle-instance --handle-line --handle-line-active --handle-phase --handle-relation --phase-expression --phase-initiation --phase-resistance --phase-return --phase-transformation

public/css/handles/logo.css

logo.css -------------------------------------------------------------------------- Spwashi Logo Runtime The logo is the smallest unit of the site's physics. Every state it can enter — preview, charged, emitting, settled — matches the site-wide canonical state vocabulary. Component topology: island (self-contained, interactive, serializable) Touch: tap channel State contract: settled → preview → charged → emitting → settled

defines tokens: --logo-arc-color --logo-charge --logo-w-color --logo-wordmark-opacity

public/css/handles/operators.css

operators.css -------------------------------------------------------------------------- Purpose - Interactive handles, inline affordances, compact control seams, and literate gesture states. - This layer owns "how something can be grasped", not full material, phase, or pretext layout systems. Mental model - Tokens can be grasped as text, pills, seams, or room-signs. - Handles should expose semantic allocation without overwhelming prose. - A good handle explains what can be touched, how it will respond, and which operator / substrate / stance / role it belongs to. Does own - sigils, operator c

reads attrs: data-spw-allocation data-spw-annotation-match data-spw-annotation-state data-spw-bookmarked data-spw-breadcrumb-menu-changed data-spw-breadcrumb-menu-clarity data-spw-breadcrumb-menu-mode data-spw-breadcrumb-menu-phase data-spw-breadcrumb-menu-state data-spw-breadcrumb-reversible data-spw-breadcrumb-state data-spw-charge data-spw-charge-key data-spw-cognitive-handles data-spw-color-mode data-spw-current data-spw-debug-mode data-spw-features data-spw-form data-spw-gesture data-spw-grounded data-spw-guided data-spw-handle data-spw-hint-density data-spw-hint-surface data-spw-inline-form data-spw-knowledge data-spw-latched data-spw-liminality data-spw-meaning-mode data-spw-metric-kind data-spw-operator data-spw-operator-reversibility data-spw-page-arrival data-spw-page-arrival-step data-spw-page-transition-phase data-spw-pinned data-spw-role data-spw-role-cluster data-spw-selection data-spw-show-semantic-metadata data-spw-stance data-spw-substrate data-spw-swappable data-spw-touch

defines tokens: --brace-close-color --brace-open-color --handle-allocation-color --handle-arrival-lift --handle-arrival-opacity --handle-baseline-offset --handle-bg --handle-bg-active --handle-bg-selected --handle-bg-soft --handle-duration-base --handle-duration-deliberate --handle-duration-fast --handle-ease --handle-gap --handle-gap-tight --handle-ink --handle-ink-quiet --handle-ink-soft --handle-line --handle-line-quiet --handle-line-soft --handle-meta-font --handle-min-height +45

public/css/handles/phase-controls.css

phase-controls.css -------------------------------------------------------------------------- Phase Layer Menu Spw phase choice appears as a braced layer control, not arrow navigation. Integrated with the operator matrix, depth tiers, and motion grammar.

defines tokens: --local-phase-color

public/css/ornament/canvas-accents.css

canvas-accents.css -------------------------------------------------------------------------- Spw Canvas Accent Styles Positions the generative canvases as background layers within Spw components. Integrated with global semantic tokens and motion grammar.

reads attrs: data-spw-accent data-spw-accent-palette data-spw-color-mode data-spw-image-prominence data-spw-overlay data-spw-salience-state

defines tokens: --canvas-blend --canvas-opacity

public/css/ornament/ornament.css

ornament.css -------------------------------------------------------------------------- Purpose - Decorative and semi-semantic ornament built from site tokens. - This file acts as a concrete shadow of tokens/core.css: it turns token families into visible rails, seams, halos, sequences, ribbons, and ornamental hierarchies that can later be driven by JS. - Ornament should remain additive. It should not own primary layout. Design stance - Expose variables generously so routes and components can bias ornament. - Treat sibling and child relationships as part of the visible grammar. - Make it easy f

reads attrs: data-spw-child-active data-spw-collected data-spw-collection-intention data-spw-deviation data-spw-interaction-context data-spw-operator data-spw-ornament data-spw-ornament-axis data-spw-ornament-density data-spw-ornament-state data-spw-role-cluster data-spw-sequence-state data-spw-sibling-resonance data-spw-stage data-spw-stance data-spw-substrate data-spw-wonder-state

defines tokens: --ornament-accent --ornament-accent-soft --ornament-collection-dot-size --ornament-dash --ornament-dash-gap --ornament-duration-base --ornament-duration-deliberate --ornament-duration-fast --ornament-ease --ornament-font --ornament-gap-1 --ornament-gap-2 --ornament-gap-3 --ornament-gap-4 --ornament-glow --ornament-line --ornament-line-quiet --ornament-line-strong-width --ornament-line-width --ornament-local-accent --ornament-local-line --ornament-local-surface --ornament-meter-fill --ornament-node-ring +25

public/css/ornament/relational-state.css

relational-state.css -------------------------------------------------------------------------- Environmental effects driven by the State Orchestrator. Implements Attentional Cueing and Relational Resonance.

reads attrs: data-spw-attention

defines tokens: --active-op-color

public/css/ornament/whimsy.css

whimsy.css -------------------------------------------------------------------------- Spw Material Surface Quiet interaction grammar for sigils, folds, and paper-like layers. This file avoids decorative motion; state changes should read as alignment, focus, or revealed structure.

reads attrs: data-spw-operator data-spw-role

defines tokens: --phase-expression --phase-initiation --phase-resistance --phase-return --phase-transformation --spw-fold-duration --spw-fold-ease --spw-paper-corner --spw-paper-focus --spw-paper-wash

public/css/reset/base.css

base.css -------------------------------------------------------------------------- Purpose: - Global baseline, interaction resets, flow defaults, and default typography. - Own shared reading rhythm, anchor behavior, overflow safety, and semantic document flow before route/shell layers specialize the page. Dependency: None (includes hardcoded fallbacks if tokens are missing).

reads attrs: data-spw-animation-throttling data-spw-reduce-motion data-spw-surface

defines tokens: --flow-gap-2xl --flow-gap-2xs --flow-gap-lg --flow-gap-md --flow-gap-sm --flow-gap-xl --flow-gap-xs --flow-reading-gap --flow-section-gap --flow-stack-gap --focus-ring-color --focus-ring-offset --selection-bg --selection-ink --site-line-height --site-root-font-size

public/css/routes/about-surface.css

about-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped identity for /about - Shift the page toward practical clarity, durable structure, and tangible conversion of attention into tools, surfaces, services, and hospitality - Reduce ornamental drift and support a more direct, less flowery tone - Keep compatibility with shared shell/components/systems layers Design stance - About should feel grounded, useful, and directional - The page should read like an operating memo with enough warmth to feel human, but not vague - Priority should g

reads attrs: data-spw-color-mode data-spw-image-surface data-spw-surface

defines tokens: --about-accent --about-accent-2 --about-accent-2-soft --about-accent-3 --about-accent-3-soft --about-accent-soft --about-bg --about-bg-deep --about-bg-field --about-frame-shadow --about-frame-shadow-hover --about-ink --about-ink-faint --about-ink-mid --about-ink-soft --about-line --about-line-accent --about-line-strong --about-panel-radius --about-panel-radius-loose --about-surface --about-surface-matte --about-surface-soft --about-surface-strong +18

public/css/routes/boonhonk-mixer.css

boonhonk-mixer.css -------------------------------------------------------------------------- Visual mixer for the five boonhonk operators. The field should feel less like a flat polygon and more like a living, weighted vessel with room for subtle preference tuning later. Design goals - prepare for nuanced taste adjustments rather than binary states - expose richer variables for JS, SVG, and audience-facing handles - make combinatorics feel dimensional, not merely geometric - support later additions like softness, bias, skew, bloom, orbit, resonance, and local taste correction Suggested JS-fac

reads attrs: data-spw-selection

defines tokens: --bhm-accent --bhm-bane-color --bhm-bg --bhm-bone-color --bhm-bonk-color --bhm-boon-color --bhm-center-glow --bhm-center-scale --bhm-charge --bhm-depth-lift --bhm-duration-base --bhm-duration-deliberate --bhm-duration-fast --bhm-ease --bhm-field-glow --bhm-gap-x --bhm-gap-y --bhm-honk-color --bhm-line --bhm-node-glow --bhm-operator-border --bhm-operator-color --bhm-operator-soft --bhm-pad +7

public/css/routes/care-intake.css

care-intake.css -------------------------------------------------------------------------- Purpose - Visual contract for the care intake form and output profile card. - Warm, legible, and structurally clear — not clinical, not cold. - The profile card is screenshottable: self-contained, print-safe, and designed to be shared on the person's own terms. State contract (via --care-charge): - 0 → empty (generate button disabled) - 0–0.5 → filling - 0.5–1 → ready - 1 → complete Screenshot mode (data-screenshot-mode on .care-profile-card): - [data-screenshot-hidden] children are hidden - Card

defines tokens: --care-accent --care-accent-soft --care-accent-wash --care-charge --care-line --profile-accent --profile-ink --profile-ink-soft --profile-line

public/css/routes/contact-surface.css

contact-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped identity for /contact - Bias the page toward fast routing, public visibility, and calm clarity - Make DMs on X, TikTok, and Instagram feel easy to notice and easy to act on - Support service-first contact while still presenting public surfaces well Design stance - Contact should feel lighter and more decisive than About - Priority should be obvious in the visual hierarchy - “Fastest route” cards should scan immediately - Public surfaces should still feel rich, but secondary

reads attrs: data-spw-color-mode data-spw-surface

defines tokens: --active-op-bg-soft --active-op-border --active-op-color --contact-accent --contact-accent-2 --contact-accent-2-soft --contact-accent-3 --contact-accent-3-soft --contact-accent-soft --contact-bg --contact-bg-deep --contact-bg-field --contact-frame-shadow --contact-frame-shadow-hover --contact-ink --contact-ink-faint --contact-ink-mid --contact-ink-soft --contact-line --contact-line-strong --contact-panel-radius --contact-panel-radius-loose --contact-priority-ring --contact-surface +9

public/css/routes/craft-surface.css

Craft Surface -------------------------------------------------------------------------- Author-facing topic routes for fragments, motifs, and file traditions. Route-gated so it can be removed or revised without disturbing software pages. Direction - Inspire authors and invoke wonder about palettes, page systems, panels, typographic layers, and how a reader might "enter a book". - Keep the route materially calm enough for reading, but rich enough to suggest print logic, illustration logic, and editorial hierarchy. - Bias toward paper, ink, margin, caption, motif, and chapter-room feeling.

reads attrs: data-spw-color-mode data-spw-high-contrast data-spw-surface

defines tokens: --bg --bg-deep --bg-field --craft-accent --craft-accent-soft --craft-display --craft-fold-edge --craft-gold-dust --craft-ink-blue --craft-leaf --craft-panel-glow --craft-panel-shadow --craft-rose-ink --craft-sans --craft-serif --craft-teal --grain-panel-fill-local --grain-panel-glow-local --grain-panel-shadow-local --ink --ink-faint --ink-soft --line --line-accent +5

public/css/routes/design-experiments.css

design-experiments.css -------------------------------------------------------------------------- Purpose - Route-scoped experiment-lab styles keyed by body[data-spw-page-family="experiment-lab"]. - Keep experimental controls readable while preserving the shared frame, slot, and semantic metadata contracts. - Keep experiment blocks mapped to visible HTML nouns. Debugging notes - Prefer data-spw-feature or data-spw-slot for durable clusters. - If a rule would help more than one route, move it to components or systems/surfaces instead of widening this file.

reads attrs: data-spw-page-family

defines tokens: --design-rule-accent

public/css/routes/design-surface.css

design-surface.css -------------------------------------------------------------------------- Surface purpose - /design/ reuses the website surface vocabulary for coordination, but its hero and route cards need a stable light reading contract. - Keep these rules route-seeded so other website/design-register pages can make their own material choices.

reads attrs: data-spw-page-seed

defines tokens: --design-surface-accent --design-surface-base --design-surface-base-soft --design-surface-base-strong --design-surface-ink --design-surface-ink-mid --design-surface-ink-soft --design-surface-line --design-surface-line-strong --design-surface-link --design-surface-panel --design-surface-panel-bg --design-surface-panel-bg-strong --design-surface-panel-strong --design-surface-paper --design-surface-shell-line --grammar-ink --grammar-ink-soft --grammar-line --grammar-surface --grammar-surface-soft --grammar-surface-strong --ink --ink-mid +23

public/css/routes/play-surface.css

play-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped surface layer for body[data-spw-surface="play"]. - Gives /play/ a stronger role as session console, campaign atlas, and interactive route for playful systems. - Aligns with site rhythm, measured presets, and shared Spw frame semantics without fighting global component layers.

reads attrs: data-spw-charge-key data-spw-charge-state data-spw-flow data-spw-phase data-spw-playing data-spw-reduce-motion data-spw-surface

defines tokens: --bg --bg-deep --ink --ink-soft --line --line-strong --measure-code --play-accent --play-accent-soft --play-card-min-height-phone --play-card-min-height-tablet --play-card-readable-width --play-control-min-height --play-control-min-width --play-measure --play-panel-min-height-phone --play-panel-min-height-tablet --play-pretext-line-gap-approach --play-pretext-line-gap-contact --play-pretext-line-gap-projecting --play-pretext-line-gap-resting --play-readable-width --play-rhythm-accent-mix --play-rhythm-border-strength +10

public/css/routes/recipes-surface.css

recipes-surface.css -------------------------------------------------------------------------- Purpose - Give /recipes/ a distinct route identity instead of relying on the generic shell. - Bias the page toward handled warmth, denser registry rhythm, and a slightly more inventory-like feel without turning it into a dashboard.

reads attrs: data-spw-color-mode data-spw-slot data-spw-surface

defines tokens: --active-op-bg-soft --active-op-border --active-op-color --ink --ink-soft --line --line-strong --recipes-accent --recipes-accent-soft --recipes-ember --recipes-gold --recipes-ink --recipes-ink-soft --recipes-line --recipes-line-strong --recipes-panel --recipes-panel-warm --recipes-paper --recipes-shadow --recipes-surface --recipes-surface-soft --recipes-surface-strong --spw-main-width --spw-prompt-block-bg +5

public/css/routes/rpg-wednesday-surface.css

rpg-wednesday-surface.css -------------------------------------------------------------------------- Purpose - Give /play/rpg-wednesday/ a dedicated campaign surface. - Use published image references to make the route feel alive, not generic. - Keep the route readable while introducing stronger mood and capture cues.

reads attrs: data-spw-image-surface data-spw-surface

defines tokens: --rpg-accent --rpg-accent-soft --rpg-capture-preview-height --rpg-character-image-max-inline-size --rpg-line --rpg-panel --rpg-paper --rpg-wonder --spw-main-width

public/css/routes/services-configurator.css

services-configurator.css -------------------------------------------------------------------------- Purpose - Weighted field for tier resolution. - Four dimensions resolve to a service tier via a scoring formula. - Mirrors the boonhonk-mixer interaction language, but with more explicit dimensional hierarchy, value reasoning, and SVG-ready semantic states. Design goals - Prepare for more advanced combinatorics and SVG interactions. - Make price movement, charge, and utility feel grounded and legible. - Support elegant, screenshot-worthy value selection with precise state. - Give JS a richer st

defines tokens: --node-color --svc-accent --svc-accent-soft --svc-accent-strong --svc-bg --svc-bg-strong --svc-center-scale --svc-charge --svc-duration-base --svc-duration-deliberate --svc-duration-fast --svc-ease --svc-gap --svc-line --svc-line-strong --svc-pad-x --svc-pad-y --svc-price-y --svc-radius --svc-radius-tight --svc-resolve-alpha --svc-settle-ease --svc-text --svc-text-soft +2

public/css/routes/services-surface.css

services-surface.css -------------------------------------------------------------------------- Purpose - Give /services/ a warmer, image-backed route identity. - Let promoted reference images feel deliberate instead of pasted in. - Keep the surface readable while carrying more atmosphere.

reads attrs: data-spw-surface

defines tokens: --services-accent --services-accent-cool --services-glow --services-line --services-line-strong --services-panel --services-paper --spw-main-width

public/css/routes/surfaces/blog-frames.css

routes/surfaces/blog-frames.css -------------------------------------------------------------------------- Blog route frame treatments: brace perspective, registers, and demo panels. 3. Brace perspective frames

reads attrs: data-spw-beat data-spw-charge-key data-spw-charge-state data-spw-flow data-spw-liminality data-spw-perspective data-spw-phase data-spw-playing data-spw-surface

defines tokens: --blog-card-readable-width --blog-frame-objective-opacity --blog-frame-subjective-opacity --blog-pretext-line-gap-approach --blog-pretext-line-gap-contact --blog-pretext-line-gap-projecting --blog-pretext-line-gap-resting --blog-readable-width --blog-rhythm-accent-mix --blog-rhythm-border-strength --blog-rhythm-shadow-strength --pretext-line-gap --pretext-line-height --pretext-line-max-inline-size --pretext-local-pad --pretext-local-radius

public/css/routes/surfaces/blog-layouts.css

routes/surfaces/blog-layouts.css -------------------------------------------------------------------------- Blog route layout patterns for indexes, specimen cards, and print rhythm. 8. Route layouts

reads attrs: data-spw-surface

defines tokens: --blog-gap-4 --blog-panel-pad

public/css/routes/surfaces/blog-motion.css

routes/surfaces/blog-motion.css -------------------------------------------------------------------------- Blog route motion guardrails and responsive adjustments. 9. Reduced motion

reads attrs: data-spw-flow data-spw-reduce-motion data-spw-surface

public/css/routes/surfaces/blog.css

blog-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped surface system for body[data-spw-surface="blog"]. - Orchestrates reading-first defaults, semantic theming, and route-specific rhythm/phase bridges. - Discrete UI components (Interpreter, Demos, Registers) have been extracted.

reads attrs: data-spw-color-mode data-spw-high-contrast data-spw-surface

defines tokens: --blog-accent --blog-bg --blog-bg-card --blog-bg-card-strong --blog-bg-deep --blog-draft --blog-draft-bg --blog-field-bg --blog-focus-outline --blog-focus-ring --blog-gap-1 --blog-gap-2 --blog-gap-3 --blog-gap-4 --blog-gap-5 --blog-ink --blog-ink-soft --blog-line --blog-line-strong --blog-measure --blog-objective-line --blog-panel-pad --blog-play --blog-radius +17

public/css/routes/surfaces/home-panels.css

routes/surfaces/home-panels.css -------------------------------------------------------------------------- Home route panel stack: operators, climate tuning, entry loops, reading.

reads attrs: data-spw-color-mode data-spw-reduce-motion data-spw-surface

defines tokens: --home-accent-ink --home-shadow --home-shadow-active --home-shadow-quiet --home-surface-bg --home-surface-bg-muted --home-surface-bg-strong --home-surface-border --home-surface-border-strong

public/css/routes/surfaces/home.css

home-surface.css -------------------------------------------------------------------------- CSS for the rewritten homepage HTML: - quieter kernel hero - separate operator field - separate climate tuning layer - distinct reading-layer panels - token-driven, parser-tolerant

reads attrs: data-spw-surface

defines tokens: --card-border-emphasis --component-accent --focus-ring --home-accent-ink --home-accent-line --home-accent-line-strong --home-accent-primary --home-accent-secondary --home-accent-tertiary --home-accent-wash --home-accent-wash-soft --home-accent-wash-strong --home-frame-padding --home-gap-2xl --home-gap-lg --home-gap-md --home-gap-sm --home-gap-xl --home-gap-xs --home-hero-padding --home-measure --home-measure-tight --home-measure-wide --home-radius-lg +18

public/css/routes/surfaces/plans-cards.css

routes/surfaces/plans-cards.css -------------------------------------------------------------------------- Plans route card and stage-grid composition. 5. Plans grid and plan cards

reads attrs: data-spw-surface

public/css/routes/surfaces/plans-relationships.css

routes/surfaces/plans-relationships.css -------------------------------------------------------------------------- Plans route relationship panels, discovery frames, and future graph affordance. 8. Relationship panels

reads attrs: data-spw-surface

public/css/routes/surfaces/plans-responsive.css

routes/surfaces/plans-responsive.css -------------------------------------------------------------------------- Plans route responsive and narrow-screen composition. 11. Responsive

reads attrs: data-spw-surface

public/css/routes/surfaces/plans.css

plans-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped identity for /about/plans - Support the rewritten plans page as a semantic registry rather than a loose stack of cards - Emphasize verbs, stages, relationships, and later visualization - Prepare the page for future JS filters / graph views / semantic overlays Design stance - Practical, structured, inspectable - Less ornamental than craft, less ambient than blog - Strong enough to suggest diagrams, without pretending the diagram is already built - Verbs should feel like handles fo

reads attrs: data-spw-color-mode data-spw-surface

defines tokens: --active-op-bg-soft --active-op-border --active-op-color --grain-panel-fill-local --grain-panel-glow-local --grain-panel-shadow-local --measure-panel --measure-reading --objective-brace-color --objective-brace-wash --plans-accent --plans-accent-2 --plans-accent-2-soft --plans-accent-3 --plans-accent-3-soft --plans-accent-4 --plans-accent-4-soft --plans-accent-soft --plans-bg --plans-bg-deep --plans-bg-field --plans-frame-shadow --plans-frame-shadow-hover --plans-ink +28

public/css/routes/surfaces/review-surfaces.css

routes/surfaces/review-surfaces.css -------------------------------------------------------------------------- Focused review surfaces for split catalog and experiment slices. The JS enhancer injects the rail; this file gives it the right material, rhythm, and SVG readability.

reads attrs: data-spw-page-role

defines tokens: --review-rail-accent --review-rail-line --review-rail-line-strong --review-rail-shadow --review-rail-surface

public/css/routes/surfaces/settings-cues.css

routes/surfaces/settings-cues.css -------------------------------------------------------------------------- Settings route section cues and cross-surface dimensional accents. 8. Dimensional section cues

reads attrs: data-spw-surface

defines tokens: --settings-pad-block --settings-pad-inline

public/css/routes/surfaces/settings-forms.css

routes/surfaces/settings-forms.css -------------------------------------------------------------------------- Settings route form groups, controls, and control-grid affordances. 3. Settings Forms & Categories

reads attrs: data-spw-surface

public/css/routes/surfaces/settings-notes.css

routes/surfaces/settings-notes.css -------------------------------------------------------------------------- Settings route local note register and browser-resident note controls. 6. Local note register

reads attrs: data-spw-surface

public/css/routes/surfaces/settings-runtime.css

routes/surfaces/settings-runtime.css -------------------------------------------------------------------------- Settings route runtime maps, navigators, and structure/state grids. 8. Runtime map / navigators / structures

reads attrs: data-spw-surface

public/css/routes/surfaces/settings.css

settings-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped surface system for body[data-spw-surface="settings"]. - A highly legible, structured space focused on inspection and control. - Differs from reading (blog) or play surfaces by emphasizing rigid containment, interactive feedback, and high-contrast boundaries.

reads attrs: data-spw-color-mode data-spw-surface

defines tokens: --active-op-color --settings-accent --settings-accent-soft --settings-control-bg --settings-control-bg-active --settings-control-line --settings-control-line-soft --settings-gap --settings-ink --settings-ink-soft --settings-ink-strong --settings-measure --settings-muted --settings-pad-block --settings-pad-inline --settings-panel-bg --settings-panel-bg-quiet

public/css/routes/tools-budgeting-surface.css

tools-budgeting-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped surface for body[data-spw-surface="tools-budgeting"]. - Present budgeting as a compact working dashboard without moving shared card, panel, or shell ownership out of the system CSS files. - Keep dashboard, panel, summary, row, and status semantics inspectable. Debugging notes - Use route scope first, then component nouns. - Promote reusable table/card/control behavior to component-family CSS.

reads attrs: data-spw-surface

public/css/routes/topics-surface.css

topics-surface.css -------------------------------------------------------------------------- Purpose - Give topic routes a coherent field-guide atmosphere. - Let photo studies and diagrams share a palette instead of floating apart. - Create a strong default for math and future design-adjacent topic pages.

reads attrs: data-spw-color-mode data-spw-image-hero data-spw-image-prominence data-spw-image-shape data-spw-slot data-spw-surface

defines tokens: --card-highlight --card-shadow --ink --ink-soft --line --line-strong --spw-main-width --surface --surface-panel --surface-panel-strong --surface-soft --surface-strong --topics-accent --topics-accent-soft --topics-card-shadow --topics-ink --topics-ink-soft --topics-input-bg --topics-line --topics-line-strong --topics-panel --topics-panel-muted --topics-panel-violet --topics-panel-warm +12

public/css/routes/website-surface.css

website-surface.css -------------------------------------------------------------------------- Surface purpose - /about/website should feel like a field guide, observatory, and specimen surface for the site itself. - Support calm reading first, then richer microcosm detail. - Distinguish nooks / registers / specimens / workshop logic without making the page feel like a dashboard.

reads attrs: data-spw-category-family data-spw-color-mode data-spw-promptability data-spw-surface

defines tokens: --card-highlight --card-shadow --family-accent --ink --ink-soft --line --line-strong --spw-philosophy-line --spw-philosophy-panel --spw-philosophy-paper --spw-prompt-block-bg --spw-prompt-block-ink --spw-prompt-block-line --surface --surface-panel --surface-panel-strong --surface-soft --surface-strong --website-accent --website-accent-quiet --website-accent-soft --website-chip-bg --website-ink --website-ink-soft +17

public/css/shell/chrome.css

chrome.css -------------------------------------------------------------------------- Purpose - Own the shared site chrome: sticky header, primary navigation, nav disclosure affordances, and the shared site footer. - Keep shell chrome concerns separate from generic page scaffolding so route surfaces and shell defaults are easier to reason about.

reads attrs: data-spw-annotation-state data-spw-cadence data-spw-empty data-spw-features data-spw-flow data-spw-grounded data-spw-handle-advanced data-spw-handle-phase data-spw-handle-shell-state data-spw-handle-state data-spw-menu data-spw-menu-changed data-spw-menu-clarity data-spw-menu-mode data-spw-menu-phase data-spw-menu-pressure data-spw-menu-reversible data-spw-menu-topology data-spw-nav-fit data-spw-nav-tokenized data-spw-promo-theme data-spw-route-menu-layout data-spw-route-menu-scope data-spw-section-handle data-spw-section-handle-desktop data-spw-shell-action data-spw-shell-menu-lock data-spw-shell-pointer data-spw-shell-scroll data-spw-shell-scroll-direction data-spw-show-footer data-spw-viewport

defines tokens: --active-op-color --pretext-block-pad --pretext-edge-opacity --pretext-inline-pad --pretext-outline-width --pretext-radius --pretext-rail-color --pretext-rail-glow --pretext-rail-width --pretext-surface-wash --shell-header-height --shell-header-pad-block --shell-nav-font-size --shell-nav-gap-inline --shell-nav-min-height --shell-nav-padding-inline --shell-panel-bg --shell-panel-bg-soft --spw-header-indicator-opacity --spw-header-indicator-shift --spw-header-opacity-local --spw-header-trace-opacity --spw-header-trace-shift --spw-shell-chrome-accent-local +17

public/css/shell/layout.css

layout.css -------------------------------------------------------------------------- Purpose - Site shell, viewport framing, page scaffolding, safe-area behavior, generic page rhythm, header/footer/navigation contracts, and broad “default page” presentation for spwashi.com. - This file should be trustworthy even on pages with minimal markup. - It should provide a pleasant generic page by default, while leaving room for routes to bias identity later. Design stance - The shell should feel materially calm, structurally clear, and subtly dimensional before any route-specific CSS loads. - Defaults

reads attrs: data-spw-layout data-spw-pivot-active data-spw-shell-density

defines tokens: --page-gutter-block --page-gutter-inline --page-section-gap --page-section-gap-tight --page-stack-gap --page-stack-gap-loose --page-width --page-width-reading --page-width-wide --shell-duration-base --shell-duration-deliberate --shell-duration-fast --shell-ease --shell-footer-font-size --shell-footer-min-height --shell-footer-opacity --shell-header-grid-gap --shell-header-height --shell-header-min-height --shell-header-pad-block --shell-header-pad-inline --shell-hero-pad-block --shell-hero-pad-inline --shell-nav-font-size +39

public/css/style.css
public/css/systems/pretext-physics.css

pretext-physics.css -------------------------------------------------------------------------- Purpose - Visual contract for pretext runtime state. - Make text behavior inspectable and expressive without overwhelming reading. - Give designers stable hooks for microanimation, scaffolds, and semantic layout behavior. - Stay legible when enhancement is absent or reduced. Expected HTML / JS contract - [data-spw-flow="pretext"] - .pretext-flow-lines - .pretext-flow-line - .pretext-flow-line-text - .pretext-flow-scaffold Expected state attributes - [data-text-kind] - [data-text-density] - [data-text

reads attrs: data-spw-debug data-spw-flow data-spw-page-arrival data-spw-page-arrival-step data-spw-page-presence data-spw-page-transition-phase data-spw-role

defines tokens: --pretext-arrival-opacity --pretext-arrival-scale --pretext-arrival-shift --pretext-block-pad --pretext-edge-color --pretext-edge-offset --pretext-edge-opacity --pretext-edge-scale --pretext-inline-pad --pretext-line-gap --pretext-line-max-inline-size --pretext-line-opacity --pretext-line-scale --pretext-line-shift --pretext-outline-color --pretext-outline-width --pretext-radius --pretext-rail-color --pretext-rail-glow --pretext-rail-width --pretext-scaffold-border --pretext-scaffold-opacity --pretext-scaffold-scale --pretext-surface-wash +3

public/css/systems/substrate-ecology.css

substrate-ecology.css -------------------------------------------------------------------------- Purpose - Shared ecological contract for Spw surfaces. - Defines context, room, permeability, succession, and field-state tokens that other surface files can consume. - Keeps memo seams, helper seams, and environmental response generic enough to work across cards, labs, settings, figures, navigator, and console. Design rules - Surface ecology should be composable and medium-agnostic. - Local field state should feel environmental, not gimmicky. - Room-aware seams should appear only when the substrat

reads attrs: data-spw-context data-spw-field-wonder data-spw-memo-wonder data-spw-permeability data-spw-room data-spw-succession data-spw-surface-kind

defines tokens: --spw-field-charge --spw-field-comparison --spw-field-constraint --spw-field-inquiry --spw-field-memory --spw-field-orientation --spw-field-projection --spw-field-resonance --spw-surface-atmosphere --spw-surface-clarity --spw-surface-local-atmosphere --spw-surface-local-clarity --spw-surface-local-memory --spw-surface-local-permeability --spw-surface-local-pressure --spw-surface-local-resonance --spw-surface-memory --spw-surface-permeability --spw-surface-pressure --spw-surface-resonance --spw-surface-room-scale --spw-surface-seam-gap --spw-surface-seam-opacity --spw-surface-seam-radius

public/css/systems/surfaces/base.css

surfaces/base.css -------------------------------------------------------------------------- Shared shell variables and macro-layout normalization.

defines tokens: --spw-palette-probe-1 --spw-palette-probe-2 --spw-palette-probe-3 --spw-palette-probe-4 --spw-shell-card-bg --spw-shell-card-bg-strong --spw-shell-card-gap --spw-shell-card-pad --spw-shell-card-shadow --spw-shell-card-shadow-raised --spw-shell-card-transition --spw-shell-inline-gap --spw-shell-line --spw-shell-line-strong --spw-shell-overlay --spw-shell-panel-bg --spw-shell-panel-bg-strong --spw-shell-panel-gap --spw-shell-panel-pad --spw-shell-sheen --spw-shell-soft-bg

public/css/systems/surfaces/drift.css

surfaces/drift.css -------------------------------------------------------------------------- Return-visitor, gratitude, and wonder reward surfaces.

public/css/systems/surfaces/media.css

surfaces/media.css -------------------------------------------------------------------------- Media publishing and collection layouts.

reads attrs: data-spw-features

public/css/systems/surfaces/philosophy.css

surfaces/philosophy.css -------------------------------------------------------------------------- Intent lattices, context edges, and semantic contracts.

reads attrs: data-spw-edge data-spw-intent data-spw-surface

defines tokens: --edge-accent --intent-accent --spw-philosophy-line --spw-philosophy-panel --spw-philosophy-paper

public/css/systems/surfaces/rpg.css

surfaces/rpg.css -------------------------------------------------------------------------- RPG gameplay kits, character labs, and asset boards.

reads attrs: data-spw-features

public/css/systems/surfaces/topics.css

surfaces/topics.css -------------------------------------------------------------------------- Topic reference, study surfaces, and illustrated cards.

reads attrs: data-spw-image-shape

public/css/systems/surfaces/tuning.css

surfaces/tuning.css -------------------------------------------------------------------------- Climate tuning, vibe widgets, palette probes, and theme choosers.

reads attrs: data-spw-palette-probe-active

defines tokens: --theme-pack-preview-dark --theme-pack-preview-light

public/css/systems/svg-personas.css

svg-personas.css -------------------------------------------------------------------------- Spw SVG Personas & Meta-UI Tailors SVG rendering and interaction artifacts to the active technical persona. Integrated with the global token ecology, eliminating the need for manual dark/light mode overrides.

reads attrs: data-spw-persona

public/css/systems/svg-surfaces.css

svg-surfaces.css -------------------------------------------------------------------------- SVG surface layer. SVG enters as a bounded, captioned host. The HTML around the SVG remains the semantic source of truth; the graphic projects relationships over it. Operator node color contexts (.op-node--{type}) are ungated — they apply to any SVG that uses the naming convention, not just svg-surfaces contexts. This lets inline SVG diagrams live anywhere and still pick up the palette.

reads attrs: data-spw-contrast-state data-spw-features data-spw-image-state data-spw-svg-companion data-spw-svg-pointer data-spw-svg-pointer-state data-spw-svg-tune-contrast data-spw-svg-tune-motion

defines tokens: --spw-svg-brand-accent --spw-svg-brand-field --spw-svg-motion-rate --spw-svg-node-fill-mix --spw-svg-pointer-intensity --spw-svg-pointer-lift --spw-svg-pointer-x --spw-svg-pointer-x-ratio --spw-svg-pointer-y --spw-svg-pointer-y-ratio --spw-svg-surface-border --spw-svg-surface-shadow

public/css/tokens/core.css

core.css -------------------------------------------------------------------------- Purpose - Define primitive scales, semantic aliases, and runtime-facing state contracts for Spw surfaces. - Support granular expressive styling for authoring, reading, revision, publishing, SVG diagrams, narrative interfaces, and JS-managed semantic surfaces. - Keep climate, theme, author workflow, and component expression separable. Architecture 1. Registered state properties 2. Primitive scales 3. Typography and manuscript rhythm 4. Color, material, line, and depth substrate 5. Motion and interaction grammar

reads attrs: data-spw-color-mode data-spw-component-density data-spw-developmental-climate data-spw-high-contrast data-spw-reduce-motion data-spw-semantic-density data-spw-spirit-phase data-spw-theme-pack

defines tokens: --active-op-bg-soft --active-op-border --active-op-color --amber --amber-soft --annotation-accent --annotation-bg --annotation-line --attention-echo-duration --attention-field-decay --attention-field-radius --attention-handle-offset --attention-rail-gap --attention-rail-width --author-annotation-strength --author-draft-privacy --author-margin-presence --author-mode --author-mode-accent --author-mode-ink --author-mode-line --author-mode-wash --author-mode-wash-strong --author-publication-readiness +469

public/css/typography/base.css

base.css -------------------------------------------------------------------------- Spw General & Operator Typography * Defines the core reading rhythm, heading scales, and rich-text semantics. Also houses the dynamic operator typography, where font axes (weight, tracking, size, oblique) interpolate based on the `--charge` state.

reads attrs: data-spw-charge data-spw-grounded data-spw-grounded-in data-spw-operator data-spw-readable

defines tokens: --charge --flow-space --spw-link-grounded-color --spw-link-visited-color --type-oblique-range --type-size-surge --type-tracking-base --type-tracking-range --type-weight-base --type-weight-range

public/css/typography/context.css

context.css -------------------------------------------------------------------------- Spw Typography Context Routing Modulates the base typography and operator axes based on the surrounding environmental state (density, rhythm, and layout stability).

reads attrs: data-spw-operator data-spw-rhythm

defines tokens: --type-field-pressure --type-field-rhythm-bias --type-field-sigil-salience --type-size-surge --type-tracking-range --type-weight-bias --type-weight-range

public/css/typography/typesetting.css

typesetting.css -------------------------------------------------------------------------- Editorial Typography & Interactive Publishing Provides utility for expressive layouts, "wonder" mode reading, fluid typography scaling, optical sizing, and reading lenses. Activated via: [data-spw-typeset="editorial"]

reads attrs: data-spw-focus-lens data-spw-layout data-spw-pinch-scaling data-spw-reading-beat data-spw-reading-beat-role data-spw-reading-groove data-spw-typeset data-spw-typeset-surface

defines tokens: --site-body-font --site-editorial-font --spw-reading-lead-accent --spw-reading-lead-color --spw-reading-lead-glow --spw-reading-lead-opacity --spw-reading-lead-shift --spw-reading-near-accent --spw-reading-near-color --spw-reading-near-opacity --spw-reading-near-shift --spw-reading-rest-color --spw-reading-rest-opacity --spw-reading-rest-shift --surface-editorial

src/styles/entries/debug.css

debug.css -------------------------------------------------------------------------- Purpose - Debug-only overlays for page surface -> feature/module -> slots. Activation - html[data-spw-debug-mode="on"] or [data-spw-debug~="css"] or [data-spw-debug~="layout"]. Ownership - Expose structure only; move required UI rules to the semantic owner.

reads attrs: data-spw-component-id data-spw-context data-spw-debug data-spw-debug-mode data-spw-feature data-spw-floating-chrome data-spw-kind data-spw-layout data-spw-layout-owner data-spw-module data-spw-page-family data-spw-page-primary-action data-spw-page-responsibility data-spw-page-role data-spw-page-status data-spw-page-zone data-spw-route-family data-spw-semantic-owner data-spw-slot data-spw-surface

defines tokens: --spw-css-debug-color

src/styles/entries/design-experiments.css

design-experiments.css -------------------------------------------------------------------------- Purpose - Route-scoped experiment-lab styles keyed by body[data-spw-page-family="experiment-lab"]. - Keep experimental controls readable while preserving the shared frame, slot, and semantic metadata contracts. - Keep experiment blocks mapped to visible HTML nouns. Debugging notes - Prefer data-spw-feature or data-spw-slot for durable clusters. - If a rule would help more than one route, move it to components or systems/surfaces instead of widening this file.

reads attrs: data-spw-page-family

defines tokens: --design-rule-accent

src/styles/entries/tools-budgeting-surface.css

tools-budgeting-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped surface for body[data-spw-surface="tools-budgeting"]. - Present budgeting as a compact working dashboard without moving shared card, panel, or shell ownership out of the system CSS files. - Keep dashboard, panel, summary, row, and status semantics inspectable. Debugging notes - Use route scope first, then component nouns. - Promote reusable table/card/control behavior to component-family CSS.

reads attrs: data-spw-surface

Assets

Public image assets and review-side renders. This section is meant for local and production review of the site media inventory.

apple-touch-icon.png

1 asset

assets

2 assets

assets/home

13 assets

assets/illustrations

9 assets

assets/motifs

3 assets

creatures

4 assets

favicon.svg

1 asset

home

18 assets

icon-192.png

1 asset

icon-512.png

1 asset

icon-maskable-512.png

1 asset

play/rpg-wednesday

2 assets

renders/_raw

8 assets

renders/_raw-2x2

3 assets

renders/2026-03-10-favicon-study

10 assets

renders/papergami

10 assets

renders/unsorted-curation

13 assets

routes

27 assets

services

1 asset

topics/math

1 asset

Custom-property tokens

Every --token — where defined, where consumed.

--about-accent

defined in: public/css/routes/about-surface.css

--about-accent-2

defined in: public/css/routes/about-surface.css

--about-accent-2-soft

defined in: public/css/routes/about-surface.css

--about-accent-3

defined in: public/css/routes/about-surface.css

--about-accent-3-soft

defined in: public/css/routes/about-surface.css

--about-accent-soft

defined in: public/css/routes/about-surface.css

--about-bg

defined in: public/css/routes/about-surface.css

--about-bg-deep

defined in: public/css/routes/about-surface.css

--about-bg-field

defined in: public/css/routes/about-surface.css

--about-frame-shadow

defined in: public/css/routes/about-surface.css

--about-frame-shadow-hover

defined in: public/css/routes/about-surface.css

--about-ink

defined in: public/css/routes/about-surface.css

--about-ink-faint

defined in: public/css/routes/about-surface.css

--about-ink-mid

defined in: public/css/routes/about-surface.css

--about-ink-soft

defined in: public/css/routes/about-surface.css

--about-line

defined in: public/css/routes/about-surface.css

--about-line-accent

defined in: public/css/routes/about-surface.css

--about-line-strong

defined in: public/css/routes/about-surface.css

--about-panel-radius

defined in: public/css/routes/about-surface.css

--about-panel-radius-loose

defined in: public/css/routes/about-surface.css

--about-surface

defined in: public/css/routes/about-surface.css

--about-surface-matte

defined in: public/css/routes/about-surface.css

--about-surface-soft

defined in: public/css/routes/about-surface.css

--about-surface-strong

defined in: public/css/routes/about-surface.css

--active-op-bg-soft

defined in: public/css/routes/about-surface.css public/css/routes/contact-surface.css public/css/routes/recipes-surface.css public/css/routes/surfaces/plans.css public/css/tokens/core.css

--active-op-border

defined in: public/css/routes/about-surface.css public/css/routes/contact-surface.css public/css/routes/recipes-surface.css public/css/routes/surfaces/plans.css public/css/tokens/core.css

--active-op-color

initial: hsl(180 72% 30%)

defined in: public/css/ornament/relational-state.css public/css/routes/about-surface.css public/css/routes/contact-surface.css public/css/routes/recipes-surface.css public/css/routes/surfaces/plans.css public/css/routes/surfaces/settings.css public/css/shell/chrome.css public/css/tokens/core.css

--amber

defined in: public/css/tokens/core.css

--amber-soft

defined in: public/css/tokens/core.css

--amount-bg

defined in: public/css/components/cards/payment-card.css

--amount-bg-hover

defined in: public/css/components/cards/payment-card.css

--amount-bg-selected

defined in: public/css/components/cards/payment-card.css

--amount-border

defined in: public/css/components/cards/payment-card.css

--angle-close-color

defined in: public/css/grammar/syntax.css

--angle-height

defined in: public/css/grammar/syntax.css

--angle-offset

defined in: public/css/grammar/syntax.css

--angle-open-color

defined in: public/css/grammar/syntax.css

--angle-stroke

defined in: public/css/grammar/syntax.css

--angle-width

defined in: public/css/grammar/syntax.css

--annotation-accent

defined in: public/css/tokens/core.css

--annotation-bg

defined in: public/css/tokens/core.css

--annotation-line

defined in: public/css/tokens/core.css

--attention-echo-duration

defined in: public/css/tokens/core.css

--attention-field-decay

defined in: public/css/tokens/core.css

--attention-field-radius

defined in: public/css/tokens/core.css

--attention-handle-offset

defined in: public/css/tokens/core.css

--attention-rail-gap

defined in: public/css/tokens/core.css

--attention-rail-width

defined in: public/css/tokens/core.css

--author-annotation-strength

defined in: public/css/tokens/core.css

--author-draft-privacy

defined in: public/css/tokens/core.css

--author-margin-presence

defined in: public/css/tokens/core.css

--author-mode

defined in: public/css/tokens/core.css

--author-mode-accent

defined in: public/css/tokens/core.css

--author-mode-ink

defined in: public/css/tokens/core.css

--author-mode-line

defined in: public/css/tokens/core.css

--author-mode-wash

defined in: public/css/tokens/core.css

--author-mode-wash-strong

defined in: public/css/tokens/core.css

--author-publication-readiness

defined in: public/css/tokens/core.css

--author-thread-density

defined in: public/css/tokens/core.css

--badge-bg

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--badge-text

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--bane-bg-soft

defined in: public/css/tokens/core.css

--bane-border

defined in: public/css/tokens/core.css

--bane-color

defined in: public/css/tokens/core.css

--bane-glow

defined in: public/css/tokens/core.css

--bg

defined in: public/css/routes/craft-surface.css public/css/routes/play-surface.css public/css/tokens/core.css

--bg-deep

defined in: public/css/routes/craft-surface.css public/css/routes/play-surface.css public/css/tokens/core.css

--bg-field

defined in: public/css/routes/craft-surface.css public/css/tokens/core.css

--bg-ritual

defined in: public/css/tokens/core.css

--bhm-accent

defined in: public/css/routes/boonhonk-mixer.css

--bhm-bane-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-bg

defined in: public/css/routes/boonhonk-mixer.css

--bhm-bone-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-bonk-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-boon-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-center-glow

defined in: public/css/routes/boonhonk-mixer.css

--bhm-center-scale

defined in: public/css/routes/boonhonk-mixer.css

--bhm-charge

defined in: public/css/routes/boonhonk-mixer.css

--bhm-depth-lift

defined in: public/css/routes/boonhonk-mixer.css

--bhm-duration-base

defined in: public/css/routes/boonhonk-mixer.css

--bhm-duration-deliberate

defined in: public/css/routes/boonhonk-mixer.css

--bhm-duration-fast

defined in: public/css/routes/boonhonk-mixer.css

--bhm-ease

defined in: public/css/routes/boonhonk-mixer.css

--bhm-field-glow

defined in: public/css/routes/boonhonk-mixer.css

--bhm-gap-x

defined in: public/css/routes/boonhonk-mixer.css

--bhm-gap-y

defined in: public/css/routes/boonhonk-mixer.css

--bhm-honk-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-line

defined in: public/css/routes/boonhonk-mixer.css

--bhm-node-glow

defined in: public/css/routes/boonhonk-mixer.css

--bhm-operator-border

defined in: public/css/routes/boonhonk-mixer.css

--bhm-operator-color

defined in: public/css/routes/boonhonk-mixer.css

--bhm-operator-soft

defined in: public/css/routes/boonhonk-mixer.css

--bhm-pad

defined in: public/css/routes/boonhonk-mixer.css

--bhm-polygon-opacity

defined in: public/css/routes/boonhonk-mixer.css

--bhm-radius

defined in: public/css/routes/boonhonk-mixer.css

--bhm-settle-ease

defined in: public/css/routes/boonhonk-mixer.css

--bhm-surface-rim

defined in: public/css/routes/boonhonk-mixer.css

--bhm-surface-tint

defined in: public/css/routes/boonhonk-mixer.css

--bhm-text

defined in: public/css/routes/boonhonk-mixer.css

--bhm-text-soft

defined in: public/css/routes/boonhonk-mixer.css

--block-border-color

defined in: public/css/grammar/syntax.css

--block-border-width

defined in: public/css/grammar/syntax.css

--block-depth-color

defined in: public/css/grammar/syntax.css

--block-depth-size

defined in: public/css/grammar/syntax.css

--block-highlight-color

defined in: public/css/grammar/syntax.css

--block-highlight-offset

defined in: public/css/grammar/syntax.css

--block-hover-border-color

defined in: public/css/grammar/syntax.css

--block-hover-depth-color

defined in: public/css/grammar/syntax.css

--block-hover-highlight-color

defined in: public/css/grammar/syntax.css

--block-inset

defined in: public/css/grammar/syntax.css

--block-radius

defined in: public/css/grammar/syntax.css

--blog-accent

defined in: public/css/routes/surfaces/blog.css

--blog-bg

defined in: public/css/routes/surfaces/blog.css

--blog-bg-card

defined in: public/css/routes/surfaces/blog.css

--blog-bg-card-strong

defined in: public/css/routes/surfaces/blog.css

--blog-bg-deep

defined in: public/css/routes/surfaces/blog.css

--blog-card-readable-width

defined in: public/css/routes/surfaces/blog-frames.css

--blog-draft

defined in: public/css/routes/surfaces/blog.css

--blog-draft-bg

defined in: public/css/routes/surfaces/blog.css

--blog-field-bg

defined in: public/css/routes/surfaces/blog.css

--blog-focus-outline

defined in: public/css/routes/surfaces/blog.css

--blog-focus-ring

defined in: public/css/routes/surfaces/blog.css

--blog-frame-objective-opacity

defined in: public/css/routes/surfaces/blog-frames.css

--blog-frame-subjective-opacity

defined in: public/css/routes/surfaces/blog-frames.css

--blog-gap-1

defined in: public/css/routes/surfaces/blog.css

--blog-gap-2

defined in: public/css/routes/surfaces/blog.css

--blog-gap-3

defined in: public/css/routes/surfaces/blog.css

--blog-gap-4

defined in: public/css/routes/surfaces/blog-layouts.css public/css/routes/surfaces/blog.css

--blog-gap-5

defined in: public/css/routes/surfaces/blog.css

--blog-ink

defined in: public/css/routes/surfaces/blog.css

--blog-ink-soft

defined in: public/css/routes/surfaces/blog.css

--blog-line

defined in: public/css/routes/surfaces/blog.css

--blog-line-strong

defined in: public/css/routes/surfaces/blog.css

--blog-measure

defined in: public/css/routes/surfaces/blog.css

--blog-objective-line

defined in: public/css/routes/surfaces/blog.css

--blog-panel-pad

defined in: public/css/routes/surfaces/blog-layouts.css public/css/routes/surfaces/blog.css

--blog-play

defined in: public/css/routes/surfaces/blog.css

--blog-pretext-line-gap-approach

defined in: public/css/routes/surfaces/blog-frames.css

--blog-pretext-line-gap-contact

defined in: public/css/routes/surfaces/blog-frames.css

--blog-pretext-line-gap-projecting

defined in: public/css/routes/surfaces/blog-frames.css

--blog-pretext-line-gap-resting

defined in: public/css/routes/surfaces/blog-frames.css

--blog-radius

defined in: public/css/routes/surfaces/blog.css

--blog-radius-loose

defined in: public/css/routes/surfaces/blog.css

--blog-radius-tight

defined in: public/css/routes/surfaces/blog.css

--blog-readable-width

defined in: public/css/routes/surfaces/blog-frames.css

--blog-rhythm-accent-mix

defined in: public/css/routes/surfaces/blog-frames.css

--blog-rhythm-border-strength

defined in: public/css/routes/surfaces/blog-frames.css

--blog-rhythm-shadow-strength

defined in: public/css/routes/surfaces/blog-frames.css

--blog-shadow-card

defined in: public/css/routes/surfaces/blog.css

--blog-shadow-soft

defined in: public/css/routes/surfaces/blog.css

--blog-spw

defined in: public/css/routes/surfaces/blog.css

--blog-spw-bg

defined in: public/css/routes/surfaces/blog.css

--blog-subjective-line

defined in: public/css/routes/surfaces/blog.css

--blog-transition-fast

defined in: public/css/routes/surfaces/blog.css

--blog-transition-ui

defined in: public/css/routes/surfaces/blog.css

--blog-warn

defined in: public/css/routes/surfaces/blog.css

--blog-warn-bg

defined in: public/css/routes/surfaces/blog.css

--blog-wonder

defined in: public/css/routes/surfaces/blog.css

--blog-wonder-bg

defined in: public/css/routes/surfaces/blog.css

--blue

defined in: public/css/tokens/core.css

--bone-bg-soft

defined in: public/css/tokens/core.css

--bone-border

defined in: public/css/tokens/core.css

--bone-color

defined in: public/css/tokens/core.css

--bonk-bg-soft

defined in: public/css/tokens/core.css

--bonk-border

defined in: public/css/tokens/core.css

--bonk-color

defined in: public/css/tokens/core.css

--boon-bg-soft

defined in: public/css/tokens/core.css

--boon-border

defined in: public/css/tokens/core.css

--boon-color

defined in: public/css/tokens/core.css

--boon-glow

defined in: public/css/tokens/core.css

--border-soft
--boundary-rail-width-strong
--brace-close-color

defined in: public/css/grammar/syntax.css public/css/handles/operators.css

--brace-corner-height

defined in: public/css/grammar/syntax.css

--brace-corner-offset

defined in: public/css/grammar/syntax.css

--brace-corner-radius

defined in: public/css/grammar/syntax.css

--brace-corner-stroke

defined in: public/css/grammar/syntax.css

--brace-corner-width

defined in: public/css/grammar/syntax.css

--brace-edge-alpha

defined in: public/css/effects/cinematic.css

--brace-glow-alpha

defined in: public/css/effects/cinematic.css

--brace-inner-density

defined in: public/css/effects/cinematic.css

--brace-open-color

defined in: public/css/grammar/syntax.css public/css/handles/operators.css

--brace-settle-duration

defined in: public/css/tokens/core.css

--brace-settle-ease

defined in: public/css/tokens/core.css

--brace-strip-width

defined in: public/css/tokens/core.css

--canvas-blend

defined in: public/css/ornament/canvas-accents.css

--canvas-opacity

defined in: public/css/ornament/canvas-accents.css

--card-bg

defined in: public/css/components/cards/payment-card.css

--card-bg-hover
--card-bg-soft

defined in: public/css/components/cards/payment-card.css

--card-border-color

defined in: public/css/components/cards/payment-card.css

--card-border-emphasis

defined in: public/css/effects/developmental-climate.css public/css/routes/surfaces/home.css public/css/tokens/core.css

--card-border-hover
--card-border-strong

defined in: public/css/components/cards/payment-card.css

--card-charge

defined in: public/css/components/cards/profile-card.css public/css/components/cards/seed-card.css

--card-font

defined in: public/css/components/cards/payment-card.css

--card-highlight

defined in: public/css/routes/topics-surface.css public/css/routes/website-surface.css public/css/tokens/core.css

--card-max-width

defined in: public/css/components/cards/payment-card.css

--card-padding

defined in: public/css/components/cards/payment-card.css

--card-radius

defined in: public/css/components/cards/payment-card.css

--card-shadow

defined in: public/css/components/cards/payment-card.css public/css/routes/topics-surface.css public/css/routes/website-surface.css public/css/tokens/core.css

--card-shadow-active

defined in: public/css/components/cards/payment-card.css

--card-shadow-hover

defined in: public/css/tokens/core.css

--card-text

defined in: public/css/components/cards/payment-card.css

--card-text-faint

defined in: public/css/components/cards/payment-card.css

--card-text-soft

defined in: public/css/components/cards/payment-card.css

--care-accent

defined in: public/css/routes/care-intake.css

--care-accent-soft

defined in: public/css/routes/care-intake.css

--care-accent-wash

defined in: public/css/routes/care-intake.css

--care-charge

defined in: public/css/routes/care-intake.css

--care-line

defined in: public/css/routes/care-intake.css

--charcoal
--charcoal-dark

defined in: public/css/tokens/core.css

--charcoal-light

defined in: public/css/tokens/core.css

--charcoal-rgb

defined in: public/css/tokens/core.css

--charge

initial: 0

defined in: public/css/effects/cinematic.css public/css/tokens/core.css public/css/typography/base.css

--charge-accent

defined in: public/css/effects/electromagnetic-container.css

--charge-ink

defined in: public/css/effects/electromagnetic-container.css

--charge-kinetic

defined in: public/css/effects/electromagnetic-container.css

--charge-manifest

defined in: public/css/effects/electromagnetic-container.css

--charge-none

defined in: public/css/effects/electromagnetic-container.css

--charge-potential

defined in: public/css/effects/electromagnetic-container.css

--charge-release-duration

defined in: public/css/tokens/core.css

--charge-release-ease

defined in: public/css/tokens/core.css

--charge-state

defined in: public/css/effects/electromagnetic-container.css

--charge-wash

defined in: public/css/effects/electromagnetic-container.css

--cinematic-arrive-duration

defined in: public/css/effects/cinematic.css

--cinematic-arrive-ease

defined in: public/css/effects/cinematic.css

--cinematic-climate-atmosphere

defined in: public/css/effects/cinematic.css

--cinematic-climate-charge-bias

defined in: public/css/effects/cinematic.css

--cinematic-climate-clarity

defined in: public/css/effects/cinematic.css

--cinematic-climate-memory

defined in: public/css/effects/cinematic.css

--cinematic-climate-pressure

defined in: public/css/effects/cinematic.css

--cinematic-climate-resonance

defined in: public/css/effects/cinematic.css

--cinematic-climate-selection-bias

defined in: public/css/effects/cinematic.css

--cinematic-depth-scale

defined in: public/css/effects/cinematic.css

--cinematic-dwell-duration

defined in: public/css/effects/cinematic.css

--cinematic-dwell-ease

defined in: public/css/effects/cinematic.css

--cinematic-ease
--cinematic-field-color

defined in: public/css/effects/cinematic.css

--cinematic-field-opacity

defined in: public/css/effects/cinematic.css

--cinematic-field-radius

defined in: public/css/effects/cinematic.css

--cinematic-glow-scale

defined in: public/css/effects/cinematic.css

--cinematic-intensity

defined in: public/css/effects/cinematic.css

--cinematic-outline-alpha

defined in: public/css/effects/cinematic.css

--cinematic-outline-scale

defined in: public/css/effects/cinematic.css

--cinematic-release-duration

defined in: public/css/effects/cinematic.css

--cinematic-release-ease

defined in: public/css/effects/cinematic.css

--cinematic-shadow-alpha

defined in: public/css/effects/cinematic.css

--cinematic-wash-alpha

defined in: public/css/effects/cinematic.css

--cinematic-wash-scale

defined in: public/css/effects/cinematic.css

--circle-close-color

defined in: public/css/grammar/syntax.css

--circle-height

defined in: public/css/grammar/syntax.css

--circle-offset

defined in: public/css/grammar/syntax.css

--circle-open-color

defined in: public/css/grammar/syntax.css

--circle-stroke

defined in: public/css/grammar/syntax.css

--circle-width

defined in: public/css/grammar/syntax.css

--climate-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-accent-ink

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-accent-line

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-accent-line-strong

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-accent-wash

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-accent-wash-strong

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-anchor-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-annotation

defined in: public/css/effects/developmental-climate.css

--climate-annotation-strength

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-atmosphere-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-badge-bg

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-badge-text

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-charge-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-clarity

defined in: public/css/effects/developmental-climate.css

--climate-clarity-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-connection-strength

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-density

defined in: public/css/effects/developmental-climate.css

--climate-frame-header-line

defined in: public/css/effects/developmental-climate.css

--climate-frame-left-rail

defined in: public/css/effects/developmental-climate.css

--climate-gap-scale

defined in: public/css/effects/developmental-climate.css

--climate-hint-opacity

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-hover-lift

defined in: public/css/effects/developmental-climate.css

--climate-interaction

defined in: public/css/effects/developmental-climate.css

--climate-local-gap

defined in: public/css/effects/developmental-climate.css

--climate-local-pad

defined in: public/css/effects/developmental-climate.css

--climate-margin-tint

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-memory-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-menu-bg

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-menu-line

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-menu-shadow

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-offer-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-orient-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-outline-strength

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-pad-scale

defined in: public/css/effects/developmental-climate.css

--climate-paper-tint

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-pressure-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-publication

defined in: public/css/effects/developmental-climate.css

--climate-publication-strength

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-rehearse-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-relation

defined in: public/css/effects/developmental-climate.css

--climate-resonance-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-seam

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-seam-color

defined in: public/css/effects/developmental-climate.css

--climate-seam-width

defined in: public/css/effects/developmental-climate.css

--climate-selection-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-selection-ring

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--climate-transition-duration

defined in: public/css/tokens/core.css

--climate-transition-slow

defined in: public/css/tokens/core.css

--climate-transition-timing

defined in: public/css/tokens/core.css

--climate-weave-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--coherence

defined in: public/css/effects/electromagnetic-container.css

--component-accent

defined in: public/css/components/foundation.css public/css/routes/surfaces/home.css

--component-accent-soft

defined in: public/css/components/foundation.css

--component-accent-strong

defined in: public/css/components/foundation.css

--component-accent-wash

defined in: public/css/components/foundation.css

--component-arrival-offset

defined in: public/css/components/signals.css public/css/components/surfaces.css

--component-arrival-opacity

defined in: public/css/components/signals.css public/css/components/surfaces.css

--component-border

defined in: public/css/components/foundation.css public/css/components/runtime-states.css

--component-border-quiet

defined in: public/css/components/foundation.css

--component-border-strong

defined in: public/css/components/foundation.css public/css/components/runtime-states.css

--component-chip-height

defined in: public/css/components/foundation.css

--component-code-measure

defined in: public/css/components/foundation.css

--component-frame-shadow

defined in: public/css/components/foundation.css

--component-frame-shadow-active

defined in: public/css/components/foundation.css

--component-gap

defined in: public/css/components/foundation.css

--component-gap-loose

defined in: public/css/components/foundation.css

--component-gap-roomy

defined in: public/css/components/foundation.css

--component-gap-tight

defined in: public/css/components/content.css public/css/components/foundation.css public/css/components/runtime-states.css

--component-header-min-height

defined in: public/css/components/foundation.css

--component-layer-base

defined in: public/css/components/foundation.css

--component-layer-overlay

defined in: public/css/components/foundation.css

--component-layer-raised

defined in: public/css/components/foundation.css

--component-material-bg

defined in: public/css/components/frames.css

--component-material-border

defined in: public/css/components/frames.css

--component-material-shadow

defined in: public/css/components/frames.css

--component-measure

defined in: public/css/components/foundation.css public/css/components/frames.css

--component-measure-tight

defined in: public/css/components/foundation.css

--component-measure-wide

defined in: public/css/components/foundation.css

--component-module-active-ring

defined in: public/css/components/foundation.css

--component-module-context-ring

defined in: public/css/components/foundation.css

--component-module-hydration-ring

defined in: public/css/components/foundation.css

--component-module-rail-end

defined in: public/css/components/foundation.css

--component-module-rail-opacity

defined in: public/css/components/foundation.css

--component-module-rail-start

defined in: public/css/components/foundation.css

--component-module-rail-width

defined in: public/css/components/foundation.css

--component-pad

defined in: public/css/components/content.css public/css/components/foundation.css public/css/components/runtime-states.css

--component-pad-loose

defined in: public/css/components/foundation.css

--component-pad-roomy

defined in: public/css/components/foundation.css

--component-pad-tight

defined in: public/css/components/foundation.css

--component-radius

defined in: public/css/components/foundation.css

--component-radius-loose

defined in: public/css/components/foundation.css

--component-radius-pill

defined in: public/css/components/foundation.css

--component-radius-tight

defined in: public/css/components/foundation.css

--component-rail-width

defined in: public/css/components/foundation.css

--component-route-accent

defined in: public/css/components/foundation.css public/css/components/signals.css

--component-route-marker-bg

defined in: public/css/components/foundation.css

--component-route-marker-line

defined in: public/css/components/foundation.css

--component-route-marker-text

defined in: public/css/components/foundation.css

--component-shadow

defined in: public/css/components/foundation.css

--component-shadow-active

defined in: public/css/components/foundation.css

--component-shadow-quiet

defined in: public/css/components/foundation.css

--component-surface

defined in: public/css/components/foundation.css

--component-surface-elevated

defined in: public/css/components/foundation.css

--component-surface-matte

defined in: public/css/components/foundation.css

--component-surface-soft

defined in: public/css/components/foundation.css

--component-surface-strong

defined in: public/css/components/foundation.css

--component-text

defined in: public/css/components/surfaces.css

--component-text-soft

defined in: public/css/components/surfaces.css

--component-transition-arrival

defined in: public/css/components/foundation.css public/css/components/signals.css

--component-transition-base

defined in: public/css/components/foundation.css

--component-transition-deliberate

defined in: public/css/components/foundation.css

--component-transition-fast

defined in: public/css/components/foundation.css

--conception-color

defined in: public/css/effects/electromagnetic-container.css

--connector-color

defined in: public/css/tokens/core.css

--contact-accent

defined in: public/css/routes/contact-surface.css

--contact-accent-2

defined in: public/css/routes/contact-surface.css

--contact-accent-2-soft

defined in: public/css/routes/contact-surface.css

--contact-accent-3

defined in: public/css/routes/contact-surface.css

--contact-accent-3-soft

defined in: public/css/routes/contact-surface.css

--contact-accent-soft

defined in: public/css/routes/contact-surface.css

--contact-bg

defined in: public/css/routes/contact-surface.css

--contact-bg-deep

defined in: public/css/routes/contact-surface.css

--contact-bg-field

defined in: public/css/routes/contact-surface.css

--contact-frame-shadow

defined in: public/css/routes/contact-surface.css

--contact-frame-shadow-hover

defined in: public/css/routes/contact-surface.css

--contact-ink

defined in: public/css/routes/contact-surface.css

--contact-ink-faint

defined in: public/css/routes/contact-surface.css

--contact-ink-mid

defined in: public/css/routes/contact-surface.css

--contact-ink-soft

defined in: public/css/routes/contact-surface.css

--contact-line

defined in: public/css/routes/contact-surface.css

--contact-line-strong

defined in: public/css/routes/contact-surface.css

--contact-panel-radius

defined in: public/css/routes/contact-surface.css

--contact-panel-radius-loose

defined in: public/css/routes/contact-surface.css

--contact-priority-ring

defined in: public/css/routes/contact-surface.css

--contact-surface

defined in: public/css/routes/contact-surface.css

--contact-surface-soft

defined in: public/css/routes/contact-surface.css

--contact-surface-strong

defined in: public/css/routes/contact-surface.css

--container-border

defined in: public/css/grammar/syntax.css

--container-shadow

defined in: public/css/grammar/syntax.css

--container-surface

defined in: public/css/grammar/syntax.css

--craft-accent

defined in: public/css/routes/craft-surface.css

--craft-accent-soft

defined in: public/css/routes/craft-surface.css

--craft-display

defined in: public/css/routes/craft-surface.css

--craft-fold-edge

defined in: public/css/routes/craft-surface.css

--craft-gold-dust

defined in: public/css/routes/craft-surface.css

--craft-ink-blue

defined in: public/css/routes/craft-surface.css

--craft-leaf

defined in: public/css/routes/craft-surface.css

--craft-panel-glow

defined in: public/css/routes/craft-surface.css

--craft-panel-shadow

defined in: public/css/routes/craft-surface.css

--craft-rose-ink

defined in: public/css/routes/craft-surface.css

--craft-sans

defined in: public/css/routes/craft-surface.css

--craft-serif

defined in: public/css/routes/craft-surface.css

--craft-teal

defined in: public/css/routes/craft-surface.css

--crescendo-cinematic

defined in: public/css/tokens/core.css

--crescendo-component

defined in: public/css/tokens/core.css

--crescendo-compositional

defined in: public/css/tokens/core.css

--crescendo-grain

defined in: public/css/tokens/core.css

--crescendo-ornament

defined in: public/css/tokens/core.css

--crescendo-structural

defined in: public/css/tokens/core.css

--crescendo-surface

defined in: public/css/tokens/core.css

--current-phase-hue
--current-phase-light
--current-phase-sat
--delight-color

defined in: public/css/effects/wonder.css

--demo-color
--depth-0

defined in: public/css/handles/cognitive-handles.css

--depth-1

defined in: public/css/handles/cognitive-handles.css

--depth-2

defined in: public/css/handles/cognitive-handles.css

--depth-3

defined in: public/css/handles/cognitive-handles.css

--depth-4

defined in: public/css/handles/cognitive-handles.css

--depth-active

defined in: public/css/tokens/core.css

--depth-ambient

defined in: public/css/tokens/core.css

--depth-cinematic

defined in: public/css/tokens/core.css

--depth-indicator-width
--depth-projected

defined in: public/css/tokens/core.css

--depth-settled

defined in: public/css/tokens/core.css

--design-meter-fill
--design-rule-accent

defined in: public/css/routes/design-experiments.css src/styles/entries/design-experiments.css

--design-surface-accent

defined in: public/css/routes/design-surface.css

--design-surface-base

defined in: public/css/routes/design-surface.css

--design-surface-base-soft

defined in: public/css/routes/design-surface.css

--design-surface-base-strong

defined in: public/css/routes/design-surface.css

--design-surface-ink

defined in: public/css/routes/design-surface.css

--design-surface-ink-mid

defined in: public/css/routes/design-surface.css

--design-surface-ink-soft

defined in: public/css/routes/design-surface.css

--design-surface-line

defined in: public/css/routes/design-surface.css

--design-surface-line-strong

defined in: public/css/routes/design-surface.css

--design-surface-link

defined in: public/css/routes/design-surface.css

--design-surface-panel

defined in: public/css/routes/design-surface.css

--design-surface-panel-bg

defined in: public/css/routes/design-surface.css

--design-surface-panel-bg-strong

defined in: public/css/routes/design-surface.css

--design-surface-panel-strong

defined in: public/css/routes/design-surface.css

--design-surface-paper

defined in: public/css/routes/design-surface.css

--design-surface-shell-line

defined in: public/css/routes/design-surface.css

--developmental-accent

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-accent-soft

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-accent-strong

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-atmosphere

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-badge-bg

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-badge-text

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-border

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-border-strong

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-charge-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-clarity

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-guide-opacity

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-hue

defined in: public/css/effects/developmental-climate.css

--developmental-indicator-opacity

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-light

defined in: public/css/effects/developmental-climate.css

--developmental-live-accent

defined in: public/css/effects/developmental-climate.css

--developmental-memory

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-menu-bg

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-menu-line

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-menu-shadow

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-pressure

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-resonance

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-sat

defined in: public/css/effects/developmental-climate.css

--developmental-seam-opacity

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-selection-bias

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-surface-tint

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-surface-tint-strong

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-transition-duration

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-transition-slow

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--developmental-transition-timing

defined in: public/css/effects/developmental-climate.css public/css/tokens/core.css

--drag-dx

defined in: public/css/effects/cinematic.css

--drag-dy

defined in: public/css/effects/cinematic.css

--duration-base

defined in: public/css/tokens/core.css

--duration-ceremonial

defined in: public/css/tokens/core.css

--duration-deliberate

defined in: public/css/tokens/core.css

--duration-fast

defined in: public/css/tokens/core.css

--duration-instant

defined in: public/css/tokens/core.css

--duration-slow

defined in: public/css/tokens/core.css

--duration-snap

defined in: public/css/tokens/core.css

--ease-chassis

defined in: public/css/tokens/core.css

--ease-joint

defined in: public/css/tokens/core.css

--ease-mechanical

defined in: public/css/tokens/core.css

--ease-orbit

defined in: public/css/tokens/core.css

--ease-paper

defined in: public/css/tokens/core.css

--ease-pivot

defined in: public/css/tokens/core.css

--ease-precise

defined in: public/css/tokens/core.css

--ease-release

defined in: public/css/tokens/core.css

--ease-reveal

defined in: public/css/tokens/core.css

--ease-settle

defined in: public/css/tokens/core.css

--ease-smooth

Showing first 500 of 1767 tokens. See catalog.json for the full list.

Philosophy docs

.spw/ files that name attributes or tokens — the prose source of meaning.

.spw/surfaces/page-model.spw

mentions attrs: data-spw-attentional-weight data-spw-component-address data-spw-component-id data-spw-component-name data-spw-context data-spw-debug-source data-spw-decay-rate data-spw-density data-spw-feature data-spw-floating-chrome data-spw-gradient-boundary data-spw-instrumentation data-spw-interaction-context data-spw-layout data-spw-layout-owner data-spw-liminality-floor data-spw-overlay data-spw-page-arrival data-spw-page-arrival-step data-spw-page-family data-spw-page-presence data-spw-page-role data-spw-page-transition data-spw-page-transition-phase data-spw-promptability data-spw-receptor-breadth data-spw-region-flow data-spw-related-routes data-spw-route-family data-spw-route-menu- data-spw-semantic-owner data-spw-surface data-spw-wonder-state