Brand Visual Identities — Divergence Proposal

STATUS: PROPOSAL — pending owner approval. No code changes have been made. Drafted 2026-06-01 by the swarm (design-direction one-shot) in response to owner feedback that the product frontends "look too much alike." This is a direction document: palettes, type, logo/wordmark intent, mood, and signature layout motifs per brand. Implementation is a separate, owner-gated workstream (per product, staging-first).

Corporate context (see root CLAUDE.md): every product is a distinct brand under Mahmoud Consultancy B.V., built by the GloryLabs dev agency. GloryLabs is itself a distinct agency brand. EuropeLogin is the credibility outlier — as an e‑Herkenning alternative it must read as official/governmental, so its identity is deliberately the most constrained. Owner priority: AuditPic = #1, GloryLabs site = #2 — both are detailed most below.

1. Root cause of the sameness

The owner is right, but the cause is not "one shared Angular starter." The frontends are technically heterogeneous (Next.js+Tailwind, three separate Angular apps, one static HTML/CSS site) with no shared component library and no shared token package. They look alike because, independently, they converged onto two house styles — two visual clones that each got copied across multiple brands:

Cluster A — "Editorial / forensic" (3 brands wearing one face)

| Brand | Display type | Background | Accent | Data type | Shape language | |---|---|---|---|---|---| | AuditPic | Instrument Serif | paper #fcfcfb | sage oklch(.55 .08 145) | Geist Mono | square corners, 1px hairlines | | Valideerleeftijd | EB / Cormorant Garamond | parchment #f7f4ec | sage #6b8a7a | JetBrains Mono | 1px rules, square | | InterimPlaza | Instrument Serif | white / black ink | OKLch blue oklch(38% .09 250) | JetBrains Mono | hairlines, editorial |

All three share the same DNA: **serif headline + warm off-white + muted green/earthy accent

• uppercase monospace "eyebrow" labels + hairline dividers + near-square corners.** Put their landing pages side by side and they read as one studio's template. This is the primary source of the "they all look the same" reaction.

Cluster B — "Dark fintech SaaS" (2 brands wearing one face)

| Brand | Background | Accent | Shape | Effects | |---|---|---|---|---| | Claimio | navy #0f2a4a / #16365e | teal #2dd4bf | 12–16px rounded | translucent cards | | GloryLabs | navy #0b1020 / #1a2342 | blue #5b8cff + teal #00d4b8 | 10–14px rounded | glassmorphism, gradient hero |

Both are dark-navy + cyan/blue accent + rounded translucent cards + gradient/glass hero — the default "modern SaaS landing" look. GloryLabs' own palette is even labelled PLACEHOLDER in code, so its resemblance to Claimio is accidental, not intentional.

The outlier (correctly distinct)

• EuropeLogin — Rijkshuisstijl gov blue #154273 + orange #e17000, RO Sans, utilitarian. This is appropriate and should be preserved/sharpened, not redesigned away. A credible e‑Herkenning alternative has to look like it belongs next to a government portal.

Conclusion (one line): Not one shared starter — two copy‑pasted house styles (an "editorial‑serif" look across AuditPic/Valideerleeftijd/InterimPlaza and a "dark‑navy‑fintech" look across Claimio/GloryLabs); each brand needs its own palette, type, and motif so the clusters break apart.

Guiding principle for divergence

Give each brand one ownable hue, one ownable type pairing, and one signature motif that no sibling shares. Spread the hues around the wheel so no two products read as the same family:

AuditPic     sage green / paper      (forensic, archival)
GloryLabs    near-black + acid lime  (engineering, terminal)
InterimPlaza electric violet         (human, optimistic recruitment)
Valideerleeftijd  electric cyan      (precise, scanner/biometric)
Claimio      amber / signal ochre    (calm, insurance document)
EuropeLogin  gov blue + orange       (official, governmental — keep)

A shared token contract (same CSS-variable names, different values per brand) is encouraged for engineering reuse — but the rendered result must be unmistakably different.

