a section title outranks its own fields

text-xs was the size of the labels under it, so the three headings read as one
more row of form furniture. Bigger and heavier — weight is the signal that
survives at this density without adding a second thing to look at.

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

web/sections/LayoutPanel.tsx

@@ -112,6 +112,18 @@ const themeProperties = (draft: Layout): Record<string, string | null> => ({
 /** Every section, open from the start. The values below must match the AccordionItems. */
 const SECTIONS_OPEN = ['colours', 'typefaces', 'padding'];
 
+/**
+ * A section's title.
+ *
+ * It was `text-xs`, the same size as the labels under it, so the three headings read as one more row
+ * of form furniture. They are the structure of the column — everything else is a field inside one of
+ * them — and a heading that does not outrank its own contents is not a heading.
+ *
+ * Bigger and heavier rather than uppercase or coloured: the panel is dense, and weight is the one
+ * signal that survives at this size without adding a second thing to look at.
+ */
+const SECTION_TITLE = 'text-sm font-semibold tracking-wide';
+
 const COLOURS = [
   { key: 'background' as const, label: 'Background', fallback: '#ffffff' },
   { key: 'foreground' as const, label: 'Text', fallback: '#000000' },
@@ -258,7 +270,7 @@ export const LayoutPanel = () => {
       */
       <Accordion type="multiple" defaultValue={SECTIONS_OPEN} className="flex flex-col gap-2">
         <AccordionItem value="colours" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Colors</AccordionTrigger>
+          <AccordionTrigger className={SECTION_TITLE}>Colors</AccordionTrigger>
           <AccordionContent>
       <>
           <div className="flex flex-wrap gap-4">
@@ -293,7 +305,7 @@ export const LayoutPanel = () => {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="typefaces" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Fonts</AccordionTrigger>
+          <AccordionTrigger className={SECTION_TITLE}>Fonts</AccordionTrigger>
           <AccordionContent>
       <>
           {/*
@@ -338,7 +350,7 @@ export const LayoutPanel = () => {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="padding" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Spacing</AccordionTrigger>
+          <AccordionTrigger className={SECTION_TITLE}>Spacing</AccordionTrigger>
           <AccordionContent>
                 {/* Three bands. PaddingTab is still the per-SECTION control, for the pages. */}
                 <SpacingTab