Media framework

Media Framework

Every INTO Consulting medium starts with the same contract. Do not design from

Every INTO Consulting medium starts with the same contract. Do not design from vibes. Define the surface, then the structure.

Foundation source: use contexts/design-foundations-system.html before medium-specific rules whenever type, spacing, baseline, grid, UI heuristics, reading path, bento layout, or image/text composition is involved.

System Waterfall

Apply media decisions in this order:

Governance: check contexts/update-system.html, updates/update-log.json, and the area cursor before editing.
Foundation: apply contexts/design-foundations-system.html for baseline, rem source rhythm, grid, UI heuristics, reading path, bento, image/text, and button rules.
Tokens and brand systems: use tokens/into-consulting.theme.css and the relevant brand/*.md files for type, layout, buttons, imagery, diagrams, data, logo, and icon behavior.
Brand expression: use brand/brand-expression-system.md and media/brand-asset-suite.md before broad asset-suite, advertising, event, environmental, merchandise, or physical-object work.
Channel data: use data/channels/channel-media-specs.json for verified or brand-defined dimensions, margins, safe areas, and platform constraints.
Target media sheet: use the matching media/*.md file to translate the foundation into medium-specific units and reading behavior.
Template: use the matching templates/ file only as last-mile production guidance.
QA/export: prove the output follows the cascade before handoff.

Lower layers can specialize the layer above them, but they cannot silently override foundation rules. If a platform forces a different unit or geometry, document it as a boundary translation.

1. Media

Name the medium, output size, orientation, and default surface color.

Examples:

Proposal PDF: US Letter portrait, Warm Light.
Google Slides deck: 16:9 landscape, Warm Light or Blueprint Dark.
LinkedIn banner: 1584 x 396, Warm Light.
Instagram square: 1080 x 1080, Warm Light.
Video title card: 1920 x 1080, Blueprint Dark.
Airport advertisement: verified placement size, one claim, one proof, one route.
Event rollup: verified vendor size and bleed, one claim, one support line.
Merchandise object: physical dimensions, production method, material, and mark placement.

2. Margins

Margins are the first brand signal. INTO uses generous, practical margins.

Rules:

Digital margins protect from platform UI.
Print margins protect from trim, binding, and printer limits.
Dense documents may reduce margins inside tables, not on page edges.
Logo clear space never replaces document margin; it sits inside it.

3. Typography Scaling

Scale type to the viewing distance.

Proposal/document: readable at arm’s length.
Deck presentation: readable from a room.
Deck brochure mode: readable as a PDF.
Social: readable on a phone in-feed.
Newsletter: readable inside email clients with font fallback risk.
Video: readable with motion and compression.

Start from the lower end of the type scale. The maximum is a ceiling, not the default. Use brand/typography-spacing-system.md before building decks, browser workshops, reveal.js slides, or major review surfaces.

Rules:

Newsreader is 400 by default and 450 maximum by exception. Do not use heavy bold.
Browser/workshop H1 above 4rem is a defect unless it is a cover, pause, section break, or quote.
Presented slide title above 56pt needs a documented reason.
Increase margin, simplify columns, or split the slide before increasing display scale.
Do not shrink text below the minimum floors in brand/typography-spacing-system.md to make content fit. This is especially important for KPIs, tables, charts, graph labels, annotations, source notes, and footnotes.
Browser-facing type uses rem. Convert to points, pixels, or inches only at the medium boundary.
Every type role should state font, weight, size, line-height, letter spacing, before/after margins, and max measure.
Default letter spacing is 0; no negative tracking. Italics are display exceptions only, never UI/data/body defaults.

4. Spacing

Use the INTO spacing scale, adapted to the medium. Never invent arbitrary spacing when a scale value works.

Baseline:

Micro baseline: 0.25rem for type alignment, icon alignment, and hairline offsets.
Structural baseline: 0.5rem for spacing, gutters, padding, component heights, and grid rhythm.
Spacing should feel exponential: tight attachment, related grouping, evidence handoff, section reset, chapter pause.

Dense surfaces may use the lower half of the scale. Covers, section openers, and social cards use the upper half.

Core text rhythm:

Label to title: 0.75-1rem.
Title to body: 1.25-1.75rem.
Body to action: 1.75-2.25rem.
Body to exhibit: 2-3rem.
Exhibit to source note: 0.75-1rem.
Major section or slide pause: 4-6rem.

Proximity is a content rule. Related items sit closer together; unrelated items move farther apart. Use brand/layout-composition-system.md before building decks, reveal.js slides, workshop screens, or complex review pages. A label that is closer to the wrong object than to its own title is a layout defect.

5. Grid

Every medium must declare:

Columns.
Rows when useful.
Column gap.
Row gap.
Relationship to document margin.
Safe areas or platform UI exclusions.

Grid is not decoration. It decides where text, logo, charts, and images can live.

Browser viewport default:

Mobile: 1 column, 1rem side margin minimum.
Tablet: 6 columns, 1rem gutters, 1.5rem side margin.
Desktop: 12 columns, 1.5rem gutters, 2rem side margin.
Wide desktop: keep max-width caps before widening prose; increase side air before increasing measure.

Max-width defaults:

Reading/app content: around 80rem.
Hybrid review surfaces: around 90rem.
Prose: use character measure, not full-grid width.
Full-width exhibits: tables, charts, screenshots, diagrams, and panoramic evidence only.

6. Line Length And Columns

Limit sentence width wherever the medium allows it. Comfortable line length improves reading speed and makes the system feel more editorial.

Rules:

Use columns to keep prose narrow on slides, social, newsletters, reports, and long browser-readable collateral.
Do not stretch body prose across the full canvas just because the grid has space.
Google Docs final pages are the exception: use page margins, paragraph styles, side notes, and tables rather than forced columns unless the section is an exhibit.
Reader-first slides should use columns before shrinking type.
Slides and reveal.js decks default to one or two columns. Use three columns only for peer items such as agenda lists, compact comparisons, KPI triplets, or shortlist options.

Targets:

Slides and social: 35-52 characters per line.
Browser-readable collateral: 45-58 characters per line.
Print proposals and documents: 60-75 characters per line unless using side notes or exhibits.

7. Editorial Rhythm

Every medium follows the same reading sequence:

label -> pause -> display -> argument -> evidence -> recovery space

Apply the sequence after the medium, size, surface, margin, type, spacing, and grid constraints are known.

Rules:

Eyebrows, kickers, section IDs, and figure labels need visible air before the display text that follows.
Display headings should be capped for the medium. They lead the page, slide, frame, or post without overpowering the argument.
Cards, boxes, tables, grids, frames, examples, charts, and screenshots need recovery space after themselves before the next prose block.
Wide evidence gets a full row, full-width treatment, or deliberate exhibit area. Do not squeeze wide tables, screenshots, charts, or deck examples into equal grid slots when the format needs more room.
Medium units change at the boundary: rem in browser review files, points in Docs, points or pixels in Slides, inches in print.

8. Layout System

Choose the layout based on communication intent:

Claim: one dominant sentence, one proof point.
Evidence: chart/table/screenshot first, caption second.
Narrative: section marker, headline, narrow body column, exhibit.
Comparison: two columns, same baseline, no decorative color split.
Process: horizontal or vertical sequence with explicit time/phase labels.
Decision: recommendation, tradeoffs, next action.
Commercial: scope, price, timeline, acceptance path.

Executive communication:

Put the conclusion or recommendation up top unless the surface is explicitly a discovery or capture surface.
Remove visible meta commentary. Facilitator notes, script cues, build labels, narration state, and internal mode names belong in notes, drawers, voiceover files, or appendix detail, not the primary content path.
Every visible phrase should help the audience understand what changed, why it matters, what decision is needed, what evidence proves it, or what action follows.
Build the dominant visual before expanding prose on analytical surfaces.
Use open columns without boxes when related content needs side-by-side structure but not individual card inspection.
Use at most one left accent rail in a normal section or slide. Repeated vertical borders turn signal into decoration.
Use governed title and section backgrounds only for mode shifts: Warm Light for reading, Blueprint Dark for cover/section/focus/dramatic moments, editorial gradients for title or atmospheric pauses, and photo overlays only when contrast is proven.
Choose the reading path: F-pattern for dense scan-first lists only, Z-pattern for sparse cover or decision screens, and vertical/layer-cake scanning for mobile, documents, long review pages, and operational UIs.
Use usability heuristics as gates: status visibility, real-world language, user control, consistency, error prevention, recognition over recall, efficient repeated-work controls, minimalist focus, recovery, and useful help.
Apply Miller/chunking as grouping guidance: roughly three to six meaningful chunks when recall is required; do not blindly cap menus at seven when recognition and structure are available.

Containment ladder:

Default to no box. Use typography, spacing, and alignment first.
Use hairlines when related items need separation without enclosure.
Use tables, charts, screenshots, and full-width exhibits when evidence needs structure or space.
Use cards only for discrete peer items, metrics, examples, decisions, routes, tools, or agent rules.
Avoid bento-style grids unless every card is a comparable peer or there is one dominant module with supporting modules. Reject decorative dashboard walls, nested cards, and equal-weight clutter.

9. Data Display

Use brand/data-visualization-system.md for chart, Gantt, infographic, and schematic box-layout rules.

Every metric, table, and chart starts with the conclusion.

Metrics:

State the value, unit, period, source, prior-period delta, and cause or implication.
Use ⏶ for upward numeric movement and ⏷ for downward numeric movement. Color and copy explain whether the movement is favorable.
Use percentage points for percent-to-percent movement.
Use ISO currency codes when currencies mix or when a commercial document needs precision.

Tables:

Declare title, description, header row, optional header column, alternating row shading, sum column, sum row, notes, and recovery space.
Invoice and proposal tables must expose arithmetic instead of explaining it only in prose.

Charts:

Bar chart: comparison. Start at zero.
Line chart: time. Label the axis range if it does not start at zero.
Pie chart: one simple part-to-whole only.
Gantt chart: schedule, milestones, sequence, and dependencies.
Schematic box layout: architecture, tech-stack, AI workflow, or operating model. Use layers, boxes, verbs, and evidence/governance boundaries.
Gridlines are hairline and functional. Do not add chart chrome.
Chart color defaults to one teal scale and one gray scale.
Saffron #FFC64F is reserved for signal, comparison, warning, or milestone. Do not use brown or muted amber as a secondary chart color.
A chart is invalid until it exposes conclusion, unit, period, population or denominator, source, method or calculation basis, and assumption/caveat when relevant.
Do not make a bar chart from unquantified headlines. Use a table, decision list, or clearly labelled illustrative scale when the data has no numeric basis.

10. Asset Rules

Before placing any asset, decide whether it is:

Identity: logo, mark, lockup.
Evidence: screenshot, chart, metric.
Explanation: diagram, system sketch, schematic box layout.
Editorial: oil painting or macro image.

Do not use an editorial asset to solve an evidence problem.

Image/text composition:

Evidence images use captions, source notes, redaction, and hairline framing.
Explanation images keep labels near the object they explain.
Editorial images host text only through negative space, a quiet third, or a separate overlay field.
Never place text over the focal subject.
Captions, cutlines, and source notes stay visually attached to their image.

Identity:

Use the wordmark when the viewer needs brand recognition: covers, title slides, proposal title pages, newsletter headers, and LinkedIn banners.
Use the square mark when space is constrained or the brand is already established: favicon, avatar, slide footer, video corner mark, business-card reverse, and compact document headers.
Use one identity asset per surface. Do not place the square mark beside the wordmark; choose the wordmark for recognition surfaces and the square mark for compact identity slots.
For web, app, and favicon work, use assets/favicon.svg or a required PNG/ICO export from the square mark. Never use a Lucide/Iconify icon, emoji, cropped wordmark, generated app glyph, or petrol-filled mark.
The mark never gets petrol fill, shadows, outlines, or decorative containers.

Brand asset suite:

Use brand/brand-expression-system.md for positioning, brand architecture, creative direction, materiality, and audience perception before producing external assets.
Use media/brand-asset-suite.md for advertising, events, environmental design, merchandise, physical objects, digital backgrounds, lanyards, notebooks, mugs, backpacks, apparel, caps, office signs, office interiors, sales sheets, case studies, and email signatures.
Physical and large-format assets must declare viewing distance, material, production method, vendor specs, identity placement, motif count, and export/contrast checks before design.

Gradients:

Allowed only for covers, title slides, section breaks, video title cards, hero/photo overlays, and atmospheric editorial surfaces.
Not allowed for KPI cards, invoice tables, body document pages, ordinary cards, or charts.
Warm editorial: linear-gradient(135deg, #fbfaf7 0%, #e9efef 58%, #f4f1ea 100%).
Blueprint editorial: linear-gradient(135deg, #0f1518 0%, #142426 58%, #1f2a2e 100%).
Photo overlay: linear-gradient(135deg, rgba(15,21,24,.86) 0%, rgba(15,21,24,.54) 55%, rgba(15,21,24,.22) 100%).

Icons:

Lucide is the primary source.
Iconify is fallback only when Lucide lacks the concept; use monotone currentColor sets and check the license.
Icons support commands, navigation, labels, and diagrams. They do not become decoration.

Buttons:

Primary actions use petrol fill, Lexend 500, Title Case, compact radius, and optional trailing Lucide icon.
Secondary actions use hairline outline or pale surface, not heavy fill.
Quiet actions use text-only or icon plus text.
Glass buttons are reserved for dark/photo editorial surfaces and must use controlled translucency, hairline border, and inset highlight rather than broad frosted chrome.
Icon-only buttons need accessible labels and tooltips.
Split buttons separate the default action from alternate actions.
Destructive, loading, current, pending-approval, and permission-disabled states must be defined when the behavior exists.
Current tabs, slide thumbnails, pager controls, shortlist options, and agenda rows use petrol text, rail, outline, underline, or soft surface before fill. They should not look like extra primary buttons.
Saffron never styles ordinary buttons, selected items, tabs, or CTA labels.
Hover, active, disabled, loading, and focus-visible states must be defined before a button pattern is treated as complete.
No pill buttons unless platform-native. No oversized SaaS CTAs. No all-caps CTA copy.

Photography:

Default: no stock photography.
Macro material abstracts are allowed only when they host text or set an atmospheric editorial surface.
Run the identifiability test. If the subject can be named in one second, it is too literal for a backdrop.
Text over photography requires a contrast-protecting overlay.

Diagrams:

Use three text levels: phase label, structural label, and body/supporting description.
Gridlines are hairline and low opacity; typical charts use 5-7 horizontal gridlines.
Diagram containers need at least 2rem internal desktop padding.
Motion must enact meaning, use cubic-bezier(0.16, 1, 0.3, 1), and respect prefers-reduced-motion.

11. Scheme And Brand Code Check

After choosing the medium, choose the approved color scheme and the minimum number of brand codes needed to clarify the work.

Schemes:

Warm Light for default readable collateral.
Blueprint Dark for title, section, video, and high-contrast editorial moments.
Chart/data for evidence surfaces: teal answer, gray context, Saffron signal only, with green/red reserved for semantic deltas.
Photo overlay only when text sits on macro texture or editorial photography.
Editorial gradient only for atmospheric cover, section, hero, or video surfaces.

Brand codes:

Petrol signal.
Hairline rules.
Mono section markers.
Square mark geometry.
Four-point star and thick circle devices.
Narrow editorial columns.
Macro material texture.
Evidence-first tables and charts.
Precision motion.

Use one to three brand codes on a typical surface. If a code does not reinforce meaning, hierarchy, or recognition, leave it out.

The four-point star is the north-star/AI cue. The thick circle frames or highlights one key idea. Do not use either as bullets.

12. Template Governance

Recurring media should become templates. A template defines:

Surface and approved scheme.
Size, orientation, margins, and safe areas.
Typography scale.
Spacing scale.
Grid columns, rows, gutters, and margin relationship.
Layout system and allowed archetypes.
Logo/mark, imagery, chart, table, and diagram behavior.
Export checks.

Deck templates should use master layouts for cover, section break, agenda, quote, evidence/table, KPI, chart, Gantt, Q&A, thank-you, and appendix.

Proposal and SOW templates should define page setup, paragraph styles, headers/footers, section order, table styles, and PDF/print export checks.

Web-app and platform templates should define shell, top nav, sidebar, command bar, page header, dashboard, table, form, drawer, modal, AI workspace, state, settings/admin, and responsive behavior before product screens are built. AI software platform templates should additionally use brand/ai-software-platform-system.md for component families, AI-native approval/evidence/prompt/versioning patterns, project/social/video reference screens, React/Tailwind/shadcn implementation guidance, and design QA.

Do not solve repeated media by styling every page or slide from scratch.