ProductAnywhere — design system, PRD & build loop

— begin loop prompt —

You are designing and building productanywhere.io — the brand system, the PRD, and the shipped site. Work in a repo checkout of dasijoe/Portfolio. Your model slug is {{MODEL_SLUG}}; every artefact you create is namespaced with it so the two models’ outputs never collide.

Loop protocol — read this first, every iteration

1. Read productanywhere/{{MODEL_SLUG}}/STATE.md. If it does not exist, create it with PHASE: 1 and an empty checklist, then start Phase 1.
2. Do the next single smallest complete unit of work in the current phase. Not the whole phase. One token file. One page section. One PRD chapter. Complete it fully — no TODOs, no stubs.
3. Update STATE.md: what you just finished, what is next, any decision you made and why, any question you could not resolve.
4. If every exit criterion for the current phase is met, increment PHASE and write a one-paragraph handover at the top of STATE.md.
5. Stop the iteration. Do not run ahead.

Never rewrite work from a previous phase without recording the reason in STATE.md. If you are tempted to restart, you are wrong — extend instead.

Context you are given

The brand. ProductAnywhere is the practice Joe da Silva has operated under since 2014, when he moved from Cape Town into contracting and consulting across Europe. It succeeded FormFunction Digital, the Cape Town agency he ran with employees. ProductAnywhere is the practice; Joe da Silva is the operator; FormFunction is the lineage. The site is productanywhere.io.

The mark. An isometric arrangement of three coloured tabs — blue, teal-green, purple — each appearing at several saturations, resolving into a tri-lobed three-dimensional form. Wordmark: product in a light geometric sans, anywhere in the same face at bold, both in the brand blue.

What the mark means, and this is the spine of the whole system:

• The coloured tabs are the elements of a product-management process that delivers the best possible outcome — materials, designs, people, content, media.
• The saturation of a tab encodes its maturity as it moves through that process — and equally, as a prospect moves through the funnel.

You will build the design system so that hue and saturation carry those two meanings literally and consistently, everywhere, and never carry any other meaning:

• Hue = lane. Blue → The Leader (executive product leadership). Teal → The Expert (productized consulting). Purple → The Builder (active venture building).
• Saturation = maturity. Exactly four steps. They drive receipt confidence, engagement stage (Signal → Filter → Pilot → Receipts → Harden → Venture), concept-lab lineage (v1/v2/v3), and funnel position — one ladder, reused.
• The tab is the atomic UI primitive. Receipt cards, concept cards, capability chips, stage markers and lane indicators are all the same object: a plane with a hue and a saturation. If you find yourself designing a second unrelated card shape, you have broken the system.

Sample the actual hex values from the logo asset. Do not invent them and do not trust any palette quoted to you second-hand.

Prior art — seven concepts to mine, none to copy

All at https://portfolio.formfunction.co.za/concepts/<name>.html. Read them before Phase 1.

• gemini-31-pro-high-thinking-concept-01 — take: the light ground, the generous whitespace, the calm uncluttered rhythm. This is the atmosphere. Reject: its typography (stock Inter + JetBrains Mono, no character) and its TRACK_01 // pseudo-terminal voice.
• claude-opus-5-concept-01 — take: the receipts model, which is the strongest single idea in the set. Each receipt is big number → claim → an explicitly stated limit on that claim → a proof/ slug → a confidence field. Example: 142M+ automated FAQ interactions … “What I did not do: I commissioned and negotiated the NLP architecture and set the commercial structure. I did not build the model, and I had left before this was measured.” · proof/absa-142m-faq-deflection · confidence: medium-high. Also take: the top assessment bar — “How ready is your AI, really? / Take the 12-minute assessment →” — which is a required element; the engagement ladder ordered lightest-first; and the “Not a fit” section naming three reasons not to engage, each with a “do this instead”. Reject: its dark palette and its chat-mock hero.
• claude-opus-46-thinking-concept-03 — take: the hero CTA pair, primary Engage → plus ghost See the Receipts. These are required. Also the three-line headline with one emphasised line.
• portfolio-site-kimi-k3-concept-01 — the strongest overall structure; use it as the skeleton. Take: the At a glance colophon card in the hero (Archetype / Base / Verticals / Mode, with a live status dot), the numbered lane rows beneath the hero, the editorial section headers, the filterable concept lab, the fact sheet. Reject: its GitHub-dark palette and its system-font typography.
• portfolio-site-glm52-concept-01 — take: the Status block copy (Now / Also / Always / Base), which is better written than kimi’s colophon. Merge the two — kimi’s placement, glm’s words. Reject: its Lead / Advise / Build triad.
• portfolio-site-deepseek-pro-concept-01 — take: the Operating Range / Structure / Method / AI Posture summary strip, the Limit: line on receipts, the reinforcement map showing how each lane strengthens the others, the availability chip in the masthead. Reject: its density.
• gpt53codex-high-concept-01 — take: Signal → Pilot → Receipt framing.

Decisions already made — do not relitigate these

1. Light is the canonical surface. Dark is a fully supported theme, not the default. Reason: the saturation ladder is the brand’s core semantic and it inverts illegibly on a dark ground, and the B2B credibility scan reads better on light.
2. Theming is token-first and non-negotiable. Every colour is a semantic token defined on bare :root. Dark redefines only that token block, under @media (prefers-color-scheme: dark) guarded as :root:not([data-theme="light"]), and again under :root[data-theme="dark"] so a manual toggle wins in both directions. No hex literal may appear anywhere outside the token block. Add a check to the build gate that greps for one and fails. This constraint is what makes the theme toggle cheap; without it the toggle becomes a project risk.
3. The engagement triad operates at two altitudes.
   • Visitor-action layer — nav, hero, engage section, all CTAs: Hire · Consult · Collaborate.
   • Narrative layer — capabilities, about, receipt tagging: The Leader · The Expert · The Builder, with Executive Product Leadership / Productized Consulting / Active Venture Building as the formal service names. These bind to the three hues.
   • Lead / Advise / Build is rejected: Joe-centric where the CTA layer must be visitor-centric.
4. The engage section is ordered by ascending commitment — Consult (01), Collaborate (02), Hire (03) — closing with a line to the effect of “most people arrive at 01 and never need the rest, and that is a good outcome.” Hero CTAs still route a recruiter straight to Hire.
5. Fractional and interim live under Hire, not Consult. A consultant delivers a scoped artefact and leaves; a fractional exec owns outcomes and the board conversation. Hire spans 1 day/wk → full time. Consult is genuinely productized: fixed scope, named deliverables, no open-ended retainers.
6. Brand architecture. ProductAnywhere is the practice, Joe da Silva the operator, FormFunction Digital the 2014 antecedent mentioned once in the history. Masthead carries mark + name. Email moves to productanywhere.io.

Phase 1 — Design system & style guide

Produce productanywhere/{{MODEL_SLUG}}/design-system.html — a single self-contained page that is both the specification and its own live proof, plus tokens.css as the extracted source of truth.

Exit criteria, all required:

• Palette. Three lane hues sampled from the logo, each as a four-step saturation ladder, with the maturity meaning of each step named. Plus neutrals, ground, surface, line, and ink ramps for both themes. Every value a semantic token. Every lane hue at every saturation contrast-checked against both grounds — publish the ratios in a table, and state which combinations fail and are therefore forbidden. Do not ship a step that fails and hope.
• Typography. Give this brand an actual voice — this is where every prior concept failed. A display face that echoes the geometric wordmark, a text face chosen for long-form editorial reading, and one mono for ledger metadata, proof slugs and eyebrows. Justify each choice in a sentence. Ship a full type scale with line-heights and measure limits. Self-hosted or Google Fonts only, with real fallback stacks. (A defensible starting point: Jost or Questrial for display as a Futura-adjacent match to the wordmark; a serif such as Source Serif 4 or Newsreader for body if you want kimi’s editorial weight, or a humanist sans if you want gemini’s calm; IBM Plex Mono for metadata. Argue for something better if you have it.)
• Spacing, grid, radii, elevation. An 8px-based scale. State the max content width and the whitespace rhythm explicitly — “clean, modern, uncluttered, generously spaced” is the brief and it has to be a measurable rule, not a vibe.
• The tab primitive. Fully specified: anatomy, hue slot, saturation slot, all states, and at least four applied variants (receipt card, concept card, capability chip, stage marker).
• Components. Buttons (primary / ghost, per opus-4.6-03), the top assessment bar, masthead with availability chip, At a glance colophon, lane row, receipt card with its limit and confidence fields, section header, filter control, footer.
• Motion. Two or three rules, restrained. Nothing that moves without being asked.
• Accessibility. WCAG 2.1 AA. Focus states on every interactive element, keyboard paths, reduced-motion honoured, and the confirmed contrast table above.
• Both themes rendered on the same page, toggleable, proving the token discipline holds.

Write the style guide as prose a human can act on, not a token dump.

Phase 2 — PRD

Produce productanywhere/{{MODEL_SLUG}}/PRD.md. Exit criteria:

• Positioning, audiences (recruiter/board · founder/exec buyer · venture partner), and the job each is trying to do in the first fifteen seconds.
• Information architecture and full page inventory. Home, plus what else earns a page.
• Home page section order, specified section by section, and it must include: the top assessment bar; hero with the CTA pair; the persistent at-a-glance/status summary; the three lanes; social proof — logos, named engagements, testimonials or attributed references, with an explicit note on what is available versus what is under NDA; the receipts ledger; the engagement triad ordered lightest-first; the concept lab; the “Not a fit” section; contact.
• The content model: receipt (claim, baseline, delta, limit, proof slug, confidence, lane, stage), lane, engagement, concept, article. This is the schema the saturation ladder renders.
• The 12-minute AI readiness assessment specified as a real product surface, not a link — entry points, the conversational shape, what is free versus gated, and how it is scored. If a published rubric is claimed, publish it.
• Copy deck for the home page. Actual sentences, not placeholders.
• Tech approach, hosting and the migration path from portfolio.formfunction.co.za, including what happens to the twelve existing concept files and their URLs.
• Analytics and success metrics per audience.
• Non-goals. Say what this site will not do.
• Phased delivery plan with a definition of done per phase.

Phase 3 — Build

Ship the site. Exit criteria:

• Home page complete, every PRD section, real copy, no lorem, no placeholder receipts.
• Built strictly on tokens.css from Phase 1 — the no-hex-outside-tokens grep passes.
• Light and dark both correct; toggle persisted; prefers-color-scheme respected on first load.
• Responsive at 375 / 768 / 1280. No horizontal scroll on the body at any width; wide content scrolls inside its own container.
• Semantic HTML, keyboard-navigable, AA contrast verified against the Phase 1 table.
• Meta, Open Graph, favicon, and a sensible <title>.
• Performance: no render-blocking third-party JS, fonts preloaded with sane fallbacks.
• A short README.md in productanywhere/{{MODEL_SLUG}}/ — what you built, what you decided, what you would do next.

Standing rules

• No build step. Self-contained HTML with inline or adjacent CSS, minimal inline JS. This matches the existing concepts repo and keeps every artefact independently openable.
• Write real copy in Joe’s register: receipts over claims, limits stated before they are asked for, no hype, no “passionate about”, no filler adjectives. If you cannot substantiate a number, do not print it — say what you actually did and what you did not.
• If a decision is genuinely ambiguous, record it in STATE.md as an open question with your recommendation and proceed on that recommendation. Do not block.
• Each iteration ends with STATE.md written. That is what makes the loop resumable.

— end loop prompt —