diff --git a/CHANGELOG.md b/CHANGELOG.md
index c97ba20b..ff90bc4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -88,6 +88,14 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Under the hood
 
+- **Start a system from Cities Without Number or Shadowrun.** In the builder's + NEW, A BUILT-IN
+  EXAMPLE now works: a card for each says what it holds (its health, how characters advance, its
+  stats and formulas), and COPY makes it a new system of your own under the name you type, opened
+  on SETUP, with no link back. LOOK FIRST opens the example in the builder to read: every page is
+  there with its boxes and buttons locked, tabs and settings still open, SAVE and PUBLISH off, and
+  TRY IT works as on your own systems. COPY TO CHANGE IT makes the copy from there. The built-in
+  games themselves don't change.
+
 - **Cities Without Number and Shadowrun as examples to copy.** Both are now whole systems in the
   builder's format, ready to publish as they stand: their stats, the names players see, a sample
   character, and their setup answers (one pool in meters for CWN; physical and stun with overflow,
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 023ce010..d68a1768 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -650,6 +650,13 @@ header {
   --rail-top-padding: clamp(6px,   1.5vh, 15px);
 }
 
+/* A built-in example's page in the builder (4d1b): its controls are locked, so they look it.
+   A filter rather than colors, since the pages color their controls inline from the theme. */
+.builder-locked :is(input, select, textarea, button):disabled {
+  cursor: not-allowed;
+  filter: saturate(0.4) brightness(0.75);
+}
+
 .icon-rail {
   width: var(--rail-width);
   height: 100%;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c0716601..2a255702 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -305,9 +305,9 @@ function App() {
   const [npcLibraryPos, setNpcLibraryPos] = useState(() => ({ x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 200 }));
   /**
    * The builder, taking over the window while open (4a2b): the system open in it (none until the
-   * GM picks one in MY SYSTEMS) and the page it opened at.
+   * GM picks one in MY SYSTEMS) and the page it opened at, or a built-in example looked at (4d1b).
    */
-  const [builder, setBuilder] = useState<{ id: string | null; page: BuilderPage | 'systems' } | null>(null);
+  const [builder, setBuilder] = useState<{ id: string | null; page: BuilderPage | 'systems'; example?: string } | null>(null);
   const [openNpcSheet, setOpenNpcSheet] = useState<{ id: number; npc_label: string; token_shape?: string; locationId?: number } | null>(null);
   // A friendly NPC the GM gave this player, its sheet open read-only (4b5b4).
   const [controlledNpc, setControlledNpc] = useState<{ locationId: number; name: string } | null>(null);
@@ -2340,13 +2340,15 @@ function App() {
             )}
             {builder && token && isPrimaryAdmin && (
               <BuilderScreen
-                key={builder.id ?? 'none'}
+                key={builder.id ?? (builder.example ? `example:${builder.example}` : 'none')}
                 token={token}
                 systemId={builder.id}
                 startPage={builder.page}
+                example={builder.example ?? null}
                 running={gameSystem}
                 onExit={() => setBuilder(null)}
                 onOpenSystem={(id, page) => setBuilder({ id, page })}
+                onLookAt={(example) => setBuilder({ id: null, page: 'rules', example })}
               />
             )}
             {openPlayerSheetUser && token && (
diff --git a/frontend/src/components/BuilderScreen.tsx b/frontend/src/components/BuilderScreen.tsx
index 96ef254e..ba6d4665 100644
--- a/frontend/src/components/BuilderScreen.tsx
+++ b/frontend/src/components/BuilderScreen.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { systemsApi, type Definition, type SystemCopies } from '../sheets/systemsApi';
+import { lockControls, suggestedName, LOCKED_MESSAGE } from '../sheets/examples';
 import {
   createAutosave, saveStatus, exitWarning, leaveNeedsAsking, publishBlocked, publishedMessage,
   BUILDER_PAGES, type Autosave, type BuilderPage,
@@ -36,9 +37,34 @@ interface Props {
   onExit: () => void;
   /** Another system, opened here in its place at a page (MY SYSTEMS), once the open one is saved. */
   onOpenSystem: (id: string, page: BuilderPage) => void;
+  /**
+   * A built-in example open to look at (4d1b) instead of a system: every page shown, everything
+   * locked but TRY IT, nothing saved, and COPY TO CHANGE IT to make it the GM's own.
+   */
+  example?: string | null;
+  /** Look at a built-in example here, from + NEW's LOOK FIRST. */
+  onLookAt?: (exampleId: string) => void;
   fetcher?: typeof fetch;
 }
 
+/**
+ * A page of an example, locked: every control greyed but those that only move around it (tabs,
+ * things opening out), so it can be read but not changed (sheets/examples.ts lockControls).
+ */
+function Locked({ on, children }: { on: boolean; children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const root = ref.current;
+    if (!on || !root) return undefined;
+    lockControls(root);
+    // Pages draw more as they load and open out, so whatever appears is locked too.
+    const watch = new MutationObserver(() => lockControls(root));
+    watch.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ['disabled'] });
+    return () => watch.disconnect();
+  }, [on]);
+  return <div ref={ref} className={on ? 'builder-locked' : undefined} data-testid={on ? 'locked-page' : undefined}>{children}</div>;
+}
+
 /**
  * MY SYSTEMS is the builder's own page for every system: picking, making, copying, sharing and
  * installing them without leaving (MySystemsPage; approved mockup builder-my-systems, 2026-10-06,
@@ -132,12 +158,14 @@ function RailButton({ icon: glyph, label, onClick, title, active, disabled, coun
   );
 }
 
-export function BuilderScreen({ token, systemId, startPage = 'setup', running, onExit, onOpenSystem, fetcher }: Props) {
+export function BuilderScreen({ token, systemId, startPage = 'setup', running, onExit, onOpenSystem, example = null, onLookAt, fetcher }: Props) {
   const api = useMemo(() => systemsApi(token, fetcher), [token, fetcher]);
   const [system, setSystem] = useState<SystemCopies | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const looking = !systemId && !!example;
   // With no system open, MY SYSTEMS is the only page there is.
-  const [page, setPage] = useState<Page>(systemId ? startPage : 'systems');
+  const [page, setPage] = useState<Page>(systemId || looking ? startPage : 'systems');
+  const [copy, setCopy] = useState<{ name: string; error: string | null; busy: boolean }>({ name: '', error: null, busy: false });
   const [status, setStatus] = useState<{ text: string; bad?: boolean } | null>(null);
   const [exitError, setExitError] = useState<{ error: string; then: () => void } | null>(null);
   const [busy, setBusy] = useState(false);
@@ -172,12 +200,37 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
     return () => { live = false; autosave.current?.dispose(); };
   }, [api, load, systemId]);
 
+  // An example to look at: its definition, with nothing to save it to.
+  useEffect(() => {
+    if (!looking || !example) return undefined;
+    let live = true;
+    api.example(example).then((r) => {
+      if (!live) return;
+      if (r.ok) setDefinition(r.value.definition); else setLoadError(r.error);
+    });
+    return () => { live = false; };
+  }, [api, looking, example]);
+
   /** A page changed the system: shown at once, saved once editing pauses (builderSession). */
   const edit = (next: Definition) => {
+    // Nothing on a locked page can call this, but an example never changes whatever does.
+    if (looking) { setStatus({ text: LOCKED_MESSAGE, bad: true }); return; }
     setDefinition(next);
     autosave.current?.edit(next);
   };
 
+  /** COPY TO CHANGE IT: the example as a new system of the GM's own, opened on SETUP. */
+  const copyExample = async () => {
+    const wanted = copy.name.trim();
+    if (!example || copy.busy) return;
+    if (!wanted) { setCopy({ ...copy, error: 'Give the copy a name.' }); return; }
+    setCopy({ ...copy, busy: true, error: null });
+    const r = await api.createFromExample(wanted, example);
+    if (!r.ok) { setCopy({ ...copy, busy: false, error: r.error }); return; }
+    window.dispatchEvent(new Event(SYSTEMS_CHANGED_EVENT));
+    onOpenSystem(r.value.id, 'setup');
+  };
+
   // Closing or reloading the tab asks first while anything is unsaved.
   useEffect(() => {
     const ask = (e: BeforeUnloadEvent) => {
@@ -227,6 +280,8 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
 
   const current = page === 'systems' ? MY_SYSTEMS : BUILDER_PAGES.find((p) => p.id === page)!;
   const saveLine = state ? saveStatus(state) : null;
+  /** Whether the pages have something to show: an open system's draft, or an example. */
+  const ready = !!definition && (looking || !!system);
 
   return (
     <div
@@ -251,7 +306,7 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
         }}
       >
         <div className="rail-top" style={{ alignItems: 'stretch' }}>
-          <RailButton icon={Icons.builder} label="SYSTEM_BUILDER" big onClick={() => setPage(systemId ? 'setup' : 'systems')} />
+          <RailButton icon={Icons.builder} label="SYSTEM_BUILDER" big onClick={() => setPage(systemId || looking ? 'setup' : 'systems')} />
         </div>
         <div style={{ padding: '10px 0' }}>
           <RailButton icon={<ExitIcon />} label="EXIT TO MAP" aria="Exit the builder and go back to the map" onClick={() => leave(onExit)} />
@@ -264,8 +319,8 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
               key={p.id}
               icon={Icons[p.id]}
               label={p.label}
-              title={systemId ? p.what : 'Open a system first, in MY SYSTEMS.'}
-              disabled={!systemId}
+              title={systemId || looking ? p.what : 'Open a system first, in MY SYSTEMS.'}
+              disabled={!systemId && !looking}
               active={p.id === page}
               count={p.id === 'problems' && problems.length > 0 ? problems.length : undefined}
               onClick={() => { setPage(p.id); setStatus(null); }}
@@ -287,7 +342,8 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
           minWidth: 0,
         }}>
           <span data-testid="builder-system" style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-            <b style={{ color: 'var(--green)', letterSpacing: 1 }}>{systemId ? (name.toUpperCase() || '…') : 'NO SYSTEM OPEN'}</b>
+            <b style={{ color: 'var(--green)', letterSpacing: 1 }}>{systemId || looking ? (name.toUpperCase() || '…') : 'NO SYSTEM OPEN'}</b>
+            {looking && <span style={badge('var(--cyan)', 'var(--cyan)')}>EXAMPLE · READ ONLY</span>}
             {system && (system.published
               ? <span style={badge('color-mix(in srgb, var(--green) 50%, transparent)')}>PUBLISHED v{system.version}</span>
               : <span style={badge('var(--warning)', 'var(--warning)')}>NEVER PUBLISHED</span>)}
@@ -302,7 +358,7 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
 
         <section aria-label={current.label} className="cyber-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: 24, fontSize: 13, lineHeight: 1.5 }}>
           {loadError && <p role="alert" style={{ color: 'var(--danger)' }}>{loadError}</p>}
-          {systemId && !system && !loadError && <p style={{ opacity: 0.7 }}>LOADING…</p>}
+          {(systemId ? !system : looking && !definition) && !loadError && <p style={{ opacity: 0.7 }}>LOADING…</p>}
           {page === 'systems' && (systemId === null || system) && (
             <MySystemsPage
               api={api}
@@ -310,24 +366,56 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
               running={running}
               onOpen={(id, at) => leave(() => onOpenSystem(id, at))}
               say={(text, bad) => setStatus({ text, bad })}
+              onLook={onLookAt ? (id) => leave(() => onLookAt(id)) : undefined}
+              startTab={looking ? 'new' : undefined}
             />
           )}
-          {system && page === 'problems' && (problems.length === 0
-            ? <p style={{ color: 'var(--green)' }}>No problems. It can be published.</p>
-            : (
-              <ul style={{ margin: 0, paddingLeft: '1.2em', color: 'var(--warning)', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                {problems.map((p, i) => <li key={i}><b>{p.where}</b>: {p.message}</li>)}
-              </ul>
-            ))}
-          {systemId && system && definition && page === 'setup' && (
-            <SetupPage api={api} systemId={systemId} definition={definition} edit={edit} say={(text, bad) => setStatus({ text, bad })} />
+          {looking && ready && page !== 'systems' && (
+            <div role="region" aria-label="Example" style={{ border: '1px solid var(--cyan)', padding: '10px 12px', marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 900 }}>
+              <span style={{ color: 'var(--cyan)', fontSize: 10, letterSpacing: 2 }}>A BUILT-IN EXAMPLE</span>
+              <span style={{ fontSize: 12, lineHeight: 1.45 }}>
+                Look around and try it. Nothing here can be changed. To make it your own, copy it under a name of yours: the copy opens on SETUP.
+              </span>
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
+                <input
+                  type="text" aria-label="Name for the copy" maxLength={80} autoComplete="off" value={copy.name}
+                  placeholder={suggestedName(definition!.name)}
+                  aria-invalid={copy.error ? true : undefined}
+                  onChange={(e) => setCopy({ ...copy, name: e.target.value, error: null })}
+                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); copyExample(); } }}
+                  style={{
+                    ...mono, flex: 1, minWidth: 0, maxWidth: 320, background: 'var(--black)', color: 'var(--green)', fontSize: 12, padding: '5px 7px',
+                    border: `1px solid ${copy.error ? 'var(--danger)' : 'var(--green)'}`,
+                  }}
+                />
+                <button type="button" className="utility-btn active" style={{ ...mono, fontSize: 11, letterSpacing: 1, padding: '5px 9px' }} disabled={copy.busy} onClick={copyExample}>
+                  COPY TO CHANGE IT
+                </button>
+                <button type="button" className="utility-btn" style={{ ...mono, fontSize: 11, letterSpacing: 1, padding: '5px 9px' }} onClick={() => { setPage('systems'); setStatus(null); }}>
+                  BACK TO + NEW
+                </button>
+              </div>
+              {copy.error && <span role="alert" style={{ color: 'var(--danger)', fontSize: 12 }}>{copy.error}</span>}
+            </div>
           )}
-          {system && definition && page === 'words' && <WordsPage definition={definition} edit={edit} />}
-          {system && definition && page === 'features' && <FeaturesPage definition={definition} edit={edit} api={api} />}
-          {system && definition && page === 'rules' && <StatsRulesPage definition={definition} edit={edit} api={api} />}
-          {system && definition && page === 'sheet' && <SheetPage definition={definition} edit={edit} api={api} />}
-          {system && definition && page === 'npcs' && <NpcsPage definition={definition} edit={edit} api={api} />}
-          {system && definition && page === 'try' && <TryItPage definition={definition} edit={edit} api={api} />}
+          <Locked key={page} on={looking && page !== 'try'}>
+            {ready && page === 'problems' && (problems.length === 0
+              ? <p style={{ color: 'var(--green)' }}>No problems. It can be published.</p>
+              : (
+                <ul style={{ margin: 0, paddingLeft: '1.2em', color: 'var(--warning)', display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {problems.map((p, i) => <li key={i}><b>{p.where}</b>: {p.message}</li>)}
+                </ul>
+              ))}
+            {ready && page === 'setup' && (
+              <SetupPage api={api} systemId={systemId ?? ''} definition={definition!} edit={edit} say={(text, bad) => setStatus({ text, bad })} />
+            )}
+            {ready && page === 'words' && <WordsPage definition={definition!} edit={edit} />}
+            {ready && page === 'features' && <FeaturesPage definition={definition!} edit={edit} api={api} />}
+            {ready && page === 'rules' && <StatsRulesPage definition={definition!} edit={edit} api={api} />}
+            {ready && page === 'sheet' && <SheetPage definition={definition!} edit={edit} api={api} />}
+            {ready && page === 'npcs' && <NpcsPage definition={definition!} edit={edit} api={api} />}
+            {ready && page === 'try' && <TryItPage definition={definition!} edit={looking ? undefined : edit} api={api} />}
+          </Locked>
         </section>
 
         <footer style={{
diff --git a/frontend/src/components/MySystemsPage.tsx b/frontend/src/components/MySystemsPage.tsx
index a271603f..af052a9b 100644
--- a/frontend/src/components/MySystemsPage.tsx
+++ b/frontend/src/components/MySystemsPage.tsx
@@ -26,6 +26,10 @@ interface Props {
   onOpen: (id: string, page: BuilderPage) => void;
   /** A line for the builder's status bar. */
   say: (text: string, bad?: boolean) => void;
+  /** Open a built-in example in the builder to look at first (4d1b). */
+  onLook?: (exampleId: string) => void;
+  /** The tab it opens on: + NEW when coming back from looking at an example. */
+  startTab?: Tab;
 }
 
 const tabStyle = (on: boolean): React.CSSProperties => ({
@@ -34,8 +38,8 @@ const tabStyle = (on: boolean): React.CSSProperties => ({
   color: on ? 'var(--green)' : 'color-mix(in srgb, var(--green) 55%, transparent)', fontFamily: 'monospace', fontSize: 11, letterSpacing: 1,
 });
 
-export function MySystemsPage({ api, openId, running, onOpen, say }: Props) {
-  const [tab, setTab] = useState<Tab>('list');
+export function MySystemsPage({ api, openId, running, onOpen, say, onLook, startTab = 'list' }: Props) {
+  const [tab, setTab] = useState<Tab>(startTab);
   const [systems, setSystems] = useState<LibrarySystem[] | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [picked, setPicked] = useState<string | null>(openId);
@@ -237,7 +241,7 @@ export function MySystemsPage({ api, openId, running, onOpen, say }: Props) {
         )}
       </>}
 
-      {tab === 'new' && <NewPanel api={api} onMade={(id) => { window.dispatchEvent(new Event(SYSTEMS_CHANGED_EVENT)); onOpen(id, 'setup'); }} />}
+      {tab === 'new' && <NewPanel api={api} onLook={onLook} onMade={(id) => { window.dispatchEvent(new Event(SYSTEMS_CHANGED_EVENT)); onOpen(id, 'setup'); }} />}
 
       {tab === 'install' && <>
         {installed && (
diff --git a/frontend/src/components/SheetPage.tsx b/frontend/src/components/SheetPage.tsx
index 1ed06c98..f12b765d 100644
--- a/frontend/src/components/SheetPage.tsx
+++ b/frontend/src/components/SheetPage.tsx
@@ -179,7 +179,7 @@ export function SheetPage({ definition, edit, api, forNpcs = false }: Props) {
             </>
           ) : (
             <div style={{ ...node(pickedTab === tab, 0), color: 'var(--green)', fontWeight: 'bold', letterSpacing: 1 }}>
-              {own ? <button type="button" style={nodeName} aria-label={`${tab} tab`} aria-current={pickedTab === tab || undefined} onClick={() => choose({ kind: 'tab', id: tab })}>{tab}</button>
+              {own ? <button type="button" style={nodeName} aria-label={`${tab} tab`} data-browse aria-current={pickedTab === tab || undefined} onClick={() => choose({ kind: 'tab', id: tab })}>{tab}</button>
                 : <span style={{ ...nodeName, cursor: 'default' }}>{tab}</span>}
               {own && (
                 <>
@@ -192,7 +192,7 @@ export function SheetPage({ definition, edit, api, forNpcs = false }: Props) {
           {sectionsOn(sheet, tab).map((s, si, list) => (
             <React.Fragment key={s.id}>
               <div style={node(pickedSection?.id === s.id, 1)}>
-                {own ? <button type="button" style={nodeName} aria-label={`${s.label} section`} aria-current={pickedSection?.id === s.id || undefined} onClick={() => choose({ kind: 'section', id: s.id })}>{s.label}</button>
+                {own ? <button type="button" style={nodeName} aria-label={`${s.label} section`} data-browse aria-current={pickedSection?.id === s.id || undefined} onClick={() => choose({ kind: 'section', id: s.id })}>{s.label}</button>
                   : <span style={{ ...nodeName, cursor: 'default' }}>{s.label}</span>}
                 <span style={kindTag}>{LAYOUTS.find((l) => l.id === s.layout)?.label ?? s.layout.toUpperCase()}</span>
                 {own && (
@@ -204,7 +204,7 @@ export function SheetPage({ definition, edit, api, forNpcs = false }: Props) {
               </div>
               {s.fields.map((f, fi) => (
                 <div key={f.id} style={{ ...node(pickedField?.id === f.id, 2), opacity: 0.9 }}>
-                  {own ? <button type="button" style={nodeName} aria-label={`${f.label} field`} aria-current={pickedField?.id === f.id || undefined} onClick={() => choose({ kind: 'field', id: f.id })}>{f.label}</button>
+                  {own ? <button type="button" style={nodeName} aria-label={`${f.label} field`} data-browse aria-current={pickedField?.id === f.id || undefined} onClick={() => choose({ kind: 'field', id: f.id })}>{f.label}</button>
                     : <span style={{ ...nodeName, cursor: 'default' }}>{f.label}</span>}
                   <span style={kindTag}>{fieldTag(f)}</span>
                   {own && (
diff --git a/frontend/src/components/SheetPreview.tsx b/frontend/src/components/SheetPreview.tsx
index e1c6a49f..8de5d1d4 100644
--- a/frontend/src/components/SheetPreview.tsx
+++ b/frontend/src/components/SheetPreview.tsx
@@ -54,7 +54,7 @@ export function SheetPreview({ definition, sheet, values, gmOnly = false }: Prop
           <span style={small}>SEEN BY</span>
           <span role="group" aria-label="Seen by" style={{ display: 'inline-flex', border: '1px solid var(--green)' }}>
             {([['owner', 'ITS OWNER'], ['gm', 'THE GM'], ['others', 'EVERYONE ELSE']] as const).map(([id, label]) => (
-              <button key={id} type="button" style={segBtn(view === id)} aria-pressed={view === id} onClick={() => setView(id)}>{label}</button>
+              <button key={id} type="button" style={segBtn(view === id)} aria-pressed={view === id} data-browse onClick={() => setView(id)}>{label}</button>
             ))}
           </span>
         </div>
diff --git a/frontend/src/components/SystemsPanels.tsx b/frontend/src/components/SystemsPanels.tsx
index a5527246..4716c5c8 100644
--- a/frontend/src/components/SystemsPanels.tsx
+++ b/frontend/src/components/SystemsPanels.tsx
@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { systemsApi } from '../sheets/systemsApi';
+import { exampleFacts, suggestedName } from '../sheets/examples';
 import {
   insideBadges, installPlan, installedMessage, type Badge, type InstallPreview, type InstallAction,
 } from '../sheets/systemsLibrary';
@@ -41,27 +42,97 @@ export const field: React.CSSProperties = {
 };
 export const danger: React.CSSProperties = { borderColor: 'var(--danger)', color: 'var(--danger)' };
 
-/** NEW: a system from a name. Example and genre starts come later (4d1, 4d3). */
-export function NewPanel({ api, onMade }: { api: Api; onMade: (id: string, name: string) => void }) {
+type Start = 'blank' | 'example' | 'starter';
+
+/**
+ * The built-in examples to start from (4d1b): a card each saying what it holds, picked as a radio,
+ * with LOOK FIRST to open it in the builder read-only.
+ */
+function ExampleCards({ api, picked, onPick, onLook, onLoaded }: {
+  api: Api; picked: string | null; onPick: (id: string) => void; onLook?: (id: string) => void;
+  onLoaded: (names: Record<string, string>) => void;
+}) {
+  const [examples, setExamples] = useState<{ id: string; name: string; description: string; facts: [string, string][] }[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    (async () => {
+      const list = await api.examples();
+      if (!live) return;
+      if (!list.ok) { setError(list.error); return; }
+      const whole = await Promise.all(list.value.map((e) => api.example(e.id)));
+      if (!live) return;
+      const failed = whole.find((w) => !w.ok);
+      if (failed && !failed.ok) { setError(failed.error); return; }
+      const cards = list.value.map((e, i) => {
+        const w = whole[i];
+        return { ...e, facts: w.ok ? exampleFacts(w.value.definition) : [] };
+      });
+      setExamples(cards);
+      onLoaded(Object.fromEntries(cards.map((c) => [c.id, c.name])));
+    })();
+    return () => { live = false; };
+  }, [api]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (error) return <span role="alert" style={{ ...why, color: 'var(--danger)', marginLeft: 18 }}>Could not load the examples: {error}</span>;
+  if (!examples) return <span style={{ ...why, marginLeft: 18 }}>LOADING…</span>;
+  return (
+    <div role="radiogroup" aria-label="Example" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 8, marginLeft: 18 }}>
+      {examples.map((e) => {
+        const on = picked === e.id;
+        return (
+          <div key={e.id} data-testid={`example-${e.id}`} style={{
+            border: `1px solid ${on ? 'var(--green)' : 'var(--dark-green)'}`, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 6,
+            background: on ? 'color-mix(in srgb, var(--green) 8%, transparent)' : 'none', boxShadow: on ? 'inset 3px 0 0 var(--green)' : 'none',
+          }}>
+            <button type="button" role="radio" aria-checked={on} onClick={() => onPick(e.id)} style={{
+              background: 'none', border: 0, padding: 0, textAlign: 'left', cursor: 'pointer', color: 'var(--green)',
+              fontFamily: 'monospace', fontSize: 12, fontWeight: 700, letterSpacing: 1,
+            }}>{e.name.toUpperCase()}</button>
+            <span style={why}>{e.description}</span>
+            <dl style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: '2px 10px', margin: 0, fontSize: 10 }}>
+              {e.facts.map(([k, v]) => <React.Fragment key={k}><dt style={{ opacity: 0.6, letterSpacing: 1 }}>{k}</dt><dd style={{ margin: 0 }}>{v}</dd></React.Fragment>)}
+            </dl>
+            {onLook && (
+              <div><button type="button" className="utility-btn" style={btn} onClick={() => onLook(e.id)} aria-label={`Look at ${e.name} first`}>LOOK FIRST</button></div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * NEW: a system from a name, blank or copied from a built-in example (4d1b). Genre starters come
+ * with 4d3. `onLook` opens an example in the builder to look at first.
+ */
+export function NewPanel({ api, onMade, onLook }: { api: Api; onMade: (id: string, name: string) => void; onLook?: (id: string) => void }) {
   const [name, setName] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const [start, setStart] = useState<Start>('blank');
+  const [picked, setPicked] = useState<string | null>(null);
+  const [names, setNames] = useState<Record<string, string>>({});
   const inputRef = useRef<HTMLInputElement>(null);
+  const example = start === 'example' ? picked : null;
+  const exampleName = example ? names[example] ?? null : null;
 
   const create = async () => {
     const wanted = name.trim();
-    if (!wanted || busy) return;
+    if (!wanted || busy || (start === 'example' && !example)) return;
     setBusy(true);
-    const r = await api.create(wanted);
+    const r = example ? await api.createFromExample(wanted, example) : await api.create(wanted);
     setBusy(false);
     if (!r.ok) { setError(r.error); inputRef.current?.focus(); return; }
     setName('');
     onMade(r.value.id, wanted);
   };
 
-  const starts: [string, string, string, boolean][] = [
+  const starts: [Start, string, string, boolean][] = [
     ['blank', 'BLANK', 'A name and nothing else, to build up in the builder.', true],
-    ['example', 'A BUILT-IN EXAMPLE', 'Cities Without Number or Shadowrun as data, to change into your own. Coming later.', false],
+    ['example', 'A BUILT-IN EXAMPLE', 'Cities Without Number or Shadowrun, copied to change into your own.', true],
     ['starter', 'A GENRE STARTER', 'Fantasy, sci-fi, or a narrative one with no numbers. Coming later.', false],
   ];
 
@@ -73,7 +144,7 @@ export function NewPanel({ api, onMade }: { api: Api; onMade: (id: string, name:
         ref={inputRef}
         type="text"
         maxLength={80}
-        placeholder="Vault Knights"
+        placeholder={exampleName ? suggestedName(exampleName) : 'Vault Knights'}
         autoComplete="off"
         aria-invalid={error ? true : undefined}
         aria-describedby={error ? 'systems-new-error' : undefined}
@@ -86,25 +157,36 @@ export function NewPanel({ api, onMade }: { api: Api; onMade: (id: string, name:
       <span style={small}>START FROM</span>
       <div role="radiogroup" aria-label="Start from" style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
         {starts.map(([id, label, what, can]) => (
-          <button
-            key={id} type="button" role="radio" aria-checked={id === 'blank'} disabled={!can}
-            style={{
-              display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: '2px 8px', padding: '6px 8px', textAlign: 'left',
-              fontFamily: 'monospace', fontSize: 11, color: 'var(--green)', cursor: can ? 'pointer' : 'not-allowed', opacity: can ? 1 : 0.45,
-              border: `1px solid ${id === 'blank' ? 'var(--green)' : 'var(--dark-green)'}`,
-              background: id === 'blank' ? 'color-mix(in srgb, var(--green) 12%, transparent)' : 'none',
-            }}
-          >
-            <span aria-hidden style={{ width: 10, height: 10, marginTop: 2, borderRadius: '50%', border: '1px solid var(--green)', background: id === 'blank' ? 'var(--green)' : 'none' }} />
-            <span>{label}</span>
-            <small style={{ gridColumn: 2, opacity: 0.75 }}>{what}</small>
-          </button>
+          <React.Fragment key={id}>
+            <button
+              type="button" role="radio" aria-checked={start === id} disabled={!can}
+              onClick={() => { setStart(id); setError(null); }}
+              style={{
+                display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: '2px 8px', padding: '6px 8px', textAlign: 'left',
+                fontFamily: 'monospace', fontSize: 11, color: 'var(--green)', cursor: can ? 'pointer' : 'not-allowed', opacity: can ? 1 : 0.45,
+                border: `1px solid ${start === id ? 'var(--green)' : 'var(--dark-green)'}`,
+                background: start === id ? 'color-mix(in srgb, var(--green) 12%, transparent)' : 'none',
+              }}
+            >
+              <span aria-hidden style={{ width: 10, height: 10, marginTop: 2, borderRadius: '50%', border: '1px solid var(--green)', background: start === id ? 'var(--green)' : 'none' }} />
+              <span>{label}</span>
+              <small style={{ gridColumn: 2, opacity: 0.75 }}>{what}</small>
+            </button>
+            {id === 'example' && start === 'example' && (
+              <ExampleCards api={api} picked={picked} onPick={setPicked} onLook={onLook}
+                onLoaded={(n) => { setNames(n); setPicked((p) => p ?? Object.keys(n)[0] ?? null); }} />
+            )}
+          </React.Fragment>
         ))}
       </div>
       <div>
-        <button type="button" className="utility-btn active" style={btn} disabled={!name.trim() || busy} onClick={create}>CREATE</button>
+        <button type="button" className="utility-btn active" style={btn} disabled={!name.trim() || busy || (start === 'example' && !exampleName)} onClick={create}>
+          {exampleName ? `COPY ${exampleName.toUpperCase()}` : 'CREATE'}
+        </button>
       </div>
-      <span style={why}>It's made as a draft: nobody plays it until it's published from the builder.</span>
+      <span style={why}>
+        It's made as a draft: nobody plays it until it's published from the builder.{exampleName ? ' The copy is yours alone, with no link back to the example.' : ''}
+      </span>
     </div>
   );
 }
diff --git a/frontend/src/components/TryItPage.tsx b/frontend/src/components/TryItPage.tsx
index bfb5175c..acf3f968 100644
--- a/frontend/src/components/TryItPage.tsx
+++ b/frontend/src/components/TryItPage.tsx
@@ -22,7 +22,8 @@ import type { HealthView } from '../hooks/useHealthView';
 
 interface Props {
   definition: Definition;
-  edit: (next: Definition) => void;
+  /** None for a built-in example, whose samples can't change: no SAVE AS THE SAMPLE CHARACTER. */
+  edit?: (next: Definition) => void;
   api?: ReturnType<typeof systemsApi>;
 }
 
@@ -156,7 +157,7 @@ export function TryItPage({ definition, edit, api }: Props) {
         <span style={{ ...small, opacity: 1 }}>THE DRAFT AS IT STANDS</span>
         <span style={why}>Unsaved changes included. What you type here isn&apos;t saved.</span>
         <span style={{ flex: 1 }} />
-        {differsFromSample(definition, character) && (
+        {edit && differsFromSample(definition, character) && (
           <button type="button" className="utility-btn" style={btn} onClick={() => edit(withCharacterAsSample(definition, character))}>SAVE AS THE SAMPLE CHARACTER</button>
         )}
         <button type="button" className="utility-btn" style={btn} onClick={reset}>RESET TO THE SAMPLE</button>
diff --git a/frontend/src/components/__tests__/BuilderScreen.test.tsx b/frontend/src/components/__tests__/BuilderScreen.test.tsx
index b1016552..0678ddf0 100644
--- a/frontend/src/components/__tests__/BuilderScreen.test.tsx
+++ b/frontend/src/components/__tests__/BuilderScreen.test.tsx
@@ -21,6 +21,7 @@ import { createRequire } from 'module';
 const { starterSheet, effectiveSheet } = createRequire(import.meta.url)('../../../../backend/systemBuilder/sheet.js');
 const { tryHealth } = createRequire(import.meta.url)('../../../../backend/systemBuilder/tryHealth.js');
 const { previewDerived } = createRequire(import.meta.url)('../../../../backend/systemBuilder/derived.js');
+const { exampleList, exampleDefinition } = createRequire(import.meta.url)('../../../../backend/systemBuilder/examples.js');
 
 /**
  * The builder screen (4a2b): it takes over the window, with its own sidebar of pages, SAVE,
@@ -43,6 +44,8 @@ let calls: { url: string; method: string }[];
 let publishAnswer: { status: number; body: unknown };
 let draftAnswer: { status: number; body: unknown };
 let drafts: unknown[];
+let posts: unknown[];
+const COPY = 'sys_cccccccccccccccc';
 
 const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
   const url = String(input);
@@ -56,6 +59,18 @@ const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) =>
     return json(draftAnswer.status, draftAnswer.body);
   }
   if (url === '/api/systems' && method === 'GET') return json(200, LIBRARY);
+  if (url === '/api/systems' && method === 'POST') {
+    const body = JSON.parse(String(init!.body));
+    posts.push(body);
+    if (body.name.trim().toLowerCase() === 'hearth') return json(409, { error: 'Another system is already called Hearth.' });
+    return json(200, { id: COPY, problems: [] });
+  }
+  if (url === '/api/systems/examples') return json(200, exampleList());
+  const ex = /^\/api\/systems\/examples\/([a-z0-9]+)$/.exec(url);
+  if (ex) {
+    const definition = exampleDefinition(ex[1]);
+    return definition ? json(200, { id: ex[1], definition }) : json(404, { error: 'No such example' });
+  }
   if (url === '/api/systems/try-health') {
     const body = JSON.parse(String(init!.body));
     return json(200, tryHealth(body.definition, body));
@@ -84,6 +99,7 @@ beforeEach(() => {
   publishAnswer = { status: 200, body: { version: 4 } };
   draftAnswer = { status: 200, body: { problems: [] } };
   drafts = [];
+  posts = [];
 });
 afterEach(() => cleanup());
 
@@ -351,6 +367,137 @@ describe('with no system open', () => {
   });
 });
 
+describe('looking at a built-in example (4d1b)', () => {
+  // Approved mockup builder-examples (2026-10-08): every page shown, everything locked but TRY IT,
+  // nothing saved, COPY TO CHANGE IT under a name of the GM's own.
+  const look = (page: 'rules' | 'try' | 'features' | 'sheet' = 'rules', over = {}) =>
+    open({ systemId: null, example: 'cwn', startPage: page, ...over });
+  const banner = () => screen.getByRole('region', { name: 'Example' });
+
+  it('opens it under its own name, marked as an example, with nothing to save or publish', async () => {
+    look();
+    await screen.findByRole('region', { name: 'Example' });
+    expect(within(screen.getByTestId('builder-system')).getByText('CITIES WITHOUT NUMBER')).toBeTruthy();
+    expect(within(screen.getByTestId('builder-system')).getByText('EXAMPLE · READ ONLY')).toBeTruthy();
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('STATS & RULES');
+    for (const label of ['SAVE', 'PUBLISH']) expect((within(sidebar()).getByLabelText(label) as HTMLButtonElement).disabled, label).toBe(true);
+    for (const label of ['SETUP', 'WORDS', 'TRY IT', 'PROBLEMS']) expect((within(sidebar()).getByLabelText(label) as HTMLButtonElement).disabled, label).toBe(false);
+    expect(calls.map((c) => c.url)).toContain('/api/systems/examples/cwn');
+    expect(calls.some((c) => c.url === '/api/systems' || /\/api\/systems\/sys_/.test(c.url))).toBe(false);
+  });
+
+  it('shows every page with its boxes and buttons locked, its tabs still there to read', async () => {
+    look();
+    const strength = await screen.findByLabelText('Strength name');
+    await waitFor(() => expect((strength as HTMLInputElement).disabled).toBe(true));
+    expect((screen.getByLabelText('Strength sample') as HTMLInputElement).disabled).toBe(true);
+    expect((screen.getByText('+ GROUP').closest('button') as HTMLButtonElement).disabled).toBe(true);
+    await userEvent.click(screen.getByRole('tab', { name: 'FORMULAS' }));
+    const save = await screen.findByLabelText('Physical save formula');
+    await waitFor(() => expect((save as HTMLInputElement).disabled).toBe(true));
+    expect((save as HTMLInputElement).value).toBe('16 - (@level + max(@str_mod, @con_mod))');
+    expect(screen.getByTestId('locked-page')).toBeTruthy();
+  });
+
+  it('locks each page as it is opened from the rail, not only the first', async () => {
+    look();
+    await waitFor(() => expect((screen.getByLabelText('Strength name') as HTMLInputElement).disabled).toBe(true));
+    await userEvent.click(within(sidebar()).getByLabelText('WORDS'));
+    const boxes = within(screen.getByTestId('locked-page')).getAllByRole('textbox');
+    expect(boxes.length).toBeGreaterThan(10);
+    for (const box of boxes) expect((box as HTMLInputElement).disabled).toBe(true);
+    // The banner's name box sits outside the page, so a copy can still be named.
+    expect((within(banner()).getByLabelText('Name for the copy') as HTMLInputElement).disabled).toBe(false);
+  });
+
+  it('opens things out on FEATURES, but switches nothing', async () => {
+    look('features');
+    const opener = await within(await screen.findByTestId('part-bank')).findByRole('button', { name: /SETTINGS/, expanded: false });
+    await userEvent.click(opener);
+    await waitFor(() => expect(opener.getAttribute('aria-expanded')).toBe('true'));
+    for (const s of screen.getAllByRole('switch')) expect((s as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it('lets the CHARACTER SHEET preview be seen by each viewer, but not customized', async () => {
+    look('sheet');
+    const others = await screen.findByRole('button', { name: 'EVERYONE ELSE' });
+    await waitFor(() => expect((screen.getByRole('button', { name: /CUSTOMIZE/ }) as HTMLButtonElement).disabled).toBe(true));
+    expect((others as HTMLButtonElement).disabled).toBe(false);
+    await userEvent.click(others);
+    expect(others.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('never saves, and says so if anything tries to change it', async () => {
+    look();
+    const strength = await screen.findByLabelText('Strength name');
+    fireEvent.change(strength, { target: { value: 'Brawn' } });
+    expect(screen.getByRole('status').textContent).toBe('This is an example: copy it to change it.');
+    expect((screen.getByLabelText('Strength name') as HTMLInputElement).value).toBe('Strength');
+    await new Promise((r) => setTimeout(r, 50));
+    expect(drafts).toEqual([]);
+  });
+
+  it('leaves TRY IT usable, without SAVE AS THE SAMPLE CHARACTER', async () => {
+    look('try');
+    await waitFor(() => expect(screen.getByRole('region', { name: 'Made-up character' })).toBeTruthy());
+    const str = await within(screen.getByRole('region', { name: 'Made-up character' })).findByLabelText('Strength');
+    expect((str as HTMLInputElement).disabled).toBe(false);
+    fireEvent.change(str, { target: { value: '18' } });
+    expect(screen.queryByRole('button', { name: 'SAVE AS THE SAMPLE CHARACTER' })).toBeNull();
+    await userEvent.click(screen.getByRole('button', { name: 'DAMAGE' }));
+    expect((await screen.findByTestId('health-log')).textContent).toContain('DAMAGE 5');
+    expect(screen.queryByTestId('locked-page')).toBeNull();
+  });
+
+  it('COPY TO CHANGE IT makes it the GM\'s own under the name typed, opened on SETUP', async () => {
+    const told = vi.fn();
+    window.addEventListener(SYSTEMS_CHANGED_EVENT, told);
+    const { onOpenSystem } = look();
+    await screen.findByRole('region', { name: 'Example' });
+    const name = within(banner()).getByLabelText('Name for the copy') as HTMLInputElement;
+    expect(name.disabled).toBe(false);
+    expect(name.placeholder).toBe('Cities Without Number (house rules)');
+    await userEvent.click(within(banner()).getByRole('button', { name: 'COPY TO CHANGE IT' }));
+    expect(within(banner()).getByRole('alert').textContent).toBe('Give the copy a name.');
+    await userEvent.type(name, 'hearth{Enter}');
+    expect((await within(banner()).findByRole('alert')).textContent).toBe('Another system is already called Hearth.');
+    await userEvent.clear(name);
+    await userEvent.type(name, 'Neon Nights');
+    await userEvent.click(within(banner()).getByRole('button', { name: 'COPY TO CHANGE IT' }));
+    await waitFor(() => expect(onOpenSystem).toHaveBeenCalledWith(COPY, 'setup'));
+    expect(posts.at(-1)).toEqual({ name: 'Neon Nights', example: 'cwn' });
+    expect(told).toHaveBeenCalledTimes(1);
+    window.removeEventListener(SYSTEMS_CHANGED_EVENT, told);
+  });
+
+  it('BACK TO + NEW goes back to where it was picked', async () => {
+    look();
+    await screen.findByRole('region', { name: 'Example' });
+    await userEvent.click(within(banner()).getByRole('button', { name: 'BACK TO + NEW' }));
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('MY SYSTEMS');
+    expect(screen.getByRole('tab', { name: '+ NEW' }).getAttribute('aria-selected')).toBe('true');
+    expect(screen.queryByRole('region', { name: 'Example' })).toBeNull();
+    // MY SYSTEMS is the GM's own, never locked.
+    await new Promise((r) => setTimeout(r, 0));
+    expect((screen.getByLabelText('NAME') as HTMLInputElement).disabled).toBe(false);
+  });
+
+  it('LOOK FIRST in + NEW asks for it to be opened', async () => {
+    const onLookAt = vi.fn();
+    open({ systemId: null, onLookAt });
+    await userEvent.click(await screen.findByRole('tab', { name: '+ NEW' }));
+    await userEvent.click(screen.getByRole('radio', { name: /A BUILT-IN EXAMPLE/ }));
+    await userEvent.click(await screen.findByRole('button', { name: 'Look at Cities Without Number first' }));
+    await waitFor(() => expect(onLookAt).toHaveBeenCalledWith('cwn'));
+  });
+
+  it('says when the example can\'t be read', async () => {
+    look('rules', { example: 'dnd' });
+    expect((await screen.findByRole('alert')).textContent).toBe('No such example');
+    expect(screen.queryByRole('region', { name: 'Example' })).toBeNull();
+  });
+});
+
 describe('saving what a page changes', () => {
   const describeIt = async (text: string) => {
     await waitFor(() => expect(screen.getByLabelText('DESCRIPTION')).toBeTruthy());
diff --git a/frontend/src/components/__tests__/MySystemsPage.test.tsx b/frontend/src/components/__tests__/MySystemsPage.test.tsx
index 97e6e8da..aa1042e4 100644
--- a/frontend/src/components/__tests__/MySystemsPage.test.tsx
+++ b/frontend/src/components/__tests__/MySystemsPage.test.tsx
@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { MySystemsPage } from '../MySystemsPage';
 import { systemsApi } from '../../sheets/systemsApi';
 import { SYSTEMS_CHANGED_EVENT, changedFact, type LibrarySystem, type InstallPreview } from '../../sheets/systemsLibrary';
+import { createRequire } from 'module';
 
 /**
  * The builder's MY SYSTEMS page (4a2c2a): everything SYSTEMS.EXE did, inside the builder. Approved
@@ -28,6 +29,9 @@ const AT = changedFact('2026-10-06 14:10:00');
 let systems: LibrarySystem[];
 let calls: { url: string; method: string; body: unknown }[];
 let renameAnswer: { status: number; body: unknown } | null;
+let examplesDown: boolean;
+let exampleGone: string | null;
+const { exampleList, exampleDefinition } = createRequire(import.meta.url)('../../../../backend/systemBuilder/examples.js');
 
 const PREVIEW: InstallPreview = {
   manifest: { name: 'Iron Sea', author: 'M. Okafor', license: '', builder: '1.15.0', version: 4, origin: 'org_iron' },
@@ -44,6 +48,9 @@ const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) =>
     ok: status < 300, status, json: async () => b, text: async () => String(b), headers: { get: (k: string) => headers[k] ?? null },
   }) as unknown as Response;
   if (url === '/api/systems' && method === 'GET') return json(200, systems);
+  if (url === '/api/systems/examples') return examplesDown ? json(500, { error: 'Could not reach the systems store' }) : json(200, exampleList());
+  const ex = /^\/api\/systems\/examples\/([a-z0-9]+)$/.exec(url);
+  if (ex) return ex[1] === exampleGone ? json(404, { error: 'No such example' }) : json(200, { id: ex[1], definition: exampleDefinition(ex[1]) });
   if (url === '/api/systems' && method === 'POST') {
     const taken = systems.find((s) => s.name.toLowerCase() === body.name.trim().toLowerCase());
     if (taken) return json(409, { error: `Another system is already called ${taken.name}.` });
@@ -77,6 +84,8 @@ const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) =>
 beforeEach(() => {
   calls = [];
   renameAnswer = null;
+  examplesDown = false;
+  exampleGone = null;
   systems = [
     row({ description: 'Low fantasy around one village fire.', author: 'Cody', characterCount: 5 }),
     row({ id: NEON, name: 'Neon Exchange', version: 1, unpublishedChanges: true, characterCount: 1 }),
@@ -85,10 +94,10 @@ beforeEach(() => {
 });
 afterEach(() => cleanup());
 
-const open = ({ openId = HEARTH as string | null, running = HEARTH as string | null } = {}) => {
+const open = ({ openId = HEARTH as string | null, running = HEARTH as string | null, onLook = undefined as ((id: string) => void) | undefined, startTab = undefined as 'list' | 'new' | 'install' | undefined } = {}) => {
   const onOpen = vi.fn();
   const say = vi.fn();
-  render(<MySystemsPage api={systemsApi('gm', fakeServer as typeof fetch)} openId={openId} running={running} onOpen={onOpen} say={say} />);
+  render(<MySystemsPage api={systemsApi('gm', fakeServer as typeof fetch)} openId={openId} running={running} onOpen={onOpen} say={say} onLook={onLook} startTab={startTab} />);
   return { onOpen, say };
 };
 const line = (id: string) => screen.getByTestId(`system-${id}`);
@@ -250,6 +259,12 @@ describe('+ NEW and INSTALL A FILE', () => {
     expect(onOpen).not.toHaveBeenCalled();
   });
 
+  it('can open on + NEW', async () => {
+    open({ startTab: 'new' });
+    expect(screen.getByRole('tab', { name: '+ NEW' }).getAttribute('aria-selected')).toBe('true');
+    expect(screen.getByLabelText('NAME')).toBeTruthy();
+  });
+
   it('INSTALL A FILE installs, then offers OPEN IT', async () => {
     const { onOpen } = open();
     await ready();
@@ -265,3 +280,89 @@ describe('+ NEW and INSTALL A FILE', () => {
     expect(screen.getByTestId(`system-${COPY}`)).toBeTruthy();
   });
 });
+
+describe('+ NEW from a built-in example (4d1b)', () => {
+  // Approved mockup builder-examples (2026-10-08): a card each, LOOK FIRST, a copy under a name of the GM's own.
+  const pickExamples = async (over: Parameters<typeof open>[0] = {}) => {
+    const opened = open({ startTab: 'new', ...over });
+    await userEvent.click(screen.getByRole('radio', { name: /A BUILT-IN EXAMPLE/ }));
+    return opened;
+  };
+  const card = (id: string) => screen.getByTestId(`example-${id}`);
+
+  it('shows a card for each, saying what it holds, the first picked and named on the button', async () => {
+    await pickExamples();
+    await screen.findByTestId('example-cwn');
+    expect(within(card('cwn')).getByText('13 in 5 groups')).toBeTruthy();
+    expect(within(card('cwn')).getByText('One pool')).toBeTruthy();
+    expect(within(card('sr6')).getByText('Two tracks, overflow')).toBeTruthy();
+    expect(within(card('sr6')).getByText('Spend KARMA')).toBeTruthy();
+    expect(within(card('cwn')).getByRole('radio', { name: 'CITIES WITHOUT NUMBER' }).getAttribute('aria-checked')).toBe('true');
+    expect((screen.getByLabelText('NAME') as HTMLInputElement).placeholder).toBe('Cities Without Number (house rules)');
+    expect((screen.getByRole('button', { name: 'COPY CITIES WITHOUT NUMBER' }) as HTMLButtonElement).disabled).toBe(true);
+    expect(screen.getByText(/no link back to the example/)).toBeTruthy();
+  });
+
+  it('copies the one picked under the name typed, and opens it on SETUP, telling the picker', async () => {
+    const told = vi.fn();
+    window.addEventListener(SYSTEMS_CHANGED_EVENT, told);
+    const { onOpen } = await pickExamples();
+    await userEvent.click(await within(await screen.findByTestId('example-sr6')).findByRole('radio', { name: 'SHADOWRUN 6E' }));
+    await userEvent.type(screen.getByLabelText('NAME'), 'Runners');
+    await userEvent.click(screen.getByRole('button', { name: 'COPY SHADOWRUN 6E' }));
+    await waitFor(() => expect(onOpen).toHaveBeenCalledWith(COPY, 'setup'));
+    expect(calls.find((c) => c.method === 'POST')!.body).toEqual({ name: 'Runners', example: 'sr6' });
+    expect(told).toHaveBeenCalledTimes(1);
+    window.removeEventListener(SYSTEMS_CHANGED_EVENT, told);
+  });
+
+  it('refuses a name in use where it was typed', async () => {
+    const { onOpen } = await pickExamples();
+    await screen.findByTestId('example-cwn');
+    await userEvent.type(screen.getByLabelText('NAME'), 'Neon exchange{Enter}');
+    expect((await screen.findByRole('alert')).textContent).toBe('Another system is already called Neon Exchange.');
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  it('LOOK FIRST opens the one asked for, and is offered only where there is somewhere to look', async () => {
+    const onLook = vi.fn();
+    await pickExamples({ onLook });
+    await userEvent.click(await screen.findByRole('button', { name: 'Look at Shadowrun 6E first' }));
+    expect(onLook).toHaveBeenCalledWith('sr6');
+    cleanup();
+    await pickExamples();
+    await screen.findByTestId('example-cwn');
+    expect(screen.queryByText('LOOK FIRST')).toBeNull();
+  });
+
+  it('BLANK goes back to a plain CREATE, sending no example', async () => {
+    const { onOpen } = await pickExamples();
+    await screen.findByTestId('example-cwn');
+    await userEvent.click(screen.getByRole('radio', { name: /^BLANK/ }));
+    expect(screen.queryByTestId('example-cwn')).toBeNull();
+    await userEvent.type(screen.getByLabelText('NAME'), 'Plain');
+    await userEvent.click(screen.getByRole('button', { name: 'CREATE' }));
+    await waitFor(() => expect(onOpen).toHaveBeenCalledWith(COPY, 'setup'));
+    expect(calls.find((c) => c.method === 'POST')!.body).toEqual({ name: 'Plain' });
+  });
+
+  it('says when the examples can\'t be read, and copies nothing', async () => {
+    examplesDown = true;
+    await pickExamples();
+    expect((await screen.findByRole('alert')).textContent).toBe('Could not load the examples: Could not reach the systems store');
+    await userEvent.type(screen.getByLabelText('NAME'), 'Runners{Enter}');
+    expect(calls.some((c) => c.method === 'POST')).toBe(false);
+  });
+
+  it('says so when one of them can\'t be read', async () => {
+    exampleGone = 'sr6';
+    await pickExamples();
+    expect((await screen.findByRole('alert')).textContent).toBe('Could not load the examples: No such example');
+    expect(screen.queryByTestId('example-cwn')).toBeNull();
+  });
+
+  it('still has the genre starters to come', async () => {
+    open({ startTab: 'new' });
+    expect((screen.getByRole('radio', { name: /A GENRE STARTER/ }) as HTMLButtonElement).disabled).toBe(true);
+  });
+});
diff --git a/frontend/src/components/__tests__/TryItPage.test.tsx b/frontend/src/components/__tests__/TryItPage.test.tsx
index ba1d6344..e11fa080 100644
--- a/frontend/src/components/__tests__/TryItPage.test.tsx
+++ b/frontend/src/components/__tests__/TryItPage.test.tsx
@@ -90,6 +90,15 @@ describe('the made-up character', () => {
     expect(screen.queryByRole('button', { name: 'SAVE AS THE SAMPLE CHARACTER' })).toBeNull();
   });
 
+  it('offers no SAVE AS THE SAMPLE CHARACTER with nowhere to save it, as on a built-in example', async () => {
+    render(<TryItPage definition={H} api={serverApi() as unknown as Api} />);
+    await waitFor(() => expect(valueOf('Save')).toBe('11'));
+    fireEvent.change(character().getByLabelText('Strength'), { target: { value: '6' } });
+    await waitFor(() => expect(valueOf('Save')).toBe('7'));
+    expect(screen.queryByRole('button', { name: 'SAVE AS THE SAMPLE CHARACTER' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'RESET TO THE SAMPLE' })).toBeTruthy();
+  });
+
   it('goes back to the sample on RESET, health and all', async () => {
     open();
     await waitFor(() => expect(valueOf('Save')).toBe('11'));
diff --git a/frontend/src/sheets/__tests__/examples.test.ts b/frontend/src/sheets/__tests__/examples.test.ts
new file mode 100644
index 00000000..f6af6b00
--- /dev/null
+++ b/frontend/src/sheets/__tests__/examples.test.ts
@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { createRequire } from 'module';
+import { exampleFacts, suggestedName, isBrowseControl, lockControls, LOCKED_MESSAGE } from '../examples';
+import type { Definition } from '../systemsApi';
+
+/**
+ * The built-in examples in the builder (4d1b). Approved mockup builder-examples (2026-10-08): a card
+ * each saying what it holds, a name to copy it under, and every page locked but for moving around.
+ */
+
+const { exampleDefinition } = createRequire(import.meta.url)('../../../../backend/systemBuilder/examples.js');
+
+describe('what an example\'s card says', () => {
+  it('reads the server\'s own examples', () => {
+    expect(exampleFacts(exampleDefinition('cwn'))).toEqual([
+      ['HEALTH', 'One pool'], ['ADVANCES', 'XP levels'], ['STATS', '13 in 5 groups'], ['FORMULAS', '17'], ['DISTANCE', 'Meters'],
+    ]);
+    expect(exampleFacts(exampleDefinition('sr6'))).toEqual([
+      ['HEALTH', 'Two tracks, overflow'], ['ADVANCES', 'Spend KARMA'], ['STATS', '10 in 2 groups'], ['FORMULAS', '6'], ['DISTANCE', 'Meters'],
+    ]);
+  });
+
+  it('says what a system leaves out as the defaults, in the singular where it is one', () => {
+    expect(exampleFacts({ format: 1, name: 'Bare' })).toEqual([
+      ['HEALTH', 'One pool'], ['ADVANCES', 'None'], ['STATS', '0 in 0 groups'], ['FORMULAS', '0'], ['DISTANCE', 'Feet'],
+    ]);
+    const one: Definition = {
+      format: 1, name: 'One', stats: [{ id: 'a', label: 'A', stats: [{ id: 'x', label: 'X' }] }], derived: [{ id: 'y', formula: '1' }],
+      core: { health: { model: 'tracks', tracks: [] }, advancement: ['levels', 'use'] }, words: { xp: { singular: ' ' } },
+    };
+    expect(exampleFacts(one)).toEqual([
+      ['HEALTH', 'Two tracks'], ['ADVANCES', 'XP levels, Improve by use'], ['STATS', '1 in 1 group'], ['FORMULAS', '1'], ['DISTANCE', 'Feet'],
+    ]);
+  });
+
+  it('suggests a name for a copy', () => {
+    expect(suggestedName('Shadowrun 6E')).toBe('Shadowrun 6E (house rules)');
+    expect(LOCKED_MESSAGE).toBe('This is an example: copy it to change it.');
+  });
+});
+
+describe('locking a page', () => {
+  const page = () => {
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <input id="text"><select id="pick"></select><textarea id="notes"></textarea><button id="add">+</button>
+      <button id="tab" role="tab">FORMULAS</button><button id="open" aria-expanded="false">SETTINGS</button>
+      <button id="view" data-browse>OWNER</button><button id="already" disabled>X</button>`;
+    return root;
+  };
+  const byId = (root: Element, id: string) => root.querySelector(`#${id}`) as HTMLButtonElement;
+
+  it('locks every control but those that only move around', () => {
+    const root = page();
+    expect(lockControls(root)).toBe(4);
+    for (const id of ['text', 'pick', 'notes', 'add', 'already']) expect(byId(root, id).disabled, id).toBe(true);
+    for (const id of ['tab', 'open', 'view']) expect(byId(root, id).disabled, id).toBe(false);
+  });
+
+  it('touches only what isn\'t locked yet, so locking again changes nothing', () => {
+    const root = page();
+    lockControls(root);
+    expect(lockControls(root)).toBe(0);
+    byId(root, 'add').disabled = false;
+    expect(lockControls(root)).toBe(1);
+  });
+
+  it('knows a browsing control by its role, its opening out, or its mark', () => {
+    const el = (html: string) => { const d = document.createElement('div'); d.innerHTML = html; return d.firstElementChild!; };
+    expect(isBrowseControl(el('<button role="tab"></button>'))).toBe(true);
+    expect(isBrowseControl(el('<button aria-expanded="true"></button>'))).toBe(true);
+    expect(isBrowseControl(el('<button data-browse></button>'))).toBe(true);
+    expect(isBrowseControl(el('<button role="switch" aria-checked="true"></button>'))).toBe(false);
+    expect(isBrowseControl(el('<button aria-pressed="true"></button>'))).toBe(false);
+  });
+});
diff --git a/frontend/src/sheets/examples.ts b/frontend/src/sheets/examples.ts
new file mode 100644
index 00000000..e714ccc4
--- /dev/null
+++ b/frontend/src/sheets/examples.ts
@@ -0,0 +1,60 @@
+// The built-in examples in the builder (4d1b; approved mockup docs/mockups/builder-examples.html,
+// 2026-10-08): Cities Without Number and Shadowrun as systems to copy under a name of the GM's
+// own (+ NEW's START FROM A BUILT-IN EXAMPLE), or to look at first with every page locked but
+// TRY IT. The examples themselves are the server's (backend/systemBuilder/examples.js).
+
+import type { Definition } from './systemsApi';
+import { setupOf, HEALTH_MODELS, ADVANCEMENT } from './setup';
+
+/** What an example's card says it holds, as label and value. */
+export const exampleFacts = (def: Definition): [string, string][] => {
+  const setup = setupOf(def);
+  const model = HEALTH_MODELS.find((m) => m.id === setup.health.model)?.label ?? 'One pool';
+  const health = setup.health.model === 'tracks' && (setup.health as { overflow?: boolean }).overflow ? `${model}, overflow` : model;
+  // In the system's own word for XP: Shadowrun spends KARMA.
+  const words = def.words as { xp?: { singular?: string } } | undefined;
+  const xp = typeof words?.xp?.singular === 'string' && words.xp.singular.trim() ? words.xp.singular : 'XP';
+  const advances = setup.advancement.length
+    ? setup.advancement.map((id) => (ADVANCEMENT.find((a) => a.id === id)?.label ?? id).replace('XP', xp)).join(', ')
+    : 'None';
+  const groups = Array.isArray(def.stats) ? def.stats as { stats?: unknown }[] : [];
+  const stats = groups.reduce((n, g) => n + (g && Array.isArray(g.stats) ? g.stats.length : 0), 0);
+  const formulas = Array.isArray(def.derived) ? def.derived.length : 0;
+  return [
+    ['HEALTH', health],
+    ['ADVANCES', advances],
+    ['STATS', `${stats} in ${groups.length} group${groups.length === 1 ? '' : 's'}`],
+    ['FORMULAS', String(formulas)],
+    ['DISTANCE', setup.distance.charAt(0).toUpperCase() + setup.distance.slice(1)],
+  ];
+};
+
+/** The name box's suggestion for a copy. A suggestion only: the GM still types a name. */
+export const suggestedName = (exampleName: string) => `${exampleName} (house rules)`;
+
+/** Said when something tries to change an example the builder is looking at. */
+export const LOCKED_MESSAGE = 'This is an example: copy it to change it.';
+
+/**
+ * Whether a control only moves around an example (a tab, something opening out, a view to look
+ * through) rather than changing it, so it stays usable while every other control is locked.
+ */
+export const isBrowseControl = (el: Element): boolean =>
+  el.getAttribute('role') === 'tab' || el.hasAttribute('aria-expanded') || el.hasAttribute('data-browse');
+
+const CONTROLS = 'input, select, textarea, button';
+
+/**
+ * Lock every control under `root` that isn't for browsing. Only those not locked yet are touched,
+ * so watching for changes and locking again never loops. Answers how many it locked.
+ */
+export const lockControls = (root: Element): number => {
+  let locked = 0;
+  root.querySelectorAll(CONTROLS).forEach((el) => {
+    const control = el as HTMLInputElement;
+    if (control.disabled || isBrowseControl(control)) return;
+    control.disabled = true;
+    locked += 1;
+  });
+  return locked;
+};
diff --git a/frontend/src/sheets/systemsApi.ts b/frontend/src/sheets/systemsApi.ts
index e7f100be..9a5ae596 100644
--- a/frontend/src/sheets/systemsApi.ts
+++ b/frontend/src/sheets/systemsApi.ts
@@ -42,6 +42,9 @@ export interface TriedHealth {
   others: Record<string, unknown>;
 }
 
+/** A built-in example as the library lists it (backend/systemBuilder/examples.js exampleList). */
+export interface ExampleSummary { id: string; name: string; description: string }
+
 export type Answer<T> =
   | { ok: true; value: T }
   | { ok: false; error: string; status: number; changed?: boolean; problems?: Problem[] };
@@ -109,6 +112,13 @@ export const systemsApi = (token: string, fetcher: typeof fetch = fetch) => {
     /** Make the stored draft what the game runs; refused, with `problems`, while it has any. */
     publish: (systemId: string) => call<{ version: number }>(fetcher, token, `${id(systemId)}/publish`, 'POST', {}),
     create: (name: string) => call<{ id: string }>(fetcher, token, '/api/systems', 'POST', { name }),
+    /** The built-in examples to copy (4d1): what each is called and does, without its definition. */
+    examples: () => call<ExampleSummary[]>(fetcher, token, '/api/systems/examples'),
+    /** One built-in example whole: its cards in + NEW, and the builder looking at it. */
+    example: (exampleId: string) =>
+      call<{ id: string; definition: Definition }>(fetcher, token, `/api/systems/examples/${encodeURIComponent(exampleId)}`),
+    /** A new draft copied from a built-in example under the GM's own name; no link back. */
+    createFromExample: (name: string, example: string) => call<{ id: string }>(fetcher, token, '/api/systems', 'POST', { name, example }),
     rename: (systemId: string, name: string) => call<{ name: string }>(fetcher, token, `${id(systemId)}/name`, 'PUT', { name }),
     duplicate: (systemId: string) => call<{ id: string; name: string }>(fetcher, token, `${id(systemId)}/duplicate`, 'POST', {}),
     remove: (systemId: string) => call<{ deleted: true }>(fetcher, token, id(systemId), 'DELETE'),