Layout And Composition System

Requirement

INTO Consulting pages, slides, workshop screens, and app-like review surfaces must use hierarchy, proximity, spacing, evidence, and motion to help senior audiences decide faster. The system must prevent meta commentary, decorative complexity, and text-heavy substitutes for clear visual evidence.

Constraints

• INTO Consulting only.
• Use Warm Light and Blueprint Dark only.
• Use Newsreader, Lexend, and IBM Plex Mono only.
• Use petrol for action, current path, selected proof, and measured emphasis.
• Use Saffron only for caution, milestone, comparison, and chart signal.
• Use brand/typography-spacing-system.md for type ceilings and text rhythm.
• Use brand/data-visualization-system.md for charts, Gantt plans, and data exhibits.
• Use brand/diagram-system.md for workflow, system, and explanatory diagrams.
• Use contexts/design-foundations-system.html for baseline rhythm, viewport grids, UI heuristics, reading patterns, bento rules, and editorial image/text composition.
• Use media/decks.md, templates/decks/slide-system.md, and media/interactive-workshops.md for slide and workshop medium rules.

Bet

The useful upgrade is not more visual polish. It is a composition discipline that forces every surface to declare the decision, group related things close together, remove audience-useless commentary, and choose visuals before prose. This costs more editorial judgment and QA, but it makes decks, reveal.js slides, and workshops calmer, more executive, and more repeatable.

Failure Modes

• A slide looks designed but does not tell an executive what matters.
• Visible copy describes the artifact instead of advancing the argument.
• Related items are scattered and unrelated items are packed together.
• Agents add boxes, badges, chips, labels, and decorative color instead of using spacing and hierarchy.
• Accent rails and left borders are repeated until the page looks like a stack of callouts.
• Background and text colors are guessed instead of using governed title, section, and focus surfaces.
• Charts have headline-like labels without quantified basis, unit, period, source, method, sample, denominator, or assumption.
• Diagrams are made because the page needs decoration, not because a workflow, system, dependency, or decision is easier to understand visually.
• Animation is omitted from interactive presentations when sequencing would clarify evidence, or added as theatre when a static layout is clearer.
• The brand system is referenced but not actually applied to the content job.

Executive Communication Filter

Every visible word must earn its place. For executive workshop and deck audiences, each visible phrase should answer at least one question:

• What changed?
• So what?
• What decision is needed?
• What is the recommendation?
• What evidence proves it?
• What action, owner, route, or date follows?

Move facilitator notes, build labels, internal modes, narration cues, and process commentary into speaker notes, voiceover scripts, facilitator drawers, or appendix detail. Do not put them in the primary slide path unless the room needs them to act.

Rejected visible copy:

• Framing
• Voice status
• AI MC controls
• Workflow Decision Room
• This slide explains...
• Interactive activity surface
• We will now discuss...

Acceptable replacements:

• Choose the operating model before assigning tools.
• Approve the three workflow owners.
• Decision needed today: scope, owner, date.
• Evidence gap: no quantified baseline yet.
• Next action: confirm pilot path by Friday.

Proximity Law

Related things sit closer together. Less related things move farther apart. This is not a taste preference; it is how the audience understands grouping.

Relationship	Default Gap	Rule
Label to its title	0.75-1rem	Tight because the label qualifies the title.
Title to its support line	1.25-1.75rem	Close enough to read as one argument.
Body to action	1.75-2.25rem	Action follows comprehension, not decoration.
Body to exhibit	2-3rem	Evidence is related but needs a visible handoff.
Items inside one peer group	1-1.5rem	Close, aligned, same baseline when possible.
Separate groups on one slide	2.5-4rem	Clear enough that groups do not merge.
Major slide or section pause	4-6rem	Use when the audience should reset.
Chapter or mode transition	6-9rem	Use for cover, section break, or room reset.

Defects:

• A label closer to the wrong object than to its own title.
• A source note visually detached from the chart or table it qualifies.
• Peer items with inconsistent gaps or baselines.
• A primary action closer to a secondary note than to the decision it executes.
• A dense card grid used where spacing, hairlines, or a two-column layout would show relationships more clearly.

Hierarchy Ladder

Build hierarchy in this order:

1. Audience decision.
2. Conclusion or recommendation.
3. Implication for the audience.
4. Dominant evidence object.
5. Source, method, assumption, or caveat.
6. Action, owner, date, route, or approval path.
7. Appendix or facilitator detail.

Do not start from decorative layout, animation, or component choice. If the decision and conclusion are unknown, create a discovery or evidence-gathering surface rather than pretending a decision slide exists.

Layout Defaults

