Visual Regression Baseline

Role

This document defines the first screenshot and visual-review baseline for the Design Operating System. It does not introduce a new visual regression service yet. The goal is to make manual and Storybook-backed visual review repeatable before adding automation.

Baseline Sources

Source	Role	Current status
Real OS Shell route	Confirms routing, shell chrome, app framing, and responsive behavior.	Manual browser check
Storybook story	Confirms component and app state in isolated UI review.	Active for `JoinUsApp`
Screenshot artifact	Captures a visual checkpoint for PR review or release notes.	Manual artifact until automation exists
Design docs	Explain expected layout, density, and source-of-truth hierarchy.	Active

First Baseline Targets

Surface	Route or story	Viewports	Checks
Join Us app	`/app-os/join-us`	390px, 820px, 1120px	Hero visible, culture section visible, human roles and AI agents separated, no horizontal overflow.
Join Us Storybook	`OS Apps/Join Us`	Desktop, Mobile, DenseRoleCards	Cards remain readable and do not overlap.
Design Operating System docs	`/docs/product/design/design-operating-system`	390px, 1024px	Tables wrap cleanly, reference links visible, no heading overflow.
Platform Incubation Roadmap docs	`/docs/product/roadmap/platform/platform-incubation-roadmap`	390px, 1024px	Now / Next / Later tables remain scannable.

Manual Review Checklist

For any design-operating-system or Join Us UI change, capture or inspect:

desktop viewport around 1120px wide;
mobile viewport around 390px wide;
no horizontal page overflow;
no card title clipping;
no tag text overflow;
no nested card visual clutter;
story renders without runtime shell dependencies;
docs page builds through pnpm build:docs.

Future Automation

Stage	Capability	Notes
Now	Manual browser checks and Storybook stories.	Use app route plus Storybook state stories.
Next	Add scripted screenshot capture for selected routes.	Store screenshots as review artifacts, not permanent repo clutter by default.
Later	Add visual diff service or CI snapshot review.	Evaluate only after core stories and routes are stable.

Guardrails

Do not commit large screenshot folders by default.
Do not treat screenshots as design truth without linking the relevant docs, tokens, and Storybook story.
Do not add a paid visual-regression service before the repository has stable story coverage and a clear CI policy.