the panels stop explaining themselves

"The About page, in the order it is shown: a header, the text about you, the product, and the
manifesto." above four bands headed Header, About us, Product and Manifesto. "The photograph at the top,
and the line over it" above a photograph at the top and a line over it. "Who you are" above a box headed
About us.

Every one was a caption for something already visible, and together they were most of the vertical
space before any content — so the actual work started below the fold on a laptop.

The person using this is not a developer and is not a child. A heading names a thing; a sentence
underneath saying what the thing is says it twice and trusts them less each time.

Removed from About, Home, Galleries and the record sections. What stays is anything reporting STATE
rather than describing furniture — a count of photographs, a loading line, an error, a save
confirmation — because those say something the screen does not.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/AboutPanel.tsx

@@ -137,22 +137,13 @@ export const AboutPanel = () => {
 
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-4">
-      <div className="flex items-center gap-2">
-        <p className="flex-1 text-xs text-muted-foreground">
-          The About page, in the order it is shown: a header, the text about you, the product, and the
-          manifesto.
-        </p>
-        {/* Confirmation lives with the content rather than in the bar, because the bar's own button
-            has already gone back to saying "Save" by the time anybody looks up. */}
-        {saved && <span className="text-xs text-success">Saved</span>}
-      </div>
+      {/* Confirmation only. The order of the bands is the order of the page, which the bands
+          themselves already say — a sentence explaining that was a caption for something visible. */}
+      {saved && <p className="text-xs text-success">Saved</p>}
 
       {/* ── HEADER: a photograph and a phrase over it ─────────────────────────────────────────── */}
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div>
-          <h3 className="text-sm font-medium">Header</h3>
-          <p className="text-xs text-muted-foreground">The photograph at the top, and the line over it.</p>
-        </div>
+        <h3 className="text-sm font-medium">Header</h3>
 
         {/* 21/9 because that is what the page uses — `aspect-[21/9]` in about/partials.tsx. The two
             have to agree or the admin shows a shape the site does not have, which is worse than showing
@@ -179,19 +170,13 @@ export const AboutPanel = () => {
 
       {/* ── ABOUT US ─────────────────────────────────────────────────────────────────────────── */}
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div>
-          <h3 className="text-sm font-medium">About us</h3>
-          <p className="text-xs text-muted-foreground">Who you are.</p>
-        </div>
+        <h3 className="text-sm font-medium">About us</h3>
         <RichText value={aboutText} onChange={setAboutText} placeholder="Tell people who you are." />
       </section>
 
       {/* ── PRODUTO: a video beside its text ─────────────────────────────────────────────────── */}
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div>
-          <h3 className="text-sm font-medium">Product</h3>
-          <p className="text-xs text-muted-foreground">What you make, and a video of it being made.</p>
-        </div>
+        <h3 className="text-sm font-medium">Product</h3>
 
         {/* 16/9, matching the `aspect-video` the product block draws. */}
         <MediaField
@@ -207,10 +192,7 @@ export const AboutPanel = () => {
 
       {/* ── MANIFESTO ────────────────────────────────────────────────────────────────────────── */}
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div>
-          <h3 className="text-sm font-medium">Manifesto</h3>
-          <p className="text-xs text-muted-foreground">What you stand for.</p>
-        </div>
+        <h3 className="text-sm font-medium">Manifesto</h3>
         <RichText value={manifesto} onChange={setManifesto} placeholder="The manifesto." />
       </section>
 

web/sections/GalleriesPanel.tsx

@@ -142,12 +142,7 @@ export const GalleriesPanel = () => {
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-5">
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium">Galleries</h3>
-          <p className="text-xs text-muted-foreground">
-            A named set of media, in an order. Any page can use one, and they all change together.
-          </p>
-        </div>
+        <h3 className="text-sm font-medium">Galleries</h3>
 
         {error && <p className="text-xs text-destructive">{error}</p>}
 

web/sections/HomePanel.tsx

@@ -155,7 +155,6 @@ export const HomePanel = () => {
         <div className="flex items-start justify-between gap-3">
           <div className="space-y-1">
             <h3 className="text-sm font-medium">Intro</h3>
-            <p className="text-xs text-muted-foreground">The paragraph under the hero.</p>
           </div>
           {saved && (
             <span className="flex shrink-0 items-center gap-1 text-xs text-success">
@@ -173,7 +172,6 @@ export const HomePanel = () => {
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
         <div className="space-y-1">
           <h3 className="text-sm font-medium">Hero</h3>
-          <p className="text-xs text-muted-foreground">The video or image across the top of the page.</p>
         </div>
 
         {/*
@@ -213,13 +211,7 @@ export const HomePanel = () => {
       </section>
 
       <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium">Gallery</h3>
-          <p className="text-xs text-muted-foreground">
-            Which gallery the carousel shows. Edit its contents in the Galleries section — every page
-            using it changes with it.
-          </p>
-        </div>
+        <h3 className="text-sm font-medium">Gallery</h3>
 
         {/*
           A picker, not a list.

web/sections/RecordsPanel.tsx

@@ -226,8 +226,6 @@ export const RecordsPanel = ({ config }: { config: RecordsConfig }) => {
 
   return (
     <div className="flex size-full flex-col gap-4 overflow-auto p-4">
-      <p className="text-xs text-muted-foreground">{config.blurb}</p>
-
       {/* The list, and the one field that makes another. A record is created with a title alone and
           filled in afterwards — asking for six fields before anything exists is a form nobody
           finishes. */}

web/sections/records.ts

@@ -38,8 +38,6 @@ export type RecordsConfig = {
   singular: string;
   /** What this section calls its title. Collabs say "Project name" and that is the client's word. */
   titleLabel: string;
-  /** Shown once at the top, so a screen explains itself without a manual. */
-  blurb: string;
   fields: FieldSpec[];
 };
 
@@ -47,7 +45,6 @@ export const GALLERY_CONFIG: RecordsConfig = {
   path: '/fofos-admin/gallery',
   singular: 'piece',
   titleLabel: 'Title',
-  blurb: 'Standalone pieces, each with its own page and its own photographs.',
   fields: [
     { key: 'descriptive_text', label: 'Description', long: true },
     { key: 'measurement', label: 'Measurements', hint: '120 × 80 cm' },
@@ -62,7 +59,6 @@ export const DROPS_CONFIG: RecordsConfig = {
   path: '/fofos-admin/drops',
   singular: 'drop',
   titleLabel: 'Title',
-  blurb: 'Releases, in the order they should appear.',
   fields: [{ key: 'description', label: 'Description', long: true }],
 };
 
@@ -77,6 +73,5 @@ export const COLLABS_CONFIG: RecordsConfig = {
   path: '/fofos-admin/collabs',
   singular: 'collab',
   titleLabel: 'Project name',
-  blurb: 'Projects with other people.',
   fields: [{ key: 'project_description', label: 'Description', long: true }],
 };