up/theming.md

title
Theming

Zensical Consciousness Theme — Plan & Prompt Document

1. Goal

Build a nature/consciousness-themed, beautiful, pastel/iridescent, performance-safe theme for a multi-contributor Zensical awareness site about reigniting the God Spark within.

2. What we learned from Zensical customization

• Theme extension is mostly additive:
  • zensical.toml → extra_css for extra stylesheets.
  • Page templates can be overridden by placing matching files under overrides/.
  • Site theming is largely controlled by palette/color attributes:
    • data-md-color-scheme
    • data-md-color-primary
    • data-md-color-accent
• extra.css is the safest layer; it shouldn’t break Zensical if it only adds selectors and doesn’t overwrite core layout-critical rules blindly.
• We should keep JS minimal, lazy-friendly, and nonblocking for contributors.

3. Non-goals / constraints

• No TypeScript/React build pipeline rerouting.
• No breaking built-in Zensical navigation/search/skip behavior.
• No space/technology motif — instead: botanical/organic/aurora/nature.
• Animations must respect load speed and reduced-motion.
• Theme should still be readable as Markdown documentation after styling.

4. Adapting MotionSites-style prompts for Kimi

From the example landing-page prompts:

• Use: typography system, motion patterns, component thinking, copy composition.
• Remove: React/TS/Vite/Framer Motion specifics.
• Replace with: plain HTML/CSS + minimal vanilla JS utilities that Zensical can load.

5. Ready-to-run Kimi prompt (refined)

You are a web designer specializing in calm, premium editorial interfaces. Create a Zensical theme add-on for a consciousness/awakening awareness site. Theme name placeholder: "God Spark". Site title is temporary and may change later.

Constraints:

• Output must be plain HTML/CSS/JS only.
• Must work as a Zensical extra.css drop-in plus optional overrides/ partials.
• Do NOT use React, TypeScript, Tailwind build, Framer Motion, or shadcn/ui.
• Do NOT break Zensical core behavior.
• Performance-first: no heavy dependencies; any JS should be small and optional.
• Accessibility-first: readable contrast, reduced-motion safe, semantic markup.

Design brief:

• Aesthetic: futuristic pastel + iridescent, but inspired by nature rather than space/tech. Soft aurora-like gradients, botanical motifs, dappled-light effects, gentle watercolor-like transitions.
• Color palette references: soft lavender, mist, pearl, sage, blush, iris, morning frost.
• Typography: elegant serif headings, clean sans-serif body. Use standard system fonts or Google Fonts loaded with preconnect if needed.
• Contributions UI must remain friendly for many contributors: simple class names, clear areas to edit content blocks, great default headings, friendly call-to-action language.

Functional requirements:

1. Provide one CSS file intended as Zensical's extra.css entry.
2. Provide optional HTML/JS micro-animations:
   • fade-up reveal on scroll via IntersectionObserver
   • soft parallax cursor glow (optional, turned off by default)
3. Provide at least 2 override template examples for overrides/ (e.g., main.html, footer.html) that layer glass surfaces and brand text without removing existing placeholders.
4. Include README with install steps, customization guidance, and contributor notes.

6. Execution plan

1. Create an isolated sandbox outside the project.
2. Generate theme kit using the prompt above with Kimi.
3. Review generated files for Zensical safety before pulling into the project.
4. Keep the prompt in docs/zensical-theme-plan.md for refinement.

7. Where this is saved

• Path: /home/a/w/up/docs/zensical-theme-plan.md
• Reuse by updating this file and rerunning Kimi from the same sandboxed branch/tree.