Design Journal — Dialogue Engine Foundations

🎯 Intent

What was I trying to achieve today?

  • Investigate organizing Dialogue Components & Dialogue design tokens in code.
  • Investigate Svelte Islands, Nanostores, Hydrating and Slots.
  • Learn how to collapse copy on the homepage to keep instructions below the Timewarp introduction.
  • Create a keyboard shortcut for selecting environments (Academy / Studio / Playground).
  • Define a rail for the Dialogue (width should not live inside Bubble).
  • Prepare the most important views.

🧭 Guiding Questions

What questions are shaping my thinking right now?

  • What belongs in tokens vs components?
  • What is the minimum structure required for Dialogue to scale?
  • What is static and what truly needs hydration?
  • Where does system logic live?
  • What are the core views before adding interactivity?
  • What can wait?

🧠 Insight

What clicked?

  • Values are set in tokens, variables are set in components.
  • Structure lives in the component.
  • Styling (colour, fonts, radius, roles) lives in tokens.
  • This separation allows full styling control without refactoring structure.

🧱 Structure

What did I build / define?

  • Introduced DialogueTokens.css and linked it solely to DialogueLayout.astro.
  • Added Timewarp landing page copy (draft).
  • Established role-based Bubble differentiation.

⚙️ Decisions

What did I choose (and why)?

  • Do architecture design first before diving deeper.
  • Introduced a design journal to prevent scope drift.
  • Focus on structure before hydration or advanced interactivity.

🔄 Friction

What felt messy or uncomfortable?

  • Everything at once.
  • Context switching between Git, Layouts, Tokens, and Hydration.
  • Risk of running down rabbit holes and not returning.

🌱 Learning

What new mental model formed?

  • Design Tokens = value layer.
  • Components = structural layer.
  • Dialogue UI = semantic ontology (actor / assistant / system).
  • Interactive design builds on stable structure.

➡️ Next Move

Single clear next step.

  • Clean up the Timewarp logo and make it pixel-perfect in Figma.
  • Experiment with Canva vector tools.
  • Figure out how to line-draw each triangle clockwise to construct the logo for the homescreen.
  • Add a simple Invite a Friend feature (copy base url)
  • Add a subtle gradient glow/grid treatment to the System surface.

More posts