Build the shared patterns once in Brand and prototype them on this site

Context and Problem Statement

The patterns every site repeats were each written several times: the endorsement in four ways (“Una unidad de AKRIBIS · One” on three sites, “Parte de AKRIBIS · One” on one, the Portuguese preposition differing between two, the Spanish hard-coded into every language on one), the footer four ways, the unit directory at least six ways over five unit lists, the language switch five ways, and the contact form as three mechanisms and seven copies: two sites post straight from the browser to Salesforce with a reCAPTCHA script, two relay through a Worker, one uses mailto, none asks for consent, and one sends every language to the Spanish thank-you page. Which components are built once, where do they live, how do they take a brand’s colour, and how is the One endorsement written?

Decision Drivers

Criteria 1 (trust), 2 (one family), 3 (register), 4 (accessibility), 7 (three languages) and 9 (generated and tested) of ADR-0009; ADR-0005 (the endorsement line); ADR-0010 (the orders); ADR-0015 (data-brand scoping); ADR-0023 (the layers).

Considered Options

• The components in this repository, built against the tokens and the register, used by this site and shown inside other brands on the Shared patterns page; delivered to the sites through the package of topic 5.2
• A separate component repository with its own build
• A written pattern spec only, each site implementing it

Decision Outcome

Proposed: the first option. src/components/patterns/ holds the components; this site mounts them (the language switch, the legal line, the group footer with the unit directory, the 404); the Shared patterns topic shows the group bar, the endorsement, the directory, the One module and the contact form inside AKRIBIS, AKRIMET and SOLFARMA through data-brand and all.css. The sites receive them through the package (5.2), whose format (Astro components, web components or HTML and CSS) is decided there; until then a site copies nothing.

• The endorsement is the line from the register (“Una unidad de”, ADR-0005; “A unit of”, “Uma unidade da” proposed) and the published One ring lockup, all of it a link to akribis.one: at bar size the solid ring, as a block the spectrum, white on dark. Never “Parte de”, never “AKRIBIS · One” set in type, never a redrawn ring. The wording lives once, in brand/units.yaml, and reaches the sites through units.json.
• The group bar sits above a unit site’s header on AKRIBIS One’s teal ink (--signature-akribis-one), identical everywhere: the endorsement at the start, the language switch at the end.
• The unit directory is the register in the grid order (ADR-0010): categories as columns, each mark in its colour from the published file, its verb, its link. One component serves the footer of every site and the directories of akribis.group and akribis.one; compact drops the verbs. The five disagreeing lists end here.
• The AKRIBIS One module on a unit’s home: the spectrum ring, the slogan and second line from the register in the page’s language, the link to akribis.one.
• The contact form: name, organisation, email, phone, about (a unit or the group), message, a consent line linking the privacy page; every field labelled with autocomplete and inputmode; a honeypot instead of a third-party captcha. It posts to the site’s own /contact, which validates, relays to the CRM with the site’s lead source and sends to the thank-you page in the same language. On this site it is a prototype.
• The language switch and the legal line are extracted from this site’s layout into patterns; the group footer now renders the directory instead of its own list.
• Colour. A component takes its roles from the brand file it sits in; wrapped in data-brand, its roles resolve to that brand. Nothing is recoloured by hand, and the components use published mark files instead of inline SVG, so the page stays light.
• Markers. Every pattern renders data-pattern="<id>"; the anatomy (ADR-0023) says where each is due and the checker (ADR-0025) verifies it.

Consequences

• Good, because one wording, one list and one form replace four, six and seven.
• Good, because the page that specifies a pattern is the page that runs it, in three brands.
• The server side of /contact (one Worker or one per site, the per-unit lead source) and consent (no site needs it today) are open; so are templates for own content and the WhatsApp button three sites float.
• The package format and versioning are decided in 5.2.