2. AuditPic — "Forensic record" (priority #1, detailed)

Product: signed, tamper-evident photo SaaS (api.auditpic.com). The brand promise is provenance — a photograph that can prove it has not been altered.

Strategic move: AuditPic is the rightful owner of the forensic-editorial look — its seal/verdict/hash language is genuinely native to "evidence." So we do not abandon it; we deepen and exclusivize it, and remove the same cues from Valideerleeftijd and InterimPlaza so AuditPic is the only brand wearing it. Push it further toward "archival evidence / lab report" and away from "generic serif marketing site."

Mood / personality

Forensic, archival, quietly authoritative. Cold-press paper, lab-bench precision, a notary's stamp. Restrained to the point of austerity — credibility through under-design. Nothing decorative; every mark is functional (a hash, a seal, a timestamp, a verdict).

Colour

| Token | Value | Role | |---|---|---| | --paper | #FCFCFB | primary canvas (keep) | | --ink | #14130F | text / structure (keep) | | --accent (verify) | oklch(.55 .08 145) ≈ #5E8B6F | sage "verified" green (keep) | | --danger (tamper) | oklch(.50 .13 28) ≈ #B23A2A | "altered" red | | --seal (new) | deep oxblood #6E1F1A | wax-seal / stamp accent — distinguishes AuditPic from VL's sage-only palette |

The oxblood seal colour is the new differentiator: it gives AuditPic a notary/wax-stamp signature that Valideerleeftijd (which keeps pure sage) will no longer share.

Typography

• Verdicts / display: Instrument Serif (keep) — but reserve it only for verdict words ("Unaltered.", "Tampered.") and hero headline. Make the italic verdict the brand's voice.
• Body / UI: Geist Sans (keep).
• Data: Geist Mono (keep) for hashes, IDs, EXIF, timestamps — lean into this; mono data is a core brand texture.

Logo / wordmark

• Keep the Evidence-Frame icon (registration brackets + scale tick + checkmark) and the concentric SignatureSeal stamp — these are strong and unique; promote the seal to the primary brand mark.
• Wordmark "AuditPic" in Geist Mono, uppercase, with the "by Mahmoud Consultancy" byline.

Signature layout motifs

1. The verdict card — italic-serif verdict + monospace SHA hash + sage/red state chip, framed by 1px hairlines. This is the hero artifact; build every page around showing one.
2. The wax seal / certificate stamp — concentric SignatureSeal with perimeter monospace text, rendered in the new oxblood, applied like a notary stamp over photo evidence and at page footers ("sealed by AuditPic"). Square corners + hairline grid stay as the chassis.

3. GloryLabs — "Engineering atelier" (priority #2, detailed)

Product: the dev agency's own site (glorylabs.nl, greenfield Angular 21). It must signal a real, opinionated engineering team — the people who build everything else in this workspace. Today it is a navy/teal placeholder that looks like a generic SaaS and, worse, like Claimio. It needs the boldest, most distinct identity of the set.

Strategic move: abandon the dark-navy-fintech cluster entirely. Go high-contrast monochrome + a single electric "terminal" accent, and make code/monospace the brand texture. An agency should look like its craft: a terminal, a blueprint, a build log.

Mood / personality

Confident, technical, a little raw. Studio-as-workshop. Think build logs, blueprints, command-line, system diagrams — not gradients and glass. Energetic but engineered; the opposite of AuditPic's quiet restraint and of Claimio's soft fintech calm.

Colour

| Token | Value | Role | |---|---|---| | --canvas | near-black #0A0A0A | primary (true black-ish, not navy — kills the Claimio resemblance) | | --canvas-alt | #141414 | section alternation | | --paper (light mode) | #F4F4F0 | optional "blueprint paper" inverse theme | | --text | #EDEDED | body on dark | | --accent | acid lime / chartreuse #C6F135 | the signature — no sibling uses yellow-green; reads as "terminal/cursor on" | | --accent-ink | #0A0A0A | text on the lime (lime is a surface, used sparingly) |

Lime-on-black is deliberately loud and ownable; it shares no hue family with AuditPic sage, Claimio teal, EuropeLogin blue, or VL cyan.

Typography

• Display: a strong geometric/grotesk — Space Grotesk (or General Sans), heavy weight, tight tracking. Distinct from every sibling's serif or system sans.
• Body: Inter / system sans.
• Mono (hero texture): JetBrains Mono or Berkeley Mono — used not just for code but for labels, nav, and the wordmark. Code is the brand.

Logo / wordmark

• Monospace wordmark with a terminal cursor / caret motif: glorylabs▮ or glory_labs, the blinking block in acid lime. Optionally a "prompt" glyph (> or $) as the icon.
• Avoid the current "GloryLabs with blue Labs span" — too SaaS-generic.

Signature layout motifs

1. Blueprint grid + build-log hero — a faint engineering grid/graph-paper background with a monospace "build log" or $ deploy ... ticker as the hero, instead of a gradient. The work scrolls like a terminal.
2. System-diagram project cards — portfolio/case-study cards drawn as boxed nodes with monospace labels and connector lines (architecture-diagram aesthetic), accented in lime on hover. Sharp corners, 1px lime hairlines — the visual language of a wiring diagram, not a marketing card.

4. InterimPlaza — "Human marketplace" (recruitment)

Product: recruitment platform (app.interimplaza.nl), the most consumer-facing brand.

Strategic move: leave the editorial-serif cluster. Recruitment is about people and optimism, not lab reports. Go warm, friendly, energetic, photo-led.

• Mood: optimistic, human, trustworthy-but-warm; a bustling plaza, not a document.
• Colour: electric violet #6D28D9 → #8B5CF6 primary (modern, distinct from gov blue and forensic sage), with a warm secondary (soft coral #FF7A59 or amber) and clean neutral greys. Light, airy backgrounds — not parchment.
• Typography: a friendly humanist sans for everything — Plus Jakarta Sans or Sora/Inter — drop the serif entirely (the serif is what made it look like AuditPic). Bold, rounded headlines.
• Logo: rounded, approachable wordmark; "plaza" pin / cluster-of-people mark.
• Shape language: generously rounded cards and pills, soft shadows — the opposite of the forensic square/hairline chassis.
• Signature motifs: (1) candidate / job cards with avatars and rounded skill-pills in violet; (2) a "plaza" tiled grid of people/opportunities with real photography and motion on hover.

5. Valideerleeftijd — "Precision gate" (age verification API)

Product: PSD2 age-verification (developer/B2B, bank-grade trust).

Strategic move: leave the parchment-serif cluster (which now belongs to AuditPic). VL is an API/infrastructure product — make it read technical, exact, scanner-like.

• Mood: precise, secure, minimal-tech; a biometric scanner / age-gate, developer-first.
• Colour: crisp electric cyan #06B6D4 / azure #0EA5E9 on near-white #FBFCFD and deep ink — bright and digital, clearly not gov blue and not sage. A single red #E5484D for "denied / underage."
• Typography: geometric sans (Space Grotesk display + Inter body) and IBM Plex Mono for API/code — no Garamond serif.
• Logo: a minimal scan-line / shield-check or "18+ gate" glyph; clean lowercase geometric wordmark.
• Shape language: tight radii (4–6px), crisp 1px borders, a "scan line" accent.
• Signature motifs: (1) an age-gate / scan-line hero (a horizontal sweep that resolves to ✓ verified); (2) API request/response panels (dark code blocks with cyan left-border) as the primary content motif, signalling "developer product."

6. Claimio — "Calm claim" (B2B schadeformulier)

Product: insurance claim forms, multi-tenant white-label (--brand-primary already exists).

Strategic move: leave the dark-navy-fintech cluster (which it currently shares with GloryLabs). Insurance wants calm, trustworthy, document-grade — not a dark crypto-SaaS look.

• Mood: reassuring, orderly, paperwork-made-painless; light and clear, not dark.
• Colour: flip to a light base (#FBFAF7 / white) with a confident amber / signal ochre #D97706 or trustworthy forest as the brand line (distinct from teal/navy). Clear semantic status colours for the claim lifecycle (draft/submitted/review/approved/rejected).
• Typography: a clean, legible humanist sans (Inter / Source Sans) — forms must read effortlessly; optional mono for claim/reference numbers.
• Logo: keep the checkmark-in-rounded-square idea (it works) but recolour off teal; "claim‑io" wordmark with the accent on the suffix.
• Shape language: soft rounded cards on light, generous form spacing, a strong stepper / timeline as the spine.
• White-label note: the existing --brand-primary / --brand-secondary override hooks stay — Claimio's own brand is the default skin; tenants reskin per insurer.
• Signature motifs: (1) a claim timeline / stepper (draft → submitted → review → decision) as the hero device; (2) clean document-style form cards with status pills.

7. EuropeLogin — "Official gateway" (keep, sharpen)

Product: e‑Herkenning alternative — credibility depends on looking governmental.

• Keep the Rijkshuisstijl direction: gov blue #154273 + orange #e17000, RO Sans, the BASIS/MIDDEN/HOOG assurance-badge system.
• Sharpen, don't redesign: tighten spacing/typography to feel like an official portal; make the assurance-level badge the signature motif. This is the one brand that should look institutional and slightly conservative — its distinctness comes from restraint.

8. Summary matrix (target end-state)

| Brand | Hue / base | Type pairing | Shape | Mood | Signature motif | |---|---|---|---|---|---| | AuditPic | sage green / paper + oxblood seal | Instrument Serif + Geist Mono | square, hairline | forensic, archival | verdict card + wax seal | | GloryLabs | acid lime on near-black | Space Grotesk + JetBrains Mono | sharp, blueprint | engineering, terminal | build-log hero + system-diagram cards | | InterimPlaza | electric violet + coral | Plus Jakarta Sans | rounded, soft | human, optimistic | candidate cards + plaza grid | | Valideerleeftijd | electric cyan / azure | Space Grotesk + IBM Plex Mono | tight, crisp | precise, scanner | age-gate scan-line + API panels | | Claimio | amber/ochre on light | Inter / Source Sans | rounded, light | calm, document | claim timeline + form cards | | EuropeLogin | gov blue + orange | RO Sans | utilitarian | official, institutional | assurance-level badge |

9. Suggested rollout (owner-gated, staging-first — not started)

1. Owner approves / edits this direction (especially the AuditPic-keeps-forensic and GloryLabs-goes-lime calls, and the per-brand hue assignment).
2. Lock per-brand tokens into each repo's existing CSS-variable system (no new framework needed — the variable names can stay shared as a contract; only values diverge).
3. Sequence by owner priority: AuditPic → GloryLabs → InterimPlaza → Valideerleeftijd → Claimio; EuropeLogin only a light sharpening pass.
4. Each per-product redesign ships staging-first, behind the normal PR/CI flow; prod cutover stays owner-gated per standing policy.

No code, secrets, CI, or prod touched by this document.