THE ARCHITECTURE OF A PRODUCT FAMILY

Des fondations communes.
Different ways forward.

A brand is a promise to a particular person. Its interface should make sense in that person’s world—even when the underlying capabilities are shared.

Explore the compositions ↓Inspect the proposed contract ↓

01 / THE REUSE MODEL

Share the parts.
Compose the experience.

The shared layer owns dependable behaviour. The experience layer decides how a person encounters it. A family can support several brands; a brand can support several useful entry experiences.

01
Fondations communes
Primitives, accessibility and design tokens.
Consistent mechanics
02
Canonical tasks
Evidence, documents, rules and review.
A dependable core
03
Brand composition
Audience, vocabulary, sequence and density.
A useful difference
04
Product surfaces
The app and its marketing preview.
A recognisable experience

The ecosystem architecture

In the target architecture, BrainOS supplies context and intelligence, ContractSpec defines and builds, and Patio supplies shared infrastructure and data. LSSM OS composes these inputs, then runs and operates their environments. Explore these relationships ↗

Current source → direct component reuse

The inspected Tafio repository implements shared career records and multiple product presenters. It explicitly remains standalone. Bringing these boundaries into a shared monorepo with the wider LSSM ecosystem is the next architecture direction, not an integration established by this review.

02 / FOUR COMPOSITIONS

A different task
deserves a different surface.

Switch between the proposed public identities to see the source-kit tokens, working object and task sequence. The new names come from the brand handoff; the source kits retain their current repository names.

D’un bon pas / CAREER AGENTS

Recognise a useful experience

Working object: An experience notebook
Task sequence: Recall → recognise → put into words
Shared task: Profile and evidence

Explore the brand ↗

D’un bon pas .

Construire ma première candidature ↗

VOTRE PARCOURS. DE LA PLACE POUR LA SUITE.

Votre première candidature.
Avec ce que vous avez déjà fait.

Retrouvez les expériences utiles, relisez votre profil et préparez une candidature fidèle. Pas besoin d’arriver avec un CV parfait.

Construire ma première candidature ↗ Explorer un exemple

À partir de ce que vous avez fait de la place pour grandir

Au départ, quelque chose que vous avez fait

« Dans une association, je regroupais les demandes dans un tableau et signalais les informations manquantes à la personne responsable. »

Exemple fictif · interaction locale

VOTRE PROCHAIN CV

Une contribution, formulée clairement.

« Regroupement des demandes d’une association dans un tableau de suivi et signalement des informations manquantes à la personne responsable. »

L’accent peut changer selon l’offre. Votre rôle réel reste le même.

Paper #F3F2DCInk #173E2BAccent #DCE798

Fraunces / DM SansComfortable folio · inline navigation

Source kit: canopee.ts. The visual reproduces its real landing component; the public name follows the brand handoff.

Jobrally / CAREER AGENTS

Move an active job search forward

Working object: An opportunity decision deck
Task sequence: Select → prepare → review the next action
Shared task: Opportunities and applications

Explore the brand ↗

Jobrally

Découvrir les possibilités ↗

JOBRALLY / VOTRE CARRIÈRE EN MOUVEMENT

Choisissez rapidement. Avancez, sans repartir de zéro.

Parcourez vos possibilités enregistrées par gestes ou boutons, choisissez celles à préparer et suivez vos candidatures. Aucun envoi automatique.

Découvrir les possibilités ↗ Voir le fonctionnement

À VOTRE RYTHME.

MAINTENANT, METTEZ-LA À PROFIT. Exemple fictif · interaction locale

VOUS L’AVEZ DÉJÀ DIT.

« Dans une association, j’ai regroupé les demandes dans un tableau de suivi et signalé les informations manquantes à la personne responsable. »

Maya Laurent Profil fictif

01 / GARDER LE FAIT UTILE

Votre propre contribution, dans votre profil.

Regroupement des demandes dans un tableau de suivi et signalement des informations manquantes à la personne responsable.

Ce détail relu appartient à l’expérience associative. Il ne crée pas un autre emploi et ne prétend pas que vous dirigiez l’organisation.

Paper #F6F5E9Ink #18251FAccent #FF5A2E

Barlow Condensed / ManropeCompact focus · preparation queue

Source kit: tempo.ts. The visual reproduces its real landing component; the public name follows the brand handoff.

Lettercase / CAREER AGENTS

Make a credible application

Working object: A source-to-document worktable
Task sequence: Target → evidence → draft → review
Shared task: Documents and evidence

Explore the brand ↗

Lettercase

Préparer cette candidature ↗

LETTERCASE / ATELIER DE CANDIDATURE

Un poste précis.
Mettez votre expérience à profit.

Reliez le poste à vos exemples, sélectionnez les faits utiles et relisez le CV, la lettre et les réponses pour cette candidature.

Préparer cette candidature ↗ Mettre l’exemple en pratique

UNE SOURCE. TROIS RÉSULTATS UTILES. Exemple fictif · interaction locale

CV / RELATION CLIENT

Un accueil préparé.
Des informations claires.

Préparation des listes d’accueil et des messages pour les bénévoles d’une association, avec le coordinateur.

L’expérience reste du bénévolat. Aucun résultat mesuré n’est ajouté.

Lettercase

POSTE VISÉ

SORTIE SÉLECTIONNÉE

Le choix modifie l’exemple. Rien n’est créé ni envoyé.

LETTERCASE / ATELIER DE CANDIDATURE

Paper #EEE9DAInk #171916Accent #F04B2E

Archivo Black / Public SansEditorial worktable · source and draft

Source kit: atelier.ts. The visual reproduces its real landing component; the public name follows the brand handoff.

Crossrole / CAREER AGENTS

Explore a different professional direction

Working object: An experience-to-role bridge
Task sequence: Gather fragments → compare directions → connect evidence
Shared task: Profile, evidence and opportunities

Explore the brand ↗

Crossrole

Explorer mes prochaines directions ↗

VOTRE EXPÉRIENCE, DANS TOUTES SES NUANCES

Votre expérience
peut ouvrir une autre direction.

Reliez vos contributions à des pistes concrètes, distinguez les faits des hypothèses et choisissez une prochaine action utile.

Explorer mes prochaines directions ↗ Explorer un exemple

Choisissez un élément du récit.

Paper #FFF8E7Ink #3C2547Accent #C8BAD7

Bricolage Grotesque / DM SansModular comparison · visible connections

Source kit: mosaique.ts. The visual reproduces its real landing component; the public name follows the brand handoff.

These previews reproduce the original landing markup, component layouts, tokens, fonts and assets available in source. They use local sample state. Every replica records its source and a TODO to replace it with the real component import after the monorepo merge.

03 / ONE REGISTRY, SEVERAL READINGS

Different front doors.
Coherent relationships.

Keep areas, groups, capabilities, audiences, operating models, families and projects as linked records. Each website chooses the relationships that help its own visitor.

lssm.co

Find something useful.

Situation → capability → audience → targeted experience.

Explore the capability directory ↗

lssm.tech

Understand the construction.

Foundation → task → component → product example.

Follow the source ↗

Brand websites & apps

Do the work.

A focused promise, familiar vocabulary and an appropriate opening workflow.

Explore Company assistance ↗

Family membership does not establish legal company ownership. Component reuse does not grant permission to share customer records between products.

04 / REUSE THE PRODUCT’S OWN VISUALS

Let the product
explain itself.

A small, relevant view of the actual working interface can say more than a generic feature tile. Choose the reuse mode deliberately and keep its provenance visible in the implementation.

WHEN THE BOUNDARY IS READY

Live display component

Render a product-owned display module with a reviewed synthetic fixture and a read-only adapter. Share theme tokens and layout rules. Keep authentication, data access and mutation handlers outside the preview bundle.

Best for: reusable, isolated presenters.

WHEN RUNTIME REUSE IS UNSUITABLE

Static product capture

Generate an image from a known build and sample state. Record the product, source revision, viewport and capture date, with accessible alternative text.

Best for: complex or coupled screens.

USED IN THIS REVIEW

Source component replica

Port the actual product component into this static review: its structure, theme, typography, assets and useful sample interactions. Keep the originating repository, revision and component beside the code.

TODO after merge: replace the replica with the original component import.

05 / THE IMPLEMENTATION SEAM

A registry to connect.
An adapter to display.

This proposed TypeScript contract separates portfolio identity from preview execution. The adapter accepts a synthetic fixture; it receives no authenticated workspace, account authority or operation runner.

REFERENCE DESIGN / TYPESCRIPT

type AreaId = string;
type GroupId = string;
type CapabilityId = string;
type AudienceId = string;
type OperatingModeId = string;
type SurfaceId = "landing" | "app";

type AreaGroup = {
  id: GroupId;
  areaId: AreaId;
  brandIds: readonly string[];
};

type SourcePreview = {
  surface: SurfaceId;
  repository: string;
  revision: string;
  componentPath: string;
  mode: "source-replica" | "component-import";
  fixtureId?: string;
};

type BrandRecord = {
  id: string;
  familyId?: string;
  areaIds: readonly AreaId[];
  groupIds: readonly GroupId[];
  capabilityIds: readonly CapabilityId[];
  roleIds: readonly AudienceId[];
  operatingModeIds: readonly OperatingModeId[];
  destinations: readonly string[];
  previews: readonly SourcePreview[];
};

// One identity, several area/group and capability/audience memberships.
// A source-evidenced capability differs from a requested direction.
// Record capability coverage and evidence per project.
// SOURCE: tafio-poc-openai-dev-day/apps/web/experiences/landings/*
// TODO(monorepo): import the original landing or app presenter here.
// Preserve its theme, layout, assets and read-only synthetic fixture.
// The portfolio supplies placement/context; the product owns its design.
export interface ProductPreviewAdapter<Fixture, View> {
  render(input: {
    brand: BrandRecord;
    surface: SurfaceId;
    fixture: Readonly<Fixture>;
    mode: "read-only";
  }): View;
}

Keep the mapping explicit.

Track the brand, its many area/group memberships, capabilities, audiences, operating models, family and source surfaces independently. A brand can show several landing and app components. Keep domain ownership, name acceptance and product availability in separate fields in the production registry.

Integrate at a proven seam.

Start with the presentation definitions and a read-only presenter. Extract shared packages only when a second real use establishes the boundary. Keep task rules in their canonical owner.

Preserve the useful difference.

Let brands change navigation, density, voice and task sequence. Verify that the first useful action improves for the intended situation before standardising the composition.

06 / SOURCE & EVIDENCE

Concrete seams
in the current source.

ContractSpec Studio adds the product-owner and product-manager workflow, including its own marketing and planning views. The Tafio paths establish the composition model. The per-brand index then identifies the exact components from Tafio, Fairelio, Taketide, ContractSpec, ContractSpec Studio, Tellshift and the retained hCircle source.

Visual identity

Palette, typography and composition definitions

apps/web/presentation/definitions/ ↗

Goal-based experience

Situations, tool priorities and involvement preferences

apps/web/experiences/registry.ts ↗

Task ownership

A canonical workspace above the product presenters

apps/web/products/contract.ts ↗

Composition boundaries

What changes, what stays shared and what is evidenced

docs/PRODUCT_COMPOSITION.md ↗

Repository boundaries

Domain modules and external integration seams

docs/TECHNOLOGY.md ↗

The component behind each preview.

Every entry names the source revision and the component to import after the merge. Marketing specimens stay identified as marketing specimens; an app excerpt uses its own source component.

Tafiolssm-tech/monorepo-hirly-b2c-focused

Source revision 9283bcd99110b895a7e58e9df677b9dd3faf1aea · landing

marketing/index.html

TODO after monorepo merge
Import the extracted production MarketingHero / ProductPreview display components when this repository is merged; preserve the generated tokens from libraries/tokens/v3.json.

Faireliolssm-tech/tafio-poc-openai-dev-day