/* =========================================================================== TSP DESIGN SYSTEM 02 — TOKENS --------------------------------------------------------------------------- Canonical design tokens for The Soul Physics ecosystem. This file contains all raw visual values used by the system. It defines the color DNA from which Identity, Realm, Expression, and interface appearance are later rendered. This file does NOT define: • page identity classes • surface-role mappings • gradients • components • Kadence layout behaviour Includes: • Ink tokens • Product Identity color tokens • Realm Identity color tokens • Expression Identity color tokens • Canonical eight-density semantic aliases Rule: HEX values may appear here, and only here. All other CSS files must reference these tokens instead of raw HEX values. =========================================================================== */ /* =========================================================================== TOKEN STRUCTURE --------------------------------------------------------------------------- Purpose Defines the shared eight-density naming structure used across all Product, Realm, Expression and Utility palettes. Why Every palette exposes the same canonical interface. This allows 03-system.css to activate any palette without knowing where it originated. The Orchestration Layer (03-system.css) activates a Palette and a Surface Profile. Canonical Density Axis d-8 = Anchor Deep d-7 = Anchor Core d-6 = Anchor Threshold d-5 = Surface Rich d-4 = Surface Main d-3 = Surface Bridge d-2 = Surface Soft d-1 = Surface Air Anchor Scale d-8 → d-6 Surface Scale d-5 → d-1 --------------------------------------------------------------------------- BACKGROUND ARCHITECTURE Background rendering belongs entirely to 03-system.css. Every page appearance is resolved through three independent dimensions. 1. Site Defines where the page belongs within the ecosystem. Examples site-home site-physics site-events 2. Palette Defines the emotional colour identity. Examples pal-home pal-physics pal-peach pal-see pal-utility 3. Surface Defines how the active palette unfolds through the page background. Surface Profiles surf-reading Fast transition towards lighter surfaces. 0% 2% 10% 28% 100% surf-landing Slower transition. Preserves more identity in the upper viewport. 0% 8% 25% 55% 100% surf-anchor Immersive dark presentation. Uses the Anchor Scale instead of the Surface Scale. --------------------------------------------------------------------------- DEFAULT RESOLUTION Every Site defines a default Palette and a default Surface. Example site-home ↓ pal-home ↓ surf-anchor site-physics ↓ pal-physics ↓ surf-reading site-events ↓ pal-utility ↓ surf-reading Authors normally specify only the Site. Palette and Surface are overridden only when a page intentionally departs from the default appearance. --------------------------------------------------------------------------- Canonical Interface Every palette exposes the same density interface. Raw Density Tokens --name-d8 --name-d7 --name-d6 --name-d5 --name-d4 --name-d3 --name-d2 --name-d1 Semantic Anchor Aliases --name-anchor-deep --name-anchor-core --name-anchor-threshold Semantic Surface Aliases --name-surface-rich --name-surface-main --name-surface-bridge --name-surface-soft --name-surface-air --------------------------------------------------------------------------- Canonical Principle Tokens never define page appearance. Tokens define only the visual vocabulary. 03-system.css resolves Site ↓ Palette ↓ Surface ↓ Final Background Components consume only the resolved semantic tokens and never reference raw palette values directly. =========================================================================== */ :root { /* ========================================================================= INKS ------------------------------------------------------------------------- Purpose: Defines canonical text colors used throughout the system. Why: Ink is not an Identity color. It exists solely to preserve readability across different surfaces. Ink map: primary → default content ink for light surfaces inverse → default content ink for dark surfaces pure-black → absolute black pure-white → absolute white Rule: Use Ink tokens for readable text. Use Pure tokens only when an absolute color is required for logos, SVG artwork, print, masks, export, or similar contexts. The system intentionally provides only two canonical content inks: • primary • inverse Visual emphasis should be achieved through hierarchy, typography and spacing rather than additional ink variants. ========================================================================= */ --ink-primary: #2B2B2B; --ink-inverse: #F7F7F5; --pure-black: #000000; --pure-white: #FFFFFF; /* ========================================================================= LAYER 1 — PRODUCT IDENTITY COLORS ------------------------------------------------------------------------- Purpose: Defines the page-level worlds of the ecosystem. Why: Product Identity answers: "Where am I in the ecosystem?" These colors carry navigation, orientation, and ecosystem belonging. Product Identity map: Home → Anchor / Origin → ecosystem entry / night / source Physics → Horizon Blue → clarity / natural law / understanding Soul → Dusty Rose → resonance / warmth / feeling Enav → Navigation Teal → navigation / movement / field orientation Play → Stellar Blue → interaction / experiment / app layer Utility → Alabaster → quiet functional placeholder Rule: Components never consume Product Identity tokens directly. 03-system.css translates the active Product Identity into Surface Roles and Page Modes consumed by components. ========================================================================= */ /* ===== PRODUCT IDENTITY — BRAND GOLD Character: logo in gold version ========================================================================== */ /* ========================================================================== BRAND GOLD — RAW COLOR TOKENS ========================================================================== */ --brand-gold-shadow: #6A3B08; --brand-gold-deep: #B96A10; --brand-gold: #E58A12; --brand-gold-light: #FFD45F; --brand-gold-highlight: #FFF4B8; /* ===== PRODUCT IDENTITY — HOME / ANCHOR Character: origin, silence, depth, presence. ========================================================================== */ --home-d8: #0B2D39; --home-d7: #0D3F52; --home-d6: #114B5F; --home-d5: #236A82; --home-d4: #3F86A4; --home-d3: #6AAAC4; --home-d2: #92C2D4; --home-d1: #EAF5F9; --home-anchor-deep: var(--home-d8); --home-anchor-core: var(--home-d7); --home-anchor-threshold: var(--home-d6); --home-surface-rich: var(--home-d5); --home-surface-main: var(--home-d4); --home-surface-bridge: var(--home-d3); --home-surface-soft: var(--home-d2); --home-surface-air: var(--home-d1); /* ===== PRODUCT IDENTITY — PHYSICS / THE PHYSICS WAY Character: horizon blue, clarity, understanding, natural law. ========================================================================== */ --physics-d8: #13293D; --physics-d7: #1E3B55; --physics-d6: #2F5878; --physics-d5: #3A7098; --physics-d4: #5090B6; --physics-d3: #6EAAC6; --physics-d2: #9EC8DA; --physics-d1: #ECF4F8; --physics-anchor-deep: var(--physics-d8); --physics-anchor-core: var(--physics-d7); --physics-anchor-threshold: var(--physics-d6); --physics-surface-rich: var(--physics-d5); --physics-surface-main: var(--physics-d4); --physics-surface-bridge: var(--physics-d3); --physics-surface-soft: var(--physics-d2); --physics-surface-air: var(--physics-d1); /* ===== PRODUCT IDENTITY — SOUL / THE SOUL FREQUENCY Character: dusty rose, resonance, warmth, feeling. ========================================================================== */ --soul-d8: #42202A; --soul-d7: #5C2F3A; --soul-d6: #794553; --soul-d5: #965866; --soul-d4: #BC7480; --soul-d3: #CE9EAA; --soul-d2: #E0C2CA; --soul-d1: #F7EEF0; --soul-anchor-deep: var(--soul-d8); --soul-anchor-core: var(--soul-d7); --soul-anchor-threshold: var(--soul-d6); --soul-surface-rich: var(--soul-d5); --soul-surface-main: var(--soul-d4); --soul-surface-bridge: var(--soul-d3); --soul-surface-soft: var(--soul-d2); --soul-surface-air: var(--soul-d1); /* ===== PRODUCT IDENTITY — ENAV / ENERGONAUTICS Character: teal, navigation, movement, field orientation. ========================================================================== */ --enav-d8: #0C1F22; --enav-d7: #193A3F; --enav-d6: #26565C; --enav-d5: #357880; --enav-d4: #4D9EAA; --enav-d3: #6AB4C4; --enav-d2: #9ACCD8; --enav-d1: #E2F6F4; --enav-anchor-deep: var(--enav-d8); --enav-anchor-core: var(--enav-d7); --enav-anchor-threshold: var(--enav-d6); --enav-surface-rich: var(--enav-d5); --enav-surface-main: var(--enav-d4); --enav-surface-bridge: var(--enav-d3); --enav-surface-soft: var(--enav-d2); --enav-surface-air: var(--enav-d1); /* ===== PRODUCT IDENTITY — PLAY Character: stellar blue, interactive exploration, experiment, app layer. ========================================================================== */ --play-d8: #1D2D57; --play-d7: #2B4478; --play-d6: #396094; --play-d5: #3A5E96; --play-d4: #4E71B3; --play-d3: #7191C4; --play-d2: #9EB3DA; --play-d1: #F1F4F9; --play-anchor-deep: var(--play-d8); --play-anchor-core: var(--play-d7); --play-anchor-threshold: var(--play-d6); --play-surface-rich: var(--play-d5); --play-surface-main: var(--play-d4); --play-surface-bridge: var(--play-d3); --play-surface-soft: var(--play-d2); --play-surface-air: var(--play-d1); /* ===== PRODUCT IDENTITY — UTILITY Character: alabaster, quiet functional identity. Used currently by: Events, Grow, Blog, Shop, Login. Utility is a shared placeholder identity. Any Utility section may later receive its own dedicated identity. Implementation note: Utility currently aliases the Neutral / Alabaster Realm Identity. ========================================================================= */ --utility-d8: #23343C; --utility-d7: #30454E; --utility-d6: #49616A; --utility-d5: #6F858E; --utility-d4: #A3B3B9; --utility-d3: #DCE4E7; --utility-d2: #F1F5F6; --utility-d1: #FCFDFD; --utility-anchor-deep: var(--utility-d8); --utility-anchor-core: var(--utility-d7); --utility-anchor-threshold: var(--utility-d6); --utility-surface-rich: var(--utility-d5); --utility-surface-main: var(--utility-d4); --utility-surface-bridge: var(--utility-d3); --utility-surface-soft: var(--utility-d2); --utility-surface-air: var(--utility-d1); /* ========================================================================= LAYER 2 — REALM IDENTITY COLORS ------------------------------------------------------------------------- Purpose: Defines the educational and conceptual color layer. Why: Realm answers: "What perspective does this primarily express?" Realms are not page identities. They support icons, badges, diagrams, educational models, and meaning-oriented visual elements. Realm map: Neutral → Alabaster → integration / non-chromatic support BE → Gold/Ochre → being / identity / potential FEEL → Rose → feeling / emotion / intuition SEE → Slate Blue → seeing / thought / understanding DO → Sage Green → doing / action / implementation Rule: Realm colors provide a secondary semantic layer. They support meaning, education and classification. They never replace active Product Identity. ========================================================================= */ /* ===== REALM IDENTITY — NEUTRAL / ALABASTER Character: integrative, quiet, achromatic support. ========================================================================== */ --realm-neutral-d8: #4A453D; --realm-neutral-d7: #6B655A; --realm-neutral-d6: #978F82; --realm-neutral-d5: #CDC8C0; --realm-neutral-d4: #E3DED7; --realm-neutral-d3: #ECE8E1; --realm-neutral-d2: #F3F1ED; --realm-neutral-d1: #F9F8F6; --realm-neutral-anchor-deep: var(--realm-neutral-d8); --realm-neutral-anchor-core: var(--realm-neutral-d7); --realm-neutral-anchor-threshold: var(--realm-neutral-d6); --realm-neutral-surface-rich: var(--realm-neutral-d5); --realm-neutral-surface-main: var(--realm-neutral-d4); --realm-neutral-surface-bridge: var(--realm-neutral-d3); --realm-neutral-surface-soft: var(--realm-neutral-d2); --realm-neutral-surface-air: var(--realm-neutral-d1); /* ===== REALM IDENTITY — BE / GOLDEN OCHRE Character: gold / ochre, being, identity, potential. ========================================================================== */ --realm-be-d8: #513C21; --realm-be-d7: #755936; --realm-be-d6: #9F7C4E; --realm-be-d5: #C8A878; --realm-be-d4: #DCC49C; --realm-be-d3: #EADECA; --realm-be-d2: #F4EEE3; --realm-be-d1: #F8F5F0; --realm-be-anchor-deep: var(--realm-be-d8); --realm-be-anchor-core: var(--realm-be-d7); --realm-be-anchor-threshold: var(--realm-be-d6); --realm-be-surface-rich: var(--realm-be-d5); --realm-be-surface-main: var(--realm-be-d4); --realm-be-surface-bridge: var(--realm-be-d3); --realm-be-surface-soft: var(--realm-be-d2); --realm-be-surface-air: var(--realm-be-d1); /* ===== REALM IDENTITY — FEEL / ROSE Character: rose, feeling, emotion, intuition. ========================================================================== */ --realm-feel-d8: #492026; --realm-feel-d7: #6B353F; --realm-feel-d6: #955660; --realm-feel-d5: #C4808A; --realm-feel-d4: #D9A0A8; --realm-feel-d3: #EAD0CF; --realm-feel-d2: #F2EBE5; --realm-feel-d1: #F7F4F2; --realm-feel-anchor-deep: var(--realm-feel-d8); --realm-feel-anchor-core: var(--realm-feel-d7); --realm-feel-anchor-threshold: var(--realm-feel-d6); --realm-feel-surface-rich: var(--realm-feel-d5); --realm-feel-surface-main: var(--realm-feel-d4); --realm-feel-surface-bridge: var(--realm-feel-d3); --realm-feel-surface-soft: var(--realm-feel-d2); --realm-feel-surface-air: var(--realm-feel-d1); /* ===== REALM IDENTITY — SEE / SLATE BLUE Character: slate / blue, seeing, thought, understanding. ========================================================================== */ --realm-see-d8: #293845; --realm-see-d7: #435565; --realm-see-d6: #647C90; --realm-see-d5: #889EB0; --realm-see-d4: #A2B9C7; --realm-see-d3: #BACED8; --realm-see-d2: #DEE2E6; --realm-see-d1: #EBEDF0; --realm-see-anchor-deep: var(--realm-see-d8); --realm-see-anchor-core: var(--realm-see-d7); --realm-see-anchor-threshold: var(--realm-see-d6); --realm-see-surface-rich: var(--realm-see-d5); --realm-see-surface-main: var(--realm-see-d4); --realm-see-surface-bridge: var(--realm-see-d3); --realm-see-surface-soft: var(--realm-see-d2); --realm-see-surface-air: var(--realm-see-d1); /* ===== REALM IDENTITY — DO / SAGE GREEN Character: sage / green, doing, action, implementation. ========================================================================== */ --realm-do-d8: #324032; --realm-do-d7: #4E6050; --realm-do-d6: #718671; --realm-do-d5: #96A896; --realm-do-d4: #AFBEAF; --realm-do-d3: #CBD7CB; --realm-do-d2: #E9EAE4; --realm-do-d1: #F2F4F2; --realm-do-anchor-deep: var(--realm-do-d8); --realm-do-anchor-core: var(--realm-do-d7); --realm-do-anchor-threshold: var(--realm-do-d6); --realm-do-surface-rich: var(--realm-do-d5); --realm-do-surface-main: var(--realm-do-d4); --realm-do-surface-bridge: var(--realm-do-d3); --realm-do-surface-soft: var(--realm-do-d2); --realm-do-surface-air: var(--realm-do-d1); /* ========================================================================= LAYER 3 — EXPRESSION IDENTITY COLORS ------------------------------------------------------------------------- Purpose: Defines non-navigation colors used for expressive assets and campaigns. Why: Expression colors provide atmospheric range without weakening Identity. They are useful for illustrations, diagrams, posters, announcements, presentations, seasonal materials, and special visual assets. Expression map: Peach → warm human invitation Mauve → refined relational warmth Honey → generosity / soft abundance Periwinkle → imagination / discovery / digital openness Terra → grounded warmth / embodied presence Olive → organic growth / nature Rule: Expression colors may support communication, but they do not replace Product Identity colors as page-world colors. Expression colors complement Identity. They never become page-world colors unless explicitly promoted into the Product Identity layer. ========================================================================= */ /* ===== EXPRESSION IDENTITY — PEACH PUFF Character: warm human invitation. ========================================================================== */ --expr-peach-d8: #5A3523; --expr-peach-d7: #7D5138; --expr-peach-d6: #9A684A; --expr-peach-d5: #A87050; --expr-peach-d4: #CC9878; --expr-peach-d3: #DCB498; --expr-peach-d2: #ECCAB8; --expr-peach-d1: #F8F0EA; --expr-peach-anchor-deep: var(--expr-peach-d8); --expr-peach-anchor-core: var(--expr-peach-d7); --expr-peach-anchor-threshold: var(--expr-peach-d6); --expr-peach-surface-rich: var(--expr-peach-d5); --expr-peach-surface-main: var(--expr-peach-d4); --expr-peach-surface-bridge: var(--expr-peach-d3); --expr-peach-surface-soft: var(--expr-peach-d2); --expr-peach-surface-air: var(--expr-peach-d1); /* ===== EXPRESSION IDENTITY — WARM MAUVE Character: intimate refinement. ========================================================================== */ --expr-mauve-d8: #4E3348; --expr-mauve-d7: #6E4C68; --expr-mauve-d6: #8B6384; --expr-mauve-d5: #A07090; --expr-mauve-d4: #C898B8; --expr-mauve-d3: #D8AECE; --expr-mauve-d2: #E8CCE0; --expr-mauve-d1: #F8EEF6; --expr-mauve-anchor-deep: var(--expr-mauve-d8); --expr-mauve-anchor-core: var(--expr-mauve-d7); --expr-mauve-anchor-threshold: var(--expr-mauve-d6); --expr-mauve-surface-rich: var(--expr-mauve-d5); --expr-mauve-surface-main: var(--expr-mauve-d4); --expr-mauve-surface-bridge: var(--expr-mauve-d3); --expr-mauve-surface-soft: var(--expr-mauve-d2); --expr-mauve-surface-air: var(--expr-mauve-d1); /* ===== EXPRESSION IDENTITY — SOFT HONEY Character: abundance / soft generosity. ========================================================================== */ --expr-honey-d8: #5B4827; --expr-honey-d7: #7E673E; --expr-honey-d6: #9C8353; --expr-honey-d5: #B09A60; --expr-honey-d4: #D4C088; --expr-honey-d3: #DECE9E; --expr-honey-d2: #EAE0C0; --expr-honey-d1: #F8F4E8; --expr-honey-anchor-deep: var(--expr-honey-d8); --expr-honey-anchor-core: var(--expr-honey-d7); --expr-honey-anchor-threshold: var(--expr-honey-d6); --expr-honey-surface-rich: var(--expr-honey-d5); --expr-honey-surface-main: var(--expr-honey-d4); --expr-honey-surface-bridge: var(--expr-honey-d3); --expr-honey-surface-soft: var(--expr-honey-d2); --expr-honey-surface-air: var(--expr-honey-d1); /* ===== EXPRESSION IDENTITY — DEEP PERIWINKLE Character: imagination / discovery / digital openness. ========================================================================== */ --expr-periwinkle-d8: #233B57; --expr-periwinkle-d7: #36567A; --expr-periwinkle-d6: #446B90; --expr-periwinkle-d5: #4A7098; --expr-periwinkle-d4: #6898C8; --expr-periwinkle-d3: #90B4D8; --expr-periwinkle-d2: #C4D4E8; --expr-periwinkle-d1: #EAF2F8; --expr-periwinkle-anchor-deep: var(--expr-periwinkle-d8); --expr-periwinkle-anchor-core: var(--expr-periwinkle-d7); --expr-periwinkle-anchor-threshold: var(--expr-periwinkle-d6); --expr-periwinkle-surface-rich: var(--expr-periwinkle-d5); --expr-periwinkle-surface-main: var(--expr-periwinkle-d4); --expr-periwinkle-surface-bridge: var(--expr-periwinkle-d3); --expr-periwinkle-surface-soft: var(--expr-periwinkle-d2); --expr-periwinkle-surface-air: var(--expr-periwinkle-d1); /* ===== EXPRESSION IDENTITY — TERRA ADJUSTED Character: grounded warmth / embodied presence. ========================================================================== */ --expr-terra-d8: #563120; --expr-terra-d7: #764731; --expr-terra-d6: #915A40; --expr-terra-d5: #A06048; --expr-terra-d4: #C88870; --expr-terra-d3: #D8A892; --expr-terra-d2: #E8C8B8; --expr-terra-d1: #F8ECE8; --expr-terra-anchor-deep: var(--expr-terra-d8); --expr-terra-anchor-core: var(--expr-terra-d7); --expr-terra-anchor-threshold: var(--expr-terra-d6); --expr-terra-surface-rich: var(--expr-terra-d5); --expr-terra-surface-main: var(--expr-terra-d4); --expr-terra-surface-bridge: var(--expr-terra-d3); --expr-terra-surface-soft: var(--expr-terra-d2); --expr-terra-surface-air: var(--expr-terra-d1); /* ===== EXPRESSION IDENTITY — WARM OLIVE Character: organic growth / nature. ========================================================================== */ --expr-olive-d8: #364224; --expr-olive-d7: #536439; --expr-olive-d6: #6D7E4A; --expr-olive-d5: #688048; --expr-olive-d4: #8CAA6A; --expr-olive-d3: #A8C288; --expr-olive-d2: #C6D8A8; --expr-olive-d1: #EEF4E4; --expr-olive-anchor-deep: var(--expr-olive-d8); --expr-olive-anchor-core: var(--expr-olive-d7); --expr-olive-anchor-threshold: var(--expr-olive-d6); --expr-olive-surface-rich: var(--expr-olive-d5); --expr-olive-surface-main: var(--expr-olive-d4); --expr-olive-surface-bridge: var(--expr-olive-d3); --expr-olive-surface-soft: var(--expr-olive-d2); --expr-olive-surface-air: var(--expr-olive-d1); /* ========================================================================= LAYER 4 — STRUCTURAL COMPONENT TOKENS (Design Constants) ------------------------------------------------------------------------- Purpose: Defines structural and interactive constants shared across the ecosystem. Decoupled entirely from components to make 02 the single source of truth. ========================================================================= */ --token-radius-sm: 0.5rem; --token-radius-md: 1rem; --token-radius-lg: 1.5rem; --token-radius-pill: 999px; --token-border-width: 1px; --token-shadow-soft: 0 1rem 2.5rem rgb(0 0 0 / 0.08); --token-shadow-lift: 0 1.25rem 3rem rgb(0 0 0 / 0.12); --token-transition: 180ms ease; }