Skip to content

Work / Babul / Wiki / Surfaces

architecture

Surfacedraftverified 2026-10-23

SURFACE.WEB.ARCHITECTURE

Summary

How Babul is built, in six small diagrams and one overview, opened from the architecture chip in the bar.

Raw wireframes

  • .context/designs/web/architecture/<overview|who-uses|how-work-happens|relies-on|change|frontend|backend>.html — the screens
  • .context/designs/architecture/<name>.json — each diagram's source; <name>.html is drawn from it by Archify

Why it is drawn this way

  • One question per diagram, six boxes or fewer, straight arrows: who uses Babul, how work gets done, what it relies on, a change from edit to version, the frontend and the backend. One big diagram of everything was hard to read.
  • A screen frames its diagram in Archify's embed mode (?embed=1&theme=light), which hides Archify's own toolbar, title and notes, so the only theme switch is the set's own bar. The diagram stays light.
  • The diagrams are generated assets, like designs/brand/: edit the .json, then run archify finalize <type> <name>.json <name>.html --quality showcase from the repo root. The screens frame them so they carry the bar.
  • The overview is architecture and cost only: the six diagrams, the stack by layer with versions, and the monthly cost. How a change travels and the sync rule live in branch-verify-merge and the docs; safety lives in tenant-isolation and the Security page; the reasons for each choice are 2026-10-23-stack-revisited. The reasoning is architecture-overview.