THE ARCHITECTURE OF A PRODUCT FAMILY

Shared foundations.
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
Shared foundations
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 .

Build my first application ↗

YOUR JOURNEY. ROOM FOR WHAT COMES NEXT.

Your first application.
With what you have already done.

Recover useful experiences, review your profile and prepare an application that reflects your work. You do not need to arrive with a perfect CV.

Build my first application ↗ Explore an example

Starting from what you have done room to grow

Start with something you have done

“At an association, I gathered requests in a spreadsheet and flagged missing information to the person responsible.”

Fictional example · local interaction

YOUR NEXT CV

A contribution, clearly expressed.

“Gathered an association’s requests in a tracking spreadsheet and flagged missing information to the person responsible.”

The emphasis can change with the opportunity. Your actual role stays the same.

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

Explore opportunities ↗

JOBRALLY / YOUR CAREER, IN MOTION

Choose quickly. Move forward, not back.

Browse your saved opportunities with swipes or buttons, select which to prepare and track your applications. No automatic submission.

Explore opportunities ↗ See it work

AT YOUR PACE.

NOW, PUT IT TO USE. Fictional example · local interaction

YOU HAVE ALREADY SAID IT.

“At an association, I grouped requests in a tracking table and flagged missing information to the person in charge.”

Maya Laurent Fictional profile

01 / KEEP THE USEFUL FACT

Your own contribution, in your profile.

Grouped requests in a tracking table and flagged missing information to the person in charge.

This reviewed detail belongs to the association experience. It does not create another job or claim you led the 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

Prepare this application ↗

LETTERCASE / APPLICATION WORKSHOP

One specific role.
Put your experience to work.

Connect the role to your examples, select useful facts and review the CV, letter and answers for this application.

Prepare this application ↗ Put the example to work

ONE SOURCE. THREE USEFUL OUTPUTS. Fictional example · local interaction

CV / CUSTOMER RELATIONS

A prepared welcome.
Clear information.

Prepared welcome lists and messages for an association’s volunteers, working with the coordinator.

The experience remains volunteering. No measured result is added.

Lettercase

TARGET ROLE

SELECTED OUTPUT

The selection changes the example. Nothing is created or sent.

LETTERCASE / APPLICATION WORKSHOP

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

Explore my next directions ↗

YOUR EXPERIENCE, IN ALL ITS SHADES

Your experience
can open another direction.

Connect your contributions to concrete directions, distinguish facts from hypotheses and choose a useful next action.

Explore my next directions ↗ Explore an example

Choose a piece of the story.

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