• Use one or two columns first.
• Use three columns only for peer lists, compact comparisons, KPI triplets, or shortlist options.
• Four-column body slides fail review.
• Browser surfaces use the viewport grid: mobile one column with at least 1rem side margin; tablet 6 columns with 1rem gutters and 1.5rem side margin; desktop 12 columns with 1.5rem gutters and 2rem side margin; wide desktop keeps max-width caps before widening prose.
• Reading-shaped browser pages cap content around 80rem; hybrid review pages cap around 90rem; prose still stays in character-based measures.
• Give the dominant evidence object a full row or full-width exhibit when it needs room.
• Keep body prose narrow enough to read: 35-52 characters per line on slides and 45-58 characters per line on browser-readable collateral.
• Use the editorial containment ladder before boxing: no box, hairline, full-width exhibit, then card only for discrete peer evidence.
• If a slide feels crowded, remove copy, split the slide, restore margins, or choose a simpler visual before shrinking type or adding columns.

Open Column Pattern

The system should prefer open columns when the content is related but does not need individual inspection as cards.

Use open columns for:

• Two-part executive arguments.
• Recommendation plus proof.
• Paired tradeoffs.
• Before/after implications.
• Short lists of related principles.
• Workshop instruction plus activity rule.

Rules:

• No enclosing card by default.
• Align column starts.
• Use a shared title or conclusion above the columns.
• Use 2-3rem column gap on browser review surfaces; translate that rhythm to slide coordinates for Google Slides.
• Use hairlines only when the reader needs comparison structure.
• Do not add background fills just to make columns feel designed.

Reading Path Patterns

Choose the reading path deliberately.

Pattern	Use	Rule
F-pattern	Dense scan-first lists and pages where users compare many left-aligned starts.	Treat accidental F-pattern scanning as a failure mode for unstructured prose. Use headings, chunks, captions, and strong left anchors to make scanning useful.
Z-pattern	Sparse cover, decision, or campaign surfaces with few elements.	Use only when top-left identity/context, central claim, and bottom-right action create a clear path.
Vertical / layer-cake	Mobile, docs, long review pages, operational UIs, and evidence-heavy content.	Default to stacked section marker, conclusion title, narrow body, exhibit, caption/source, and action or recovery space.

Do not make every surface centered. Centered composition is reserved for title, cover, quote, and room-reset moments with low information density.

Bento Pattern

Bento layouts are containment systems, not decoration.

Use bento only when:

• The modules are comparable peer items, or one dominant module has two to four supporting modules that clarify the same decision.
• The lead module is obvious.
• Gutters and baselines are shared.
• The mobile stack preserves the intended reading order.

Reject bento when:

• Cards are unrelated fragments.
• Every module has equal visual weight.
• The layout creates a decorative dashboard wall.
• Cards are nested inside other cards.
• A table, open-column comparison, full-width exhibit, or staged narrative would explain the relationship better.

UI Heuristic Gate

App-like, interactive, and review surfaces must pass these gates before visual approval:

• Status is visible for loading, saving, error, success, sync, and permission states.
• Language matches operator vocabulary, not internal implementation labels.
• Users can cancel, undo, close, go back, review, or recover from consequential actions.
• Components use consistent anatomy, state names, token values, and behaviors.
• Error prevention appears before error recovery when a prerequisite is known.
• Recognition is preferred over recall: choices, context, evidence, and current state stay visible.
• Repeated work earns shortcuts, filters, command surfaces, bulk actions, and reusable defaults.
• Minimalism removes decorative badges, panels, icons, and labels that do not change the decision.
• Recovery messages name the object, issue, cause when known, and next action.
• Help text, examples, and tooltips clarify unfamiliar controls or consequences rather than explaining obvious UI.

Use Miller’s Law as a chunking principle, not a hard menu limit. When recall is required, group roughly three to six meaningful chunks. When recognition is available, labels and structure matter more than an arbitrary count.

Accent Rail Rule

Left rails and vertical borders are signal, not decoration.

• Use at most one accent rail in a normal slide, page section, or app panel.
• Use petrol rails for current path, selected proof, or the one item requiring attention.
• Use neutral hairline rails for quiet grouping when spacing alone is not enough.
• Do not use Saffron rails unless the item is a caution, milestone, or comparison signal.
• Do not put a rail on every paragraph, card, quote, or list item.
• A rail should be 0.125-0.1875rem, aligned to the related group, and paired with enough padding that the text does not cling to it.

If more than one rail seems necessary, the composition probably needs a table, two-column comparison, decision list, or section split.

Title And Section Backgrounds

Backgrounds are mode shifts. Use them to create recognition, pause, drama, or contrast, not to decorate routine content.

Allowed backgrounds:

Surface	Use	Text Color
Warm Light #fbfaf7	Default reading, working slides, tables, charts, forms, proposals, newsletters, and app surfaces.	--into-text-primary and --into-text-secondary.
Blueprint Dark #0f1518	Covers, title cards, section breaks, command/focus moments, dramatic conclusions, and room resets.	--into-text-primary under Blueprint tokens or --into-text-inverse when applied as overlay text.
Warm editorial gradient	Cover, title, section, video title, or atmospheric pause only.	Primary ink; check contrast on all text.
Blueprint editorial gradient	High-contrast cover, section, quote, or dramatic decision moment.	Light text through Blueprint tokens.
Photo overlay	Macro/photo title or section surface only.	Light text on the canonical overlay with proven contrast.

Rules:

• Do not put normal body sections on dramatic backgrounds.
• Do not mix several background treatments in one short sequence.
• A section background should carry a title, short transition sentence, or conclusion, not a dense paragraph.
• Charts, KPI cards, ordinary tables, and routine evidence stay on Warm Light unless a specific contrast reason is documented.
• If the background changes, the text color must change through the theme tokens, not a guessed hex value.

Visual-First Evidence Rule

Before writing paragraphs, ask which visual would reduce executive decoding time. Text-only is allowed only when the point is a quote, legal notice, definition, or concise recommendation that does not need structure.

Images must be assigned a role before placement:

• Evidence image: screenshot, client artifact, product state, or source object. Use captions, source notes, redaction, and hairline framing.
• Explanation image: diagram, schematic, technical sketch, or sequence. Place labels near the object they explain.
• Editorial image: macro material texture, atmospheric divider, or conceptual image. It hosts text only when contrast and focus are controlled.

Text should sit on negative space, a quiet third, or a separate column. Do not place text over the focal subject. Captions and source notes stay attached to their image or exhibit.

Default visual choices:

Communication Job	Preferred Visual
Compare options	Two-column comparison, criteria table, or horizontal bar.
Show movement over time	Line chart, Gantt plan, timeline, or bridge.
Show responsibility	Owner/action/date strip or role matrix.
Show workflow	Schematic box layout, swimlane, or sequence diagram.
Show architecture	Schematic box layout with user, orchestration, and governance layers.
Show prioritization	Two-axis board only when both axes are explicit and useful.
Show evidence from a product	Screenshot with direct labels and source/context.
Show commercial terms	Table with assumptions, totals, and approval context.
Show uncertainty	Known / assumed / missing / next board.

An analytical slide should have one dominant exhibit. If no useful visual can be named, the slide should probably be a recommendation, question, or appendix note, not an analytical slide.

Chart Validity Gate

A chart is invalid until these are visible or intentionally declared in a note:

• Conclusion title.
• Unit.
• Period.
• Population or denominator.
• Source.
• Method or basis of calculation.
• Sample, assumption, or caveat when relevant.
• Axis range and zero exception when relevant.
• Direct labels or clearly necessary legend.

Do not create a bar chart from unquantified headlines. If the basis is qualitative, use a ranked evidence table, confidence scale with method note, or plain decision list. If the values are illustrative, label them as illustrative and state the assumption.

Diagram Validity Gate

A diagram is valid only when it explains a system, workflow, sequence, dependency, decision path, architecture, ownership model, or evidence chain.

Required:

• Purpose stated in the slide title or lead.
• Nodes grouped by real relationship.
• Direction or sequence visible.
• Connectors labelled when the verb is not obvious.
• Three text levels: phase/layer label, structural label, supporting detail.
• Source, assumption, or provenance when the diagram claims external fact.
• Static export readability.

If the same content reads better as a two-column explanation or table, do not force a diagram.

Motion Decision Gate

Motion is part of composition when the medium is interactive or presented. It should clarify hierarchy, sequence, causality, progress, state change, or decision lock-in.

Allowed jobs:

• Reveal evidence in the same order the argument uses it.
• Draw a timeline, Gantt, or chart path to show sequence.
• Stage a schematic path so the audience follows cause and effect.
• Settle AI-generated output into a review or approval state.
• Open drawers, sheets, command palettes, or export panels.
• Confirm a decision lock-in.

Rules:

• CSS owns routine hover, focus, active, and button feedback.
• GSAP, reveal.js fragments, anime.js, or D3 motion must end in a readable static state.
• prefers-reduced-motion must land on the final readable state.
• Never animate source notes, legal terms, decisions, or caveats out of view.
• If no animation is used in a presented or interactive artifact, document why static sequencing is clearer.

Composition Gate

Before a page, slide, or workshop screen is considered ready:

• The audience and decision are named.
• The conclusion is visible near the top or the screen is explicitly a discovery/capture surface.
• Visible copy passes the executive communication filter.
• Related items are closer together than unrelated items.
• The layout uses one or two columns unless peer content justifies more.
• The viewport grid, max width, side margins, and gutter rules are declared.
• The dominant visual has been chosen before prose expansion.
• The reading path is deliberate: F-pattern, Z-pattern, or vertical/layer-cake.
• Bento is used only when the content relationship justifies it.
• UI heuristics pass where the surface is interactive, app-like, or operational.
• Charts pass the chart validity gate.
• Diagrams pass the diagram validity gate.
• Minimum text floors from brand/typography-spacing-system.md are honored.
• Accent rails are scarce and purposeful.
• Title or section backgrounds use the allowed surface/text pairings.
• Source, method, assumption, owner, or date is visible where needed.
• Petrol and Saffron are used only for their governed jobs.
• Motion has a declared communication job or is intentionally omitted.
• Speaker notes, facilitator scripts, and internal build labels are not visible as primary content.

Agent Rule

Do not treat the brand system as a palette. Apply it as an editorial operating system: decision first, conclusion up top, related content close together, unrelated content separated, visual evidence before prose, quantified charts, purposeful diagrams, governed motion, and no visible meta commentary.