59D Golden Layout

Golden Ratio Layout Tokens

Golden ratio, reading width, hero rhythm, card grids, and visual narrative flow become reusable layout helpers. This keeps TheoB visually rich while making the path through each experience clearer.

61.8% Primary Surface

Use this area for the main lesson, shell surface, game board, route content, or founder decision.

38.2% Support Panel

Use this area for the agent explanation, right panel, next action, or supporting context.

ratio

{
  "golden": 1.618,
  "major": "61.8%",
  "minor": "38.2%",
  "inverse": 0.618
}

widths

{
  "contentMax": 1240,
  "heroMax": 980,
  "readingMax": 760,
  "shellControlRail": 320,
  "compactTabMin": 220,
  "singleTabPreferred": "61.8%",
  "sidePanelPreferred": "38.2%"
}

spacing

{
  "micro": 8,
  "small": 10,
  "cardGap": 14,
  "sectionGap": 22,
  "heroGap": 34,
  "fibonacci": [
    1,
    2,
    3,
    5,
    8,
    13,
    21,
    34
  ]
}

flow

[
  "orientation",
  "primary surface",
  "supporting shell controls",
  "agent explanation or action",
  "next path"
]

shellModeIcon

{
  "location": "upper-left",
  "form": "three enlarging boxes",
  "sizes": [
    "compact",
    "single",
    "full"
  ],
  "purpose": "Change shell scale without hiding important controls."
}

Doctrine

{
  "wave": "59D",
  "name": "Golden Ratio Layout Tokens and Shell View Modes",
  "principle": "TheoB should use golden-ratio layout helpers and Arena Shell view modes so visual narrative, tab scale, fixed panels, and edge-reveal controls feel intentional and lightweight.",
  "goldenRatioLayoutHelpers": true,
  "visualNarrativeFlowHelpers": true,
  "arenaShellThreeSizeModeControl": true,
  "compactMultiTabMode": true,
  "singleTabShellMode": true,
  "fullShellEdgeRevealMode": true,
  "topBarEdgeRevealSeeded": true,
  "leftToolEdgeRevealSeeded": true,
  "rightPanelTapDragRevealSeeded": true,
  "arenaShellDarkReference": true,
  "vaultUniversalSearchLightReference": true,
  "noDatabase": true,
  "noAuth": true,
  "noBrowserPersistence": true,
  "next": "59E Apply Golden Layout and Shell View Modes to Arena Shell"
}

Arena Shell View Modes Visual Harmony