# ProductAnywhere — design system, PRD & build loop **For:** Kimi K3 and GLM-5.3, run independently against the same brief. **Author:** prepared 20 Aug 2026 from the 7 referenced concepts on `portfolio.formfunction.co.za`. This file has two parts: - **Part A — Findings & decisions** (for Joe). What was extracted from the concepts, what the research says, and the recommended calls on the two open questions. - **Part B — The loop prompt** (copy-paste). Self-contained, resumable, phase-gated. --- --- # Part A — Findings & decisions ## A1. What each concept actually contributes | Concept | Keep | Discard | |---|---|---| | `gemini-31-pro-high-thinking-concept-01` | Light ground (`#fafafa`), generous whitespace, calm uncluttered rhythm, per-pillar accent tokens (`--leader/--expert/--builder`) | Typography (Inter + JetBrains Mono — zero brand character), `TRACK_01 //` pseudo-terminal chrome, "Initialize Engagement" robot voice | | `claude-opus-5-concept-01` | **The receipts model** — number → claim → *stated limit* → `proof/…` slug → `confidence:` field. Top assessment bar. Engagement ladder ordered lightest-first. The "Not a fit" section. Published scoring rubric. | Dark palette, orange accent, chat-mock as the primary hero device | | `claude-opus-46-thinking-concept-03` | **Hero CTA pair**: primary `Engage →` + ghost `See the Receipts`. Three-line hero headline with one emphasised line. Pillar cards with a colour indicator strip. | Generic pillar copy | | `portfolio-site-kimi-k3-concept-01` | **Best overall structure.** `At a glance` colophon card in the hero (Archetype / Base / Verticals / Mode + live status dot). Numbered lane rows under the hero. Editorial section headers (`Sec. 01 About`). Filterable concept lab. Fact sheet. | GitHub-dark palette; system-font typography | | `portfolio-site-glm52-concept-01` | `Status` block (Now / Also / Always / Base) — better *copy* than kimi's colophon, worse placement | `Lead / Advise / Build` triad (see A2). Palette is a straight copy of kimi's | | `portfolio-site-deepseek-pro-concept-01` | `Operating Range / Structure / Method / AI Posture` summary strip. Receipt "Limit:" line. The reinforcement map (Leader→Expert etc.). Availability chip in the masthead. | Density — it is the most cluttered of the seven | | `gpt53codex-high-concept-01` | `Signal → Pilot → Receipt` framing | Thinnest execution of the seven | **Two things nobody solved.** (1) *No concept has real typography* — kimi-k3, glm-5.2 and opus-5 all fall back to `Iowan Old Style / system-sans / ui-monospace`, and gemini uses stock Inter. There is no brand voice in any of them. (2) *No concept is ProductAnywhere* — all seven are "Joe da Silva", `hello@formfunction.co.za`. The brand system does not exist yet. Both are core scope for the loop. ## A2. The engagement triad — recommendation Three candidates were in play: - **A. Hire / Consult / Collaborate** — deepseek, opus-4.6-03, kimi-k3, glm-5.2's engage section - **B. Lead / Advise / Build** — glm-5.2's hero - **C. Leader / Expert / Builder** + Executive Product Leadership / Productized Consulting / Active Venture Building — gpt-5.3-codex, gemini-3.1, kimi-k3's capabilities section **These are not competing options — they are two different altitudes, and the site needs both.** - **Visitor-action layer (nav, hero, engage section, CTAs): `Hire · Consult · Collaborate`.** Imperatives matched to visitor intent. A recruiter recognises "Hire" instantly; a founder with a broken funnel recognises "Consult". This is the conversion layer and it must be about *them*. - **Narrative layer (capabilities, about, receipts tagging): `The Leader · The Expert · The Builder`** with the formal service names underneath. This is the identity layer, and it is what the three logo hues bind to. - **Drop B (`Lead / Advise / Build`).** It is Joe-centric where the CTA layer must be visitor-centric, and it duplicates the archetype layer with less distinctiveness. "Lead" as a button is ambiguous. **Two refinements the research supports:** 1. **Order the engage section lightest-first — Consult (01) → Collaborate (02) → Hire (03)** — as opus-5 did, with its line *"Most people arrive at 01 and never need the rest. That is a good outcome."* It reads as confidence rather than need. The hero CTA still routes recruiters straight to Hire, so nothing is lost. 2. **Keep fractional and interim inside "Hire", not inside "Consult".** The fractional-exec market draws a hard line: a consultant delivers a scoped artefact and leaves; a fractional exec owns outcomes, the backlog and the board conversation. Joe's middle lane genuinely *is* productized consulting (fixed scope, named deliverables, no retainer treadmill) — so "Consult" is correct for it, and fractional CPO belongs under Hire as "1 day/wk → full time", exactly as opus-5 framed it. ## A3. Light vs dark — recommendation **Light is the canonical brand surface. Dark is a supported theme. Build token-first from day one.** 1. **The logo forces it.** The mark is saturated blue / teal / purple tabs on white, and the whole brand idea is *saturation encodes maturity*. On a dark ground the low-saturation tints wash toward the background and the ladder inverts — the least-mature step becomes the least visible, which is semantically backwards. On white the ladder reads correctly at every step. 2. **The audience.** B2B buyers scanning for credibility do better on light: a clean light page reduces cognitive drag when someone is deciding *what is this, is it credible, what do I do next*. That is precisely the recruiter/founder scan. 3. **But dark support is table stakes** in AI- and fintech-adjacent positioning — a site that ignores an OS dark preference now reads as technically behind, which is the one impression this site cannot afford. 4. **It only overcomplicates the project if it is retrofitted.** Decided now, it costs about a day: every colour lives in a semantic token on `:root`, dark redefines *only* the token block, and no hex ever appears outside it. Enforce it as a hard constraint (grep for hex outside `:root` in the build gate) and the toggle is nearly free. That constraint is in the prompt below. Net: light default, `prefers-color-scheme` respected, manual toggle persisted to `localStorage`. And note the irony worth exploiting — kimi-k3 and glm-5.2 both liked "GitHub dark", but what you actually praised in gemini-3.1 was its *light, airy calm*. The structure you want is kimi's; the atmosphere you want is gemini's. That combination is a light-ground kimi. ## A4. The brand system spine — the tabs The logo's semantics already have a content model sitting in the concepts, which is the unlock: - **Hue = lane (permanent identity).** Blue → The Leader. Teal → The Expert. Purple → The Builder. One meaning per hue, never overloaded. - **Saturation = maturity (orthogonal scale).** Four steps. This drives, using existing content: - **receipt confidence** — opus-5 already ships `confidence: medium-high | high` fields - **stage** — kimi-k3's `Signal → Filter → Pilot → Receipts → Harden → Venture` - **concept lab lineage** — v1 → v2 → v3 - **funnel position** — prospect → qualified → engaged → client - **The tab as the atomic UI unit.** Receipt cards, concept cards, capability chips and stage markers are all "tabs": a plane with a hue (lane) and a saturation (maturity). One primitive, used everywhere. That is what makes it a *system* rather than a logo with a website behind it. ## A5. Brand architecture — must be resolved in the PRD ProductAnywhere is the **practice** (since 2014, contracting/consulting across Europe, successor to FormFunction Digital — the Cape Town agency with staff). Joe da Silva is the **operator**. Masthead carries the mark plus the name. Domain `productanywhere.io`. Email moves from `hello@formfunction.co.za` to a `productanywhere.io` address. FormFunction Digital appears once, in the history, as the antecedent — it is lineage, not a competing identity. This affects every byline, the concepts gallery hosting, and the canonical URLs, so it is a phase-1 decision, not a detail. --- --- # Part B — The loop prompt Copy everything between the rules below into Kimi K3 and GLM-5.3 as `/loop ` (no interval — let each model self-pace). Replace `{{MODEL_SLUG}}` with `kimi-k3` or `glm53` respectively. --- 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/.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 ``. - [ ] 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.