Design Foundations System

Foundations Before Surface Styling

Every INTO output should start with baseline, type, spacing, grid, surface, reading path, and usability behavior before color, cards, or visual flourishes are chosen.

This file is the routing layer for cross-medium design laws. Medium files still own exact dimensions and export constraints, but they should inherit this baseline and usability contract.

The System Cascades Before It Specializes

Every medium inherits the same foundation contract, then translates it once at the medium boundary.

1. Governance: read the update ledger and canonical route before changing the workstream.
2. Foundation: apply baseline, rem type, spacing, grid, surface, reading path, usability, bento, image/text, and button rules from this file.
3. Tokens: use tokens/into-consulting.theme.css for browser-facing values and preserve token names.
4. Brand systems: apply the relevant type, layout, button, image, photo, data, diagram, logo, and icon files.
5. Media framework: use media/media-framework.md for the universal medium contract.
6. Brand expression: use brand/brand-expression-system.md and media/brand-asset-suite.md when broad external assets, advertising, events, environments, merchandise, or physical objects are involved.
7. Channel data: use data/channels/channel-media-specs.json for platform dimensions, safe areas, and verification status.
8. Media sheet: apply the target media/*.md file as the medium-specific translation layer.
9. Template: use the matching templates/ file only as last-mile implementation guidance.
10. QA/export: prove the output follows the cascade before publishing, exporting, or handing off.

Brand Asset Proposals Must Be Visible In Context

The full INTO brand asset proposal is now routed as a hybrid-review artifact at outputs/into-brand-asset-proposal.html. Agents should not rely on markdown-only guidance when creating broad asset suites.

Use this gate when an output spans software, documents, print, advertising, events, social, environments, physical objects, merchandise, or image generation. The proposal can demonstrate the system, but the source rules still live upstream in the foundations, brand expression, media framework, channel data, and target media sheets.

Baseline Rhythm Is The Hidden Grid

Baselines keep type, spacing, buttons, charts, captions, and image edges feeling related even when a composition is asymmetric.

• Line-height, margin, padding, gutter, and component heights should land on a 0.25rem or 0.5rem multiple.
• Use the 0.25rem baseline to align text and icons; use the 0.5rem baseline for layout spacing.
• If a gap falls between tokens, choose the nearest token and adjust copy or grouping before inventing a new value.
• Do not use baseline overlays as decoration. They are construction tools, not visible brand elements.

Type Specs Use rem In Browser Surfaces

Browser, app, workshop, and hybrid review typography uses rem. Convert to points, pixels, or inches only at the medium boundary.

• Default letter spacing is 0. Do not use negative tracking.
• Mono markers get their rhythm from uppercase content, separators, and placement, not extra tracking by default.
• Newsreader display classes are for covers, H1s, section breaks, quotes, major numerals, and editorial title moments.
• Italics are allowed only for one short heading phrase, an editorial contrast, or quotation-like emphasis. Never use italics in buttons, UI labels, data labels, or body emphasis.

Use An Exponential Spacing Scale

The spacing scale grows from tight attachment to major editorial pauses. It should feel exponential in use, even where practical mid-steps are present.

• Small gaps attach related content. Large gaps separate decisions, chapters, or modes.
• Heading margins are asymmetric: smaller after-gap, larger before-gap when starting a new section.
• Do not use spacing to center decorative emptiness. Use it to clarify relationship, reading path, or pause.

Grid Protects Reading, Not Decoration

Every medium declares columns, gutters, rows when useful, max width, side margins, and safe areas before composition begins.

• Use one or two columns first. Three columns are only for peer items, compact comparisons, agenda lists, KPI triplets, or shortlist options.
• Full-width exhibits are for tables, charts, screenshots, diagrams, panoramic evidence, and operating surfaces that need width.
• Body prose does not stretch to fill a 12-column grid. It stays in a readable measure.
• Margins are outside the grid. Gutters are inside the grid. Padding belongs to components and should not replace page margin.

Backgrounds Are Mode Shifts

Warm Light is the default reading and working surface. Blueprint Dark is a deliberate focus, command, title, section, or dramatic conclusion surface.

Color Usage Is Assigned By Element

Color is not a mood layer. Each color token has a job tied to an element, state, or evidence role.

• Use token names in production work. Raw hex appears here only to define the canonical surface colors.
• Never use color as the only carrier of meaning. Pair state color with labels, icon labels, captions, or source notes.
• Do not create new color combinations at the template layer. Add or change color roles only in the token and brand-system layer.

Motion Enacts Meaning

Motion confirms state, reveals causality, communicates focus, and clarifies sequence. If it cannot name that job, omit it.

Depth Is Tactile, Not Decorative

Depth clarifies layer, state, or focus. It does not replace type, spacing, hairlines, or the editorial containment ladder.

Texture Breaks Flatness, Not Legibility

Grain is a surface treatment for atmosphere. It never sits on body text, controls, data marks, or peer cards.

Dark Editorial Covers Are Layered, Not Boxed

Use the dark-editorial cover treatment for hero, cover, section-break, and dramatic conclusion surfaces that need atmosphere while preserving INTO legibility.

Usability Heuristics Are Review Gates

A surface is not brand-compliant if it looks right but fails basic usability, recovery, or comprehension behavior.

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

Choose The Reading Path

Reading patterns are composition decisions. Do not let the audience discover the path by accident.

Bento Layouts Need A Reason

Bento grids are containment systems, not decoration. They are allowed only when the card relationships are clear and the hierarchy is deliberate.

Images Carry Evidence, Explanation, Or Atmosphere

Photography and editorial images should reduce decoding time. They should not narrate the obvious or fight text.

Buttons Use Type, Padding, And State Discipline

Buttons are operational commands. They are not badges, tags, or decorative labels.

• Font: Lexend 500, Title Case labels, concrete verbs.
• Size: compact 2rem, default 2.5rem, touch 2.75rem, large 3rem, icon square at least 2.5rem.
• Padding: horizontal padding must exceed vertical padding; use tokenized padding instead of fixed decorative width.
• Hierarchy: one petrol-filled primary action per surface; supporting actions use secondary or quiet variants.
• Icon-only buttons are only for familiar commands and require accessible labels, tooltips, and visible focus.
• Do not shrink labels below type floors. Shorten copy, split the action, or change layout first.

Original Requirement Coverage

This matrix maps the original operator requirements to the visible HTML section and the machine-readable JSON-LD layer.

Foundation Review Checklist

Use this checklist before a surface moves to medium-specific export review.

1. Baseline, spacing, type, and grid values use tokens or documented medium conversions.
2. Typography uses approved families, weights, line-height, letter spacing, margins, and max measure.
3. Background and text colors use Warm Light or Blueprint Dark token pairings.
4. Chunking, reading path, and layout hierarchy reduce recall and decoding effort.
5. Cards, bento, buttons, and images have a clear communication job.
6. Usability states, accessibility, recovery, and source/caption attachment are visible where needed.