Website 3.0 Draft — Design Spec

Date: 2026-05-06 Status: Approved for planning Owner: Max

Goal

Stand up a static-HTML draft of the Website 3.0 redesign inside www/v3/, matching the design provided in ~/Downloads/Website 3.0/ as closely as possible. The draft must:

Live alongside the current production site (www/de/, www/en/) without affecting it.
Not be reachable by search crawlers or end users navigating from the live site.
Use the same vanilla static stack as the rest of www/ — no React, no build step, no client-side JSX transpilation.
Include the design's animations, implemented in plain JS.
Match the design pixel-for-pixel including typography (Geist + Geist Mono via Google Fonts).

The German version is built first. English is a follow-on once the German page is approved.

Non-goals

Translating or porting community articles, contact form, imprint, privacy, or terms pages. Those are not in the design.
Updating the sitemap or any links from the live site to v3.
Bilingual scaffolding. EN comes after DE.
Production deployment. The draft is for review, not launch.

Source design

~/Downloads/Website 3.0/:

index.html — single-page React app loaded via Babel-standalone in the browser. JSX components in components/.
Style Guide.html — standalone design-system reference (tokens, type, components).
product/*.html — six static product pages (overview, accounts-payable, accounts-receivable, approvals, document-management, fpa) plus product.css and chrome.js.
scraps/, uploads/ — reference imagery; not ported directly.

The home page is React; the product subpages are already plain HTML.

Architecture

Folder layout

www/
  v3/
    robots.txt              # Disallow: /  (overrides parent)
    de/
      index.html            # home page
      produkt/
        index.html          # overview
        kreditoren.html     # accounts-payable
        debitoren.html      # accounts-receivable
        freigaben.html      # approvals
        dokumente.html      # document-management
        fpa.html            # fpa
    css/
      v3.css                # global tokens + page styles, lifted from index.html <style>
      product.css           # ported from Downloads/Website 3.0/product/product.css
    js/
      orchestration.js      # hub-and-spoke active-node cycling
      swimlanes.js          # variant-B packet animation
      nav-dropdown.js       # product menu
      chrome.js             # ported from Downloads/Website 3.0/product/chrome.js

Tech stack

HTML, CSS, vanilla JS — same as current www/.
Geist + Geist Mono via https://fonts.googleapis.com/css2?... (matches the design exactly; current site does not use Geist, so this is a v3-only addition).
No bundler, no build step. Files served as-is by the existing static host.

Isolation from production

The draft must not be discoverable by Google or by users on the live site:

Every v3 HTML page includes <meta name="robots" content="noindex, nofollow"> in <head>.
www/v3/robots.txt contains User-agent: * / Disallow: / and is served from the /v3/ path. Google honours nested robots.txt for the path it lives at.
No links from www/de/, www/en/, or www/sitemap.xml point to /v3/.
No entry is added to www/sitemap.xml.

Local preview: cd www && python -m http.server 8000 → http://localhost:8000/v3/de/.

JSX → static HTML conversion

Each component in Downloads/Website 3.0/components/ is converted to its rendered HTML, inlined into the page that uses it. Where the original JSX uses useState/useEffect to drive animation, that logic moves to a small vanilla JS file in www/v3/js/ that toggles classes/attributes on a timer.

JSX file	Conversion
`primitives.jsx`	Drop. Inline only the helpers actually used.
`hero.jsx`	Static HTML. Headline, lede, CTAs, chip. No JS.
`agents.jsx`	Static HTML grid. Verify no interactivity on read.
`workflow.jsx`	Static HTML step diagram.
`roi.jsx`	Static HTML KPI cards.
`orchestration.jsx`	Static HTML + `js/orchestration.js`. Nodes and SVG lines are static; the active-node cycling is a `setInterval` that toggles `.active` classes.
`orchestration-b.jsx`	Static HTML + `js/swimlanes.js`. Packets animate along tracks via JS-driven CSS transforms.
`rest.jsx`	Static HTML. Likely composite — may split into multiple sections.
`app.jsx`	Drop. The page itself is now the composition.

Dropped from the design

Mode toggle (data-mode="editorial" vs "systems"). Designer affordance, not production behaviour. Default to editorial and remove the switch.
TWEAKS block with EDITMODE-BEGIN/EDITMODE-END markers. Editor-host integration, not needed in the draft.
Style Guide.html. Reference document, not a site page.

Animations approach

JS files follow the existing www/js/orb.js style — no framework, no module loader, single IIFE per file that finds its DOM root and runs. They:

Wait for DOMContentLoaded.
Find their target element by class.
Run a setInterval or requestAnimationFrame loop that toggles classes / sets transforms.
Respect prefers-reduced-motion: reduce (already present in the design's CSS).

Page scope for v1 (German)

Seven pages total: home + product overview + five product subpages.

Page	Source	Notes
`de/index.html`	`index.html` + all components	Home — composition of hero, agents, workflow, roi, orchestration A+B, rest.
`de/produkt/index.html`	`product/overview.html`	Product overview.
`de/produkt/kreditoren.html`	`product/accounts-payable.html`	"Kreditoren" matches existing site terminology.
`de/produkt/debitoren.html`	`product/accounts-receivable.html`	"Debitoren".
`de/produkt/freigaben.html`	`product/approvals.html`	"Freigaben".
`de/produkt/dokumente.html`	`product/document-management.html`	"Dokumente".
`de/produkt/fpa.html`	`product/fpa.html`	Keep "FP&A" abbreviation.

Slugs match the existing www/de/produkt/ naming convention so URLs feel native.

Translation approach

Port HTML structure with English copy in place — get layout right first.
Translate each page in a single pass, matching tone and terminology to the existing www/de/ site (Kreditoren / Debitoren / Freigaben / Dokumente, Sie-form, no Anglicisms where a clean German term exists).
Headlines like "The finance team that never sleeps" need real German equivalents, not literal translations. Drafts will be flagged for review.
Keep mono-font tags / labels (e.g., INV-20411) in English where they represent technical identifiers.

Risks and open items

Animation timing parity. Babel-standalone JSX may have subtle timing the static port misses. Mitigation: run the original locally first, record the cadence (interval ms, transition durations), then port.
Font loading. Geist is added only on /v3/ pages — no impact on production. The Google Fonts request is the same one the design already makes.
rest.jsx is large. May contain multiple loosely-related sections. Read fully before deciding whether to split.
No analytics on /v3/. The draft pages do not include tracker.js so review traffic doesn't pollute production analytics.

Acceptance criteria

The draft is done when:

All seven German pages render at localhost:8000/v3/de/... and visually match the design.
Animations on the home page (orchestration A, swimlanes B) run smoothly without errors in the browser console.
Every page returns noindex, nofollow in its <meta robots> tag.
www/v3/robots.txt blocks all crawlers.
No links from www/de/, www/en/, or www/sitemap.xml reference /v3/.
The current production site (www/de/, www/en/) is unchanged and continues to work.

After approval

Once the German pages are reviewed and approved, follow-on work (separate spec):

Translate to English under www/v3/en/.
Decide whether to port community / contact / imprint / privacy / terms into the new design or keep them on the current shell.
Production cutover plan (rename www/de/ → archive, move www/v3/de/ → www/de/, etc.).