# Automation & Observatory โ€” workspace documentation standard This is the field guide for the presentation workspace: how the hub and the five section pages are built, so anyone can add or edit one and have it match. ## What the workspace is A small set of self-contained HTML pages under `presentation/`. The **hub** (`index.html`) is a bookmark board that links every tool, page, service and document. Each **section** is one large page with its own agricultural codename and accent colour. Everything shares one stylesheet and one script โ€” no CDNs, no build step, opens offline from `file://` or any static server. ``` presentation/ index.html Hub โ€” "Automation & Observatory" (brand green, nuanced) onboarding.html ๐ŸŒฑ Seed โ€” leaf green monitoring.html ๐ŸŒพ Silo โ€” grain amber (the biggest section) automation.html ๐Ÿšœ Tractor โ€” clay / terracotta scripts.html ๐Ÿช“ Sickle โ€” teal workflows.html ๐Ÿ’ง Irrigation โ€” water blue workspace.css Shared design system (the ONLY stylesheet) workspace.js Shared theme toggle STANDARD.md This file pack.html ยท executive-brief-observability.html ยท executive-handout-print.html ยท auto-docs-brief.html build-pack.sh Export everything to dist/*.zip ``` ## The codename system Names come from agriculture because the company's business is agriculture โ€” the onboarding *seeds* a new joiner, monitoring is the *silo* that stores everything we watch, automation is the *tractor* doing the heavy work, scripts are *sickles* (small sharp tools), and pipelines are *irrigation* channels that carry the flow. The codename encodes the section's job; it isn't decoration. | Section | Codename | Emoji | Accent (light / dark) | Wash (light / dark) | |---|---|---|---|---| | Hub | โ€” | ๐ŸŒพ | brand `#1F9E6A` / `#45C88C` | `#E2F3EA` / `#0F2A1E` | | Onboarding | Seed | ๐ŸŒฑ | `#4E9A2F` / `#86C24A` | `#EAF3DE` / `#16240E` | | Monitoring | Silo | ๐ŸŒพ | `#C4881A` / `#E0A83C` | `#F7ECD3` / `#2A2110` | | Automation | Tractor | ๐Ÿšœ | `#C05A38` / `#E07E5C` | `#F6E4DD` / `#2A160F` | | Scripts | Sickle | ๐Ÿช“ | `#1C8C8C` / `#3FBEBE` | `#DAEFEF` / `#0C2626` | | Workflows & Pipelines | Irrigation | ๐Ÿ’ง | `#2F6FCF` / `#6E9AF0` | `#E4ECFA` / `#131C2E` | The **workspace green** (`--brand`) is constant on every page โ€” nav, footer, focus rings, the pulsing beacon. Only `--accent` / `--accent-wash` change per section. That keeps one identity while each section reads as its own place. ## Page anatomy (every section page) 1. `` links `workspace.css` + `workspace.js` and contains **only** the accent override (four lines: base, `@media dark`, `[data-theme=light]`, `[data-theme=dark]`). No other CSS on the page. 2. `