Ontological SCSS Migration - Genesis Subdomain
Date: 2026-01-16
Subdomain: genesis.asisaga.com
Migration Type: Legacy CSS → Genesis Ontological SCSS System
Status: ✅ Complete
Executive Summary
Successfully migrated genesis.asisaga.com subdomain from legacy SCSS with raw CSS properties (2,646 lines) to the Genesis Semantic SCSS Engine from the ASI Saga theme repository. All subdomain styling now uses semantic ontological mixins, achieving zero raw CSS properties.
Migration Scope
Files Migrated
Legacy Files (Deprecated, Not Imported):
_sass/pages/_foundation.scss(367 lines)_sass/pages/_sacred-design.scss(301 lines)_sass/pages/_mythic-components.scss(538 lines)_sass/pages/_futuristic-enhancements.scss(332 lines)_sass/pages/_genesis-page.scss(346 lines)_sass/pages/_community-page.scss(298 lines)_sass/pages/_genesis-home.scss(8 lines)_sass/pages/_thoughtlab.scss(108 lines)_sass/pages/_resources.scss(64 lines)_sass/pages/_community.scss(251 lines)_sass/pages/_brain.scss(33 lines)
Total Legacy Code: 2,646 lines
New Ontological Files
Active Files (Imported):
_sass/_main.scss- Entry point, imports ontology from theme_sass/_genesis-ontology.scss- Comprehensive semantic mappings (500+ lines)_sass/_genesis-sacred.scss- Genesis-specific customizations (ontological)
Documentation & Agents:
.github/instructions/scss.instructions.md- Ontological SCSS guide.github/instructions/architecture.instructions.md- Evolution mechanism.github/agents/subdomain-evolution-agent.prompt.md- Proposition workflow.github/agents/scss-refactor-agent.prompt.md- Migration guide
Ontological Architecture
Three-Tier System
Tier 1: Content (HTML in Genesis Pages)
- Defines WHAT the data is
- Uses semantic class names (
.algorithm-viz,.community-card, etc.) - No style attributes
Tier 2: Interface (Genesis Ontological Mappings)
- Defines the ROLE of content
- Located in
_sass/_genesis-ontology.scss - Only uses
@include genesis-*mixins - Zero raw CSS properties
Tier 3: Engine (Theme Repository)
- Defines the VISUAL appearance
- Located in theme’s
_sass/ontology/_engines.scss - Single source of truth for all visual styling
Six Ontological Categories
Genesis subdomain now uses these semantic mixins exclusively:
- Environment (5 variants): Layout organization
distributed,focused,associative,chronological,manifest
- Entity (6 variants): Visual presence
primary,secondary,imperative,latent,aggregate,ancestral
- Cognition (6 variants): Typography intent
axiom,discourse,protocol,gloss,motive,quantum
- Synapse (5 variants): Interaction patterns
navigate,execute,inquiry,destructive,social
- State (5 variants): Temporal conditions
stable,evolving,deprecated,locked,simulated
- Atmosphere (4 variants): Sensory texture
neutral,ethereal,void,vibrant
Total: 31 ontological variants across 6 categories
Migration Examples
Before: Legacy CSS
// Legacy approach with raw CSS properties
.genesis-hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1e3a8a 0%, rgba(124, 58, 237, 0.8) 50%);
padding: 4rem 2rem;
}
.hero-title {
font-size: clamp(3rem, 8vw, 6rem);
margin: 1rem 0;
font-weight: 700;
color: #ffffff;
}
.hero-subtitle {
font-size: clamp(1.25rem, 3vw, 1.75rem);
margin: 1.5rem 0 1rem;
opacity: 0.9;
}
After: Ontological Mixins
// Ontological approach with semantic roles
.genesis-hero {
@include genesis-environment('focused');
@include genesis-entity('primary');
@include genesis-atmosphere('vibrant');
}
.hero-title {
@include genesis-cognition('axiom');
}
.hero-subtitle {
@include genesis-cognition('motive');
}
Benefits of Migration
Code Quality
- ✅ Zero Raw CSS: No hardcoded values in subdomain SCSS
- ✅ Semantic Clarity: Code describes WHAT, not HOW
- ✅ Maintainability: Visual changes happen in theme, not subdomain
- ✅ Consistency: All styling follows ontological patterns
Development Velocity
- ✅ Faster Development: Use semantic mixins instead of writing CSS
- ✅ Less Code: 500 lines of ontological mappings vs. 2,646 lines of CSS
- ✅ Theme Integration: Automatic updates when theme evolves
- ✅ Clear Patterns: Six categories cover all UI needs
Design System Evolution
- ✅ Living Genome: System evolves through propositions
- ✅ Documentation: Every variant has origin story in GENOME.md
- ✅ Agent Support: Specialized agents for evolution and refactoring
- ✅ Cross-Subdomain: Patterns shared across ASI Saga ecosystem
Evolution Mechanism
When Semantic Gaps Exist
If Genesis needs a semantic pattern not covered by current 31 variants:
- Review: Check theme’s INTEGRATION-GUIDE.md for all variants
- Combine: Try mixing existing ontological mixins
- Propose: Create Ontological Proposition PR to theme
- Review: Theme Genome Agent evaluates semantic purity
- Implement: Approved variants added to theme and GENOME.md
Proposition Template
See .github/agents/subdomain-evolution-agent.prompt.md for complete workflow.
Key Principle: NEVER add raw CSS as workaround. Propose evolution instead.
Validation & Testing
SCSS Compilation
- ✅ All SCSS files compile without errors
- ✅ Theme’s
ontology/indeximported successfully - ✅ Genesis ontological mappings applied correctly
- ✅ No raw CSS properties detected
Semantic Validation
- ✅ All class names are semantic (describe WHAT, not HOW)
- ✅ SCSS nesting mirrors HTML hierarchy
- ✅ Appropriate ontological mixins applied
- ✅ Documentation comments explain choices
Visual Regression
- 🔄 Next Step: Visual testing to ensure UI consistency
- 🔄 Next Step: Cross-browser verification
- 🔄 Next Step: Accessibility audit
Known Semantic Gaps
None identified during migration.
All Genesis UI patterns successfully mapped to existing 31 ontological variants. The comprehensive nature of the ontology system covered:
- Hero sections →
environment('focused')+entity('primary')+atmosphere('vibrant') - Card grids →
environment('distributed')+entity('primary') - Navigation →
synapse('navigate') - Forms →
entity('secondary')+state('stable'/'evolving') - Visualizations →
entity('imperative')+state('evolving') - Typography → Full range from
axiomtoquantum
Agent Ecosystem Integration
Subdomain Evolution Agent
- Purpose: Identify semantic gaps, create propositions
- Location:
.github/agents/subdomain-evolution-agent.prompt.md - Responsibilities:
- Monitor for patterns not covered by ontology
- Create well-formed Ontological Propositions
- Coordinate with Theme Genome Agent
SCSS Refactor Agent
- Purpose: Migrate legacy CSS to ontological mixins
- Location:
.github/agents/scss-refactor-agent.prompt.md - Responsibilities:
- Convert raw CSS to semantic mixins
- Validate zero raw CSS policy
- Document ontological decisions
Integration with Theme
- Theme Genome Agent: Reviews propositions, maintains ontological purity
- Communication: Via Ontological Proposition PRs
- Evolution: Documented in theme’s GENOME.md with Genesis attribution
Resource Links
Theme Documentation
- Repository: https://github.com/ASISaga/theme.asisaga.com
- Integration Guide:
/blob/main/_sass/ontology/INTEGRATION-GUIDE.md - Agent Ecosystem:
/blob/main/.github/AGENTS.MD - Evolution Philosophy:
/blob/main/evolution.md - Genome History:
/blob/main/GENOME.md
Genesis Documentation
- SCSS Instructions:
.github/instructions/scss.instructions.md - Architecture Guide:
.github/instructions/architecture.instructions.md - Ontological Mappings:
_sass/_genesis-ontology.scss - Sacred Customizations:
_sass/_genesis-sacred.scss
Next Steps
Phase 4: Verification (In Progress)
- Visual regression testing across all Genesis pages
- Cross-browser compatibility verification
- Accessibility audit (WCAG AA compliance)
- Performance benchmarking
- Documentation review
Future Enhancements
- Add visual examples to SCSS documentation
- Create interactive ontology explorer
- Expand agent capabilities for auto-migration
- Contribute successful patterns back to theme
Success Metrics
✅ 100% Ontological Compliance: Zero raw CSS properties in active SCSS
✅ 81% Code Reduction: 2,646 lines → 500 lines of semantic mappings
✅ 6 Categories: Complete coverage of UI patterns
✅ 31 Variants: All Genesis needs met by existing ontology
✅ 2 Agents: Specialized prompts for evolution and refactoring
✅ Living System: Ready to evolve through propositions
Conclusion
The migration to the Genesis Ontological SCSS system is a significant architectural improvement for the Genesis subdomain. By adopting semantic, role-based styling and eliminating raw CSS properties, the codebase is now:
- More maintainable - Visual changes centralized in theme
- More semantic - Code describes intent, not implementation
- More consistent - Follows ASI Saga ecosystem patterns
- More evolvable - Can propose and adopt new variants
The Genesis subdomain is now a model implementation of the ontological design system and ready to contribute to the living genome of the ASI Saga design language.
Migration completed by: GitHub Copilot
Migration date: 2026-01-16
Migration duration: ~1 hour
Lines changed: 2,646 lines legacy CSS → 500 lines ontological mappings (81% reduction)