feat(fp): WP-14 — Storybook taxonomy reorg + Layers MDX

Retitle all 49 stories into a sidebar that makes the DDD seam visible:
Foundations (curriculum) -> Design System (Atoms/Molecules/Organisms/
Templates/Devtools, everything in shared/ui + shared/layout) -> Domein
(Registratie/Herregistratie/Auth/Brief, everything in a context's ui/).
Pin the order via storySort. Add layers.mdx explaining the split and
linking the enforcing eslint rules; document the story-title convention
in CLAUDE.md. Fix a stale "status banner" reference in atomic-design.mdx
left over from WP-13's upload-status-banner deletion.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.storybook/preview.ts

@@ -25,6 +25,18 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    // Sidebar tells the DDD seam: reusable design system, then domain contexts.
+    // See src/docs/layers.mdx.
+    options: {
+      storySort: {
+        order: [
+          'Foundations',
+          'Design System',
+          ['Atoms', 'Molecules', 'Organisms', 'Templates', 'Devtools'],
+          'Domein',
+        ],
+      },
+    },
   },
 };
 

CLAUDE.md

@@ -120,8 +120,12 @@ but the FE doesn't call them.
 Vitest. Co-locate `*.spec.ts` next to the unit. **Domain and pure logic must have a
 spec** (reducers, combinators, `visibleSteps`, parsers, boundary `parse*` adapters).
 Test the pure function directly — no Angular TestBed for domain. UI is exercised via
-Storybook stories (`*.stories.ts` co-located, titled `Layer/Name`, a11y addon on),
+Storybook stories (`*.stories.ts` co-located, a11y addon on), not heavy component tests.
-not heavy component tests.
+**Story titles mirror the sidebar's Design System/Domein split** (see
+`src/docs/layers.mdx`): a `shared/ui`/`shared/layout` component is titled
+`Design System/<Atoms|Molecules|Organisms|Templates|Devtools>/<Name>`; a component in a
+context's `ui/` is titled `Domein/<Context>/<Name>` — full stop, regardless of which
+atomic layer it is (a context organism doesn't get its own `Organisms/` bucket).
 
 ## Conventions
 

docs/backlog/README.md

@@ -53,7 +53,7 @@ for its existing violations, so every WP ends green.
 | [WP-11](WP-11-markup-fidelity.md)       | CIBG markup fidelity: application-link + absent-class triage | 2 · CIBG                    | done   |
 | [WP-12](WP-12-datablock.md)             | CIBG Datablock for application data                          | 2 · CIBG                    | done   |
 | [WP-13](WP-13-cibg-gap-register.md)     | CIBG-gap register + hygiene + MDX                            | 2 · CIBG                    | done   |
-| [WP-14](WP-14-storybook-taxonomy.md)    | Storybook taxonomy reorg + Layers MDX                        | 3 · Storybook               | todo   |
+| [WP-14](WP-14-storybook-taxonomy.md)    | Storybook taxonomy reorg + Layers MDX                        | 3 · Storybook               | done   |
 | [WP-15](WP-15-missing-stories.md)       | Missing stories: shell + brief components                    | 3 · Storybook               | todo   |
 | [WP-16](WP-16-component-a11y.md)        | Component a11y: description wiring + alert role              | 4 · a11y                    | todo   |
 | [WP-17](WP-17-app-a11y.md)              | App-level a11y: route focus, template lint, WCAG checklist   | 4 · a11y                    | todo   |

docs/backlog/WP-14-storybook-taxonomy.md

@@ -1,8 +1,17 @@
 # WP-14 — Storybook taxonomy reorg + Layers MDX
 
-Status: todo
+Status: done (<pending commit>)
 Phase: 3 — Storybook as curriculum
 
+> **Deviation:** the "Layout/" bucket (breadcrumb, site-footer, site-header) wasn't in the
+> Decisions block's explicit scheme, so each got folded into Atoms/Molecules/Organisms by
+> its own doc-comment classification (breadcrumb → Molecules, site-footer/site-header →
+> Organisms, both already documented as such in their component header comments) rather
+> than kept as a separate bucket. Fixing `atomic-design.mdx`'s "status banner" reference
+> (stale since WP-13 deleted `upload-status-banner`) was caught as a side effect of
+> reviewing every MDX page for broken references — not itself a retitle issue, but the
+> same "unbroken MDX" acceptance criterion covers it.
+
 ## Why
 
 49 stories sit in a flat `Atoms/Molecules/Organisms/Templates/Layout` scheme with domain
@@ -58,11 +67,11 @@ Domein/
 
 ## Acceptance criteria
 
-- [ ] Sidebar shows exactly Foundations → Design System → Domein with the sub-order
+- [x] Sidebar shows exactly Foundations → Design System → Domein with the sub-order
       pinned.
-- [ ] Zero story titles outside the scheme (grep `title:` and eyeball).
+- [x] Zero story titles outside the scheme (grep `title:` and eyeball).
-- [ ] `layers.mdx` renders; existing MDX pages unbroken.
+- [x] `layers.mdx` renders; existing MDX pages unbroken.
-- [ ] Convention in CLAUDE.md.
+- [x] Convention in CLAUDE.md.
 
 ## Verification
 

src/app/auth/ui/login-form/login-form.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { LoginFormComponent } from './login-form.component';
 
 const meta: Meta<LoginFormComponent> = {
-  title: 'Organisms/Login Form',
+  title: 'Domein/Auth/Login Form',
   component: LoginFormComponent,
 };
 export default meta;

src/app/brief/ui/letter-composer/letter-composer.stories.ts

@@ -118,7 +118,7 @@ const render = (b: Brief, decisions: BriefDecisions) => ({
 });
 
 const meta: Meta<LetterComposerComponent> = {
-  title: 'Organisms/Letter Composer',
+  title: 'Domein/Brief/Letter Composer',
   component: LetterComposerComponent,
 };
 export default meta;

src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.stories.ts

@@ -10,7 +10,7 @@ import { Uren } from '@registratie/domain/value-objects/uren';
 const validData = { uren: 4160 as Uren, jaren: 5, punten: 200, documents: [] };
 
 const meta: Meta<HerregistratieWizardComponent> = {
-  title: 'Herregistratie/Wizard',
+  title: 'Domein/Herregistratie/Wizard',
   component: HerregistratieWizardComponent,
   // The wizard injects BigProfileStore (for the optimistic cross-page flag),
   // which creates httpResources — so the story needs an HttpClient.

src/app/herregistratie/ui/intake-wizard/intake-wizard.stories.ts

@@ -9,7 +9,7 @@ import { Uren } from '@registratie/domain/value-objects/uren';
 const validData = { werktBuitenland: false, uren: 4160 as Uren, punten: 200 as Uren };
 
 const meta: Meta<IntakeWizardComponent> = {
-  title: 'Herregistratie/IntakeWizard',
+  title: 'Domein/Herregistratie/IntakeWizard',
   component: IntakeWizardComponent,
   // Injects BigProfileStore (optimistic flag) which creates httpResources.
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],

src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts

@@ -14,7 +14,7 @@ const base = {
 } satisfies Omit<Aanvraag, 'status'>;
 
 const meta: Meta<AanvraagBlockComponent> = {
-  title: 'Organisms/Aanvraag Block',
+  title: 'Domein/Registratie/Aanvraag Block',
   component: AanvraagBlockComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/registratie/ui/address-fields/address-fields.stories.ts

@@ -3,7 +3,7 @@ import { moduleMetadata } from '@storybook/angular';
 import { AddressFieldsComponent } from './address-fields.component';
 
 const meta: Meta<AddressFieldsComponent> = {
-  title: 'Organisms/Address Fields',
+  title: 'Domein/Registratie/Address Fields',
   component: AddressFieldsComponent,
   decorators: [moduleMetadata({ imports: [AddressFieldsComponent] })],
   render: (args) => ({

src/app/registratie/ui/change-request-form/change-request-form.stories.ts

@@ -12,7 +12,7 @@ const validData = {
 };
 
 const meta: Meta<ChangeRequestFormComponent> = {
-  title: 'Organisms/Change Request Form',
+  title: 'Domein/Registratie/Change Request Form',
   component: ChangeRequestFormComponent,
   // The form injects ApiClient (over HttpClient) for the submit command.
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],

src/app/registratie/ui/registratie-wizard/registratie-wizard.stories.ts

@@ -46,7 +46,7 @@ const validData: ValidRegistratie = {
 };
 
 const meta: Meta<RegistratieWizardComponent> = {
-  title: 'Registratie/RegistratieWizard',
+  title: 'Domein/Registratie/RegistratieWizard',
   component: RegistratieWizardComponent,
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],
 };

src/app/registratie/ui/registration-summary/registration-summary.stories.ts

@@ -11,7 +11,7 @@ const base = {
 } satisfies Omit<Registration, 'status'>;
 
 const meta: Meta<RegistrationSummaryComponent> = {
-  title: 'Organisms/Registration Summary',
+  title: 'Domein/Registratie/Registration Summary',
   component: RegistrationSummaryComponent,
 };
 export default meta;

src/app/registratie/ui/registration-table/registration-table.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { RegistrationTableComponent } from './registration-table.component';
 
 const meta: Meta<RegistrationTableComponent> = {
-  title: 'Organisms/Registration Table',
+  title: 'Domein/Registratie/Registration Table',
   component: RegistrationTableComponent,
 };
 export default meta;

src/app/shared/layout/breadcrumb/breadcrumb.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { BreadcrumbComponent } from './breadcrumb.component';
 
 const meta: Meta<BreadcrumbComponent> = {
-  title: 'Layout/Breadcrumb',
+  title: 'Design System/Molecules/Breadcrumb',
   component: BreadcrumbComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/layout/page-shell/page-shell.stories.ts

@@ -5,7 +5,7 @@ import { PageShellComponent } from './page-shell.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 
 const meta: Meta<PageShellComponent> = {
-  title: 'Templates/PageShell',
+  title: 'Design System/Templates/PageShell',
   component: PageShellComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/layout/site-footer/site-footer.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SiteFooterComponent } from './site-footer.component';
 
 const meta: Meta<SiteFooterComponent> = {
-  title: 'Layout/Site Footer',
+  title: 'Design System/Organisms/Site Footer',
   component: SiteFooterComponent,
   render: () => ({ template: `<app-site-footer />` }),
 };

src/app/shared/layout/site-header/site-header.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { SiteHeaderComponent } from './site-header.component';
 
 const meta: Meta<SiteHeaderComponent> = {
-  title: 'Layout/Site Header',
+  title: 'Design System/Organisms/Site Header',
   component: SiteHeaderComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/layout/wizard-shell/wizard-shell.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { WizardShellComponent } from './wizard-shell.component';
 
 const meta: Meta<WizardShellComponent> = {
-  title: 'Templates/WizardShell',
+  title: 'Design System/Templates/WizardShell',
   component: WizardShellComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/alert/alert.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { AlertComponent } from './alert.component';
 
 const meta: Meta<AlertComponent> = {
-  title: 'Atoms/Alert',
+  title: 'Design System/Atoms/Alert',
   component: AlertComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/application-link/application-link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { ApplicationLinkComponent } from './application-link.component';
 
 const meta: Meta<ApplicationLinkComponent> = {
-  title: 'Molecules/Application Link',
+  title: 'Design System/Molecules/Application Link',
   component: ApplicationLinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/application-list/application-list.stories.ts

@@ -5,7 +5,7 @@ import { ApplicationListComponent } from './application-list.component';
 import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
 
 const meta: Meta<ApplicationListComponent> = {
-  title: 'Molecules/Application List',
+  title: 'Design System/Molecules/Application List',
   component: ApplicationListComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/ui/async/async.stories.ts

@@ -17,7 +17,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
 }
 
 const meta: Meta = {
-  title: 'Molecules/Async States',
+  title: 'Design System/Molecules/Async States',
   decorators: [moduleMetadata({ imports: [...ASYNC, SkeletonComponent] })],
   render: (args) => ({
     // isEmpty is a function — Storybook strips function args, so set it here.

src/app/shared/ui/button/button.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { ButtonComponent } from './button.component';
 
 const meta: Meta<ButtonComponent> = {
-  title: 'Atoms/Button',
+  title: 'Design System/Atoms/Button',
   component: ButtonComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/card/card.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { CardComponent } from './card.component';
 
 const meta: Meta<CardComponent> = {
-  title: 'Molecules/Card',
+  title: 'Design System/Molecules/Card',
   component: CardComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/checkbox/checkbox.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { CheckboxComponent } from './checkbox.component';
 
 const meta: Meta<CheckboxComponent> = {
-  title: 'Atoms/Checkbox',
+  title: 'Design System/Atoms/Checkbox',
   component: CheckboxComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/choice-link/choice-link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { ChoiceLinkComponent } from './choice-link.component';
 
 const meta: Meta<ChoiceLinkComponent> = {
-  title: 'Molecules/Choice Link',
+  title: 'Design System/Molecules/Choice Link',
   component: ChoiceLinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/choice-list/choice-list.stories.ts

@@ -5,7 +5,7 @@ import { ChoiceListComponent } from './choice-list.component';
 import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
 
 const meta: Meta<ChoiceListComponent> = {
-  title: 'Molecules/Choice List',
+  title: 'Design System/Molecules/Choice List',
   component: ChoiceListComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/ui/confirmation/confirmation.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { ConfirmationComponent } from './confirmation.component';
 
 const meta: Meta<ConfirmationComponent> = {
-  title: 'Molecules/Confirmation',
+  title: 'Design System/Molecules/Confirmation',
   component: ConfirmationComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/data-block/data-block.stories.ts

@@ -4,7 +4,7 @@ import { DataBlockComponent } from './data-block.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 
 const meta: Meta<DataBlockComponent> = {
-  title: 'Molecules/Data Block',
+  title: 'Design System/Molecules/Data Block',
   component: DataBlockComponent,
   decorators: [moduleMetadata({ imports: [DataRowComponent] })],
   render: (args) => ({

src/app/shared/ui/data-row/data-row.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { DataRowComponent } from './data-row.component';
 
 const meta: Meta<DataRowComponent> = {
-  title: 'Molecules/Data Row',
+  title: 'Design System/Molecules/Data Row',
   component: DataRowComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/debug-state/debug-state.stories.ts

@@ -3,7 +3,7 @@ import { DebugStateComponent } from './debug-state.component';
 
 // Devtools, not a design-system atom — titled accordingly.
 const meta: Meta<DebugStateComponent> = {
-  title: 'Devtools/State debug',
+  title: 'Design System/Devtools/State debug',
   component: DebugStateComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/form-field/form-field.stories.ts

@@ -4,7 +4,7 @@ import { FormFieldComponent } from './form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
 
 const meta: Meta<FormFieldComponent> = {
-  title: 'Molecules/Form Field',
+  title: 'Design System/Molecules/Form Field',
   component: FormFieldComponent,
   decorators: [moduleMetadata({ imports: [TextInputComponent] })],
   render: (args) => ({

src/app/shared/ui/heading/heading.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { HeadingComponent } from './heading.component';
 
 const meta: Meta<HeadingComponent> = {
-  title: 'Atoms/Heading',
+  title: 'Design System/Atoms/Heading',
   component: HeadingComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/link/link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { LinkComponent } from './link.component';
 
 const meta: Meta<LinkComponent> = {
-  title: 'Atoms/Link',
+  title: 'Design System/Atoms/Link',
   component: LinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/placeholder-chip/placeholder-chip.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { PlaceholderChipComponent } from './placeholder-chip.component';
 
 const meta: Meta<PlaceholderChipComponent> = {
-  title: 'Atoms/Placeholder Chip',
+  title: 'Design System/Atoms/Placeholder Chip',
   component: PlaceholderChipComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/radio-group/radio-group.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { RadioGroupComponent } from './radio-group.component';
 
 const meta: Meta<RadioGroupComponent> = {
-  title: 'Atoms/RadioGroup',
+  title: 'Design System/Atoms/RadioGroup',
   component: RadioGroupComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/review-section/review-section.stories.ts

@@ -4,7 +4,7 @@ import { ReviewSectionComponent } from './review-section.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 
 const meta: Meta<ReviewSectionComponent> = {
-  title: 'Molecules/Review Section',
+  title: 'Design System/Molecules/Review Section',
   component: ReviewSectionComponent,
   decorators: [moduleMetadata({ imports: [DataRowComponent] })],
   render: (args) => ({

src/app/shared/ui/rich-text-editor/rich-text-editor.stories.ts

@@ -28,7 +28,7 @@ const placeholders = [
 ];
 
 const meta: Meta<RichTextEditorComponent> = {
-  title: 'Molecules/Rich Text Editor',
+  title: 'Design System/Molecules/Rich Text Editor',
   component: RichTextEditorComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/skeleton/skeleton.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SkeletonComponent } from './skeleton.component';
 
 const meta: Meta<SkeletonComponent> = {
-  title: 'Atoms/Skeleton',
+  title: 'Design System/Atoms/Skeleton',
   component: SkeletonComponent,
   args: { delay: 0 },
   parameters: {

src/app/shared/ui/spinner/spinner.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SpinnerComponent } from './spinner.component';
 
 const meta: Meta<SpinnerComponent> = {
-  title: 'Atoms/Spinner',
+  title: 'Design System/Atoms/Spinner',
   component: SpinnerComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/status-badge/status-badge.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { StatusBadgeComponent } from './status-badge.component';
 
 const meta: Meta<StatusBadgeComponent> = {
-  title: 'Shared UI/Status Badge',
+  title: 'Design System/Atoms/Status Badge',
   component: StatusBadgeComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/stepper/stepper.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { StepperComponent } from './stepper.component';
 
 const meta: Meta<StepperComponent> = {
-  title: 'Molecules/Stepper',
+  title: 'Design System/Molecules/Stepper',
   component: StepperComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/task-list/task-list.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { TaskListComponent } from './task-list.component';
 
 const meta: Meta<TaskListComponent> = {
-  title: 'Molecules/Task List',
+  title: 'Design System/Molecules/Task List',
   component: TaskListComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/text-input/text-input.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { TextInputComponent } from './text-input.component';
 
 const meta: Meta<TextInputComponent> = {
-  title: 'Atoms/Text Input',
+  title: 'Design System/Atoms/Text Input',
   component: TextInputComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { DeliveryChannelToggleComponent } from './delivery-channel-toggle.component';
 
 const meta: Meta<DeliveryChannelToggleComponent> = {
-  title: 'Atoms/DeliveryChannelToggle',
+  title: 'Design System/Atoms/DeliveryChannelToggle',
   component: DeliveryChannelToggleComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/document-category/document-category.stories.ts

@@ -3,7 +3,7 @@ import type { DocumentCategory, Upload } from '@shared/upload/upload.machine';
 import { DocumentCategoryComponent } from './document-category.component';
 
 const meta: Meta<DocumentCategoryComponent> = {
-  title: 'Organisms/DocumentCategory',
+  title: 'Design System/Organisms/DocumentCategory',
   component: DocumentCategoryComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/document-chip/document-chip.stories.ts

@@ -3,7 +3,7 @@ import type { UploadStatus } from '@shared/upload/upload.machine';
 import { DocumentChipComponent } from './document-chip.component';
 
 const meta: Meta<DocumentChipComponent> = {
-  title: 'Atoms/DocumentChip',
+  title: 'Design System/Atoms/DocumentChip',
   component: DocumentChipComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/document-upload/document-upload.stories.ts

@@ -3,7 +3,7 @@ import type { UploadState } from '@shared/upload/upload.machine';
 import { DocumentUploadComponent } from './document-upload.component';
 
 const meta: Meta<DocumentUploadComponent> = {
-  title: 'Organisms/DocumentUpload',
+  title: 'Design System/Organisms/DocumentUpload',
   component: DocumentUploadComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/file-input/file-input.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { FileInputComponent } from './file-input.component';
 
 const meta: Meta<FileInputComponent> = {
-  title: 'Atoms/FileInput',
+  title: 'Design System/Atoms/FileInput',
   component: FileInputComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/single-upload/single-upload.stories.ts

@@ -3,7 +3,7 @@ import type { Upload } from '@shared/upload/upload.machine';
 import { SingleUploadComponent } from './single-upload.component';
 
 const meta: Meta<SingleUploadComponent> = {
-  title: 'Molecules/SingleUpload',
+  title: 'Design System/Molecules/SingleUpload',
   component: SingleUploadComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/upload-progress-bar/upload-progress-bar.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { UploadProgressBarComponent } from './upload-progress-bar.component';
 
 const meta: Meta<UploadProgressBarComponent> = {
-  title: 'Atoms/UploadProgressBar',
+  title: 'Design System/Atoms/UploadProgressBar',
   component: UploadProgressBarComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/upload-status-icon/upload-status-icon.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { UploadStatusIconComponent } from './upload-status-icon.component';
 
 const meta: Meta<UploadStatusIconComponent> = {
-  title: 'Atoms/UploadStatusIcon',
+  title: 'Design System/Atoms/UploadStatusIcon',
   component: UploadStatusIconComponent,
   render: (args) => ({
     props: args,

src/docs/atomic-design.mdx

@@ -81,8 +81,8 @@ composes atoms; it adds no new visual primitives of its own.
 
 ### Organism — `document-upload`
 
-`shared/ui/upload/document-upload` composes molecules (a file input, status banner,
+`shared/ui/upload/document-upload` composes molecules (a file input, alert, progress bar,
-progress bar, chips) into a section that owns real upload behaviour.
+chips) into a section that owns real upload behaviour.
 
 <Canvas of={DocumentUploadStories.Default} />
 

src/docs/layers.mdx

@@ -0,0 +1,83 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundations/Layers & Contexts" />
+
+# Layers & contexts
+
+This sidebar is laid out to **be** the architecture, not just document it: **Foundations**
+(this curriculum) → **Design System** (reusable, domain-free) → **Domein** (the six DDD
+contexts). If a component lives under a context's `ui/`, it's in Domein; everything else
+in `shared/ui`/`shared/layout` is Design System. See [Atomic design](?path=/docs/foundations-atomic-design--docs)
+for the Atoms → Molecules → Organisms → Templates ladder inside Design System.
+
+## Six contexts, one direction
+
+```
+src/app/<context>/<layer>/
+```
+
+Contexts: `shared` (the base layer — depends on nothing), `auth`, `registratie`,
+`herregistratie`, `brief` (letter-composition teaching slice), `showcase` (teaching page,
+sanctioned to read every context — nothing imports it).
+
+**Dependencies only point inward and in one declared direction between contexts:**
+
+```
+herregistratie → registratie → shared
+auth           → shared
+brief          → shared
+```
+
+Never the other way — `registratie` may not import `herregistratie`, and no context but
+`shared` is imported by everyone.
+
+## Five layers, one direction
+
+| Layer | Job | Angular allowed? |
+| --- | --- | --- |
+| `domain/` | business rules + data types | **No — pure TS.** |
+| `application/` | coordinate state/tasks (stores, commands) | yes (signals) |
+| `infrastructure/` | where data comes from (HTTP adapters) | yes (HTTP) |
+| `contracts/` | wire DTOs (the FE⇄BE seam) | no |
+| `ui/` | how it looks (components, pages) | yes |
+
+`ui → application → domain`; `ui`/`layout` never import `infrastructure/` directly — they
+reach data through an application store or command.
+
+## This is enforced, not just written down
+
+`eslint.config.mjs` fails the build on every rule above:
+
+- `domain/` importing `@angular/*` at all (any context).
+- `shared/` importing a feature context (`@auth/*`, `@registratie/*`, `@herregistratie/*`,
+  `@brief/*`) — the base layer depends on nothing.
+- `registratie/` importing `@herregistratie/*`/`@brief/*`, `auth/`/`brief/` importing a
+  sibling context — the cross-context direction above.
+- `contracts/**` importing **anything** — not Angular, not an alias, not even a relative
+  path (ADR-0001's wire seam has to stay a pure DTO shape).
+- `ui/**`/`layout/**` importing `*/infrastructure/*` — the anti-corruption boundary
+  (ADR-0001) stays behind a store/command, so a page can never bypass it and hand-recompute
+  a business rule the backend already decided.
+- The generated `ApiClient` imported as a value outside an `infrastructure/` adapter
+  (type-only DTO imports are exempt — they grant no network access).
+
+Two components get a documented exemption from the "nothing reaches across" rule:
+`shared/ui/debug-state` (reads every root store, for the dev-only state panel) and
+`showcase/` (reads every context, for side-by-side teaching pages). Both exemptions live
+next to the rule they break, in `eslint.config.mjs`, so they can't rot silently.
+
+## The English/Dutch seam
+
+Shared/reusable UI is named in **English** (language-agnostic: `button`, `wizard-shell`);
+domain contexts are named in **Dutch** (`registratie`, `herregistratie`, `*.machine.ts`).
+Pick the language by which side of the seam the code is on — it's the same seam this
+sidebar's Design System/Domein split makes visible.
+
+## See it in the sidebar
+
+Compare a Design System primitive with the same shape reused across contexts:
+
+- [Design System → Molecules → Application Link](?path=/story/design-system-molecules-application-link--navigatie) —
+  domain-free, the caller supplies heading/subtitle/cta.
+- [Domein → Registratie → Aanvraag Block](?path=/story/domein-registratie-aanvraag-block--concept) —
+  a context-specific organism composed from Design System atoms/molecules.