Blueprint Dark
Command, review, title, and focus moments.
INTO Consulting / Brand System / Hybrid Context
INTO Consulting Brand Book
A desktop review document for the INTO Consulting brand system. The visible layer is written for human design feedback; the JSON-LD layer is written for LLMs and agents reading the repo.
example-brand-book-hero-proof
Identity system first. Specification second.
The brand book must let a reviewer see the system before they read every rule: wordmark, square mark, modes, type, signals, documents, decks, social, and product surfaces working as one operating language.
Warm Light default
Blueprint Dark focus
Petrol signal
Saffron caution
Operating Intelligence
Blueprint Dark
Command, review, title, and focus moments.
Square Mark
Favicon, avatar, compact headers, and footer marks.
What This File Governs
This brand book defines how INTO Consulting shows up across web, proposals, decks, documents, invoices, social, newsletter, print, video, software, advertising, events, physical objects, and environmental surfaces.
It is not a generic INTO group system. It is not a website-only style guide. It is the top-level context file for INTO Consulting collateral and for agents generating brand-compliant material from this repository.
Source-Of-Truth Route
An agent should read this file first for brand posture, then route to the relevant media file for exact size, margin, grid, and export constraints.
Brand Book
Foundations
Media Contract
Template
QA Export
Airy Editorial, Strong Hierarchy
The system should feel quiet, spacious, and deliberate. White space is not empty space; it is the frame that lets evidence read.
example-editorial-containment-proof
No Box
Claim
Hairline
Evidence Group
Exhibit
Decision Surface
Card
Peer Item
Use type and space when the content belongs to the same argument.
Use a rule when related items need a visible pause.
Use a full-width figure when the evidence needs inspection.
Use a card only for repeated, comparable items.
Do
Let one claim, one exhibit, or one decision dominate the surface.
Do Not
Use badges, pills, shadows, or color chips to simulate structure.
Density Rule
Dense content is allowed when it is a table, schedule, figure, or decision record. Dense chrome is not allowed. The work can be compact; the page should still breathe.
Pacing Is The System
Every INTO surface should move through label, pause, display, argument, evidence, and recovery space.
Label
Orient the reader with a quiet mono marker, kicker, section ID, or figure label.
Pause
Let the label breathe before the main display. The eyebrow never touches the heading.
Display
Use a capped Newsreader moment that leads the page without taking over the page.
Argument
Move into a narrow lead or body column that explains what the reader should conclude.
Evidence
Show the table, card, screenshot, chart, example, or commercial detail that proves the claim.
Recovery
Create space after the evidence before asking the next sentence to do work.
Label Pause
Eyebrows, kickers, section IDs, and figure labels never sit tight against display text. Use the shared label gap before headings.
Display Ceiling
Display headings should lead, not dominate. Browser review surfaces cap cover and hero type at the documented display ceiling.
Evidence Recovery
Cards, boxes, tables, grids, examples, and frames always create bottom spacing before the next prose block.
Wide Evidence
Wide evidence gets its own row or full-width treatment. Do not squeeze deck frames, charts, tables, or screenshots into symmetrical grids when their shape needs more room.
Agent Rule
Before generating collateral, route the medium, then apply the rhythm sequence: label, pause, display, argument, evidence, recovery space. Medium specs can change the units, not the sequence.
Baselines, Grids, And Usability Are Brand Rules
The brand system now treats baseline rhythm, rem type, the media waterfall, viewport grids, reading patterns, UI heuristics, bento rules, and image/text composition as foundation contracts.
Source
Use contexts/design-foundations-system.html before changing type, spacing, grid, app UI, bento, reading path, or image/text composition rules.
Baseline
Use a 0.25rem micro baseline for type alignment and a 0.5rem structural baseline for spacing, gutters, padding, and controls.
Waterfall
Apply update ledger, foundations, tokens, brand systems, media framework, channel data, target media sheet, target template, and QA/export checks in that order.
Reading
Choose F-pattern, Z-pattern, or vertical/layer-cake scanning deliberately. Dense accidental scanning is a defect.
Usability
Status, recovery, recognition, consistency, error prevention, and minimalist focus are review gates, not optional UI polish.
Agent Rule
Route foundation decisions to contexts/design-foundations-system.html, then apply the media waterfall so templates and channel geometry specialize the system without contradicting it.
Practical AI Systems, Not Theatre
INTO Consulting builds agentic systems inside the tools clients already use. The work starts with a bottleneck, turns into a workflow, and is judged by measured value.
Recognize the bottleneck. Build the workflow. Measure the value.
The brand should feel like the output of a working studio: clear enough to act on, specific enough to trust, and restrained enough to avoid sounding like every other AI vendor.
Unified Parent Logic, Consulting Production Scope
Use brand/brand-expression-system.md before broad asset-suite, parent/sub-brand, advertising, event, environmental, merchandise, or physical-object work.
This repo remains the canonical production source for INTO Consulting. It can describe the relationship to the wider INTO company so agents do not blur scopes, but it does not define production-ready INTO Hospitality or INTO Group assets without a separate decision.
example-brand-architecture-map
Parent Logic
INTO Group
Production Scope
INTO Consulting
Guarded Variant
INTO Hospitality
Practical AI operations across connected businesses.
Canonical rules here: implementation, workflow systems, copilots, agents, and AI-enabled operations.
Related business, separate production decisions. Do not inherit Consulting assets by default.
INTO Group
Parent idea: practical AI operations across connected businesses. Production parent-brand assets need their own approved source.
INTO Consulting
Canonical scope here: AI implementation, workflow automation, internal copilots, agents, agentic systems, and AI-enabled operations.
INTO Hospitality
May share parent principles, but must not inherit Consulting production rules without a new decision.
Asset Suites
Advertising, events, office signs, environments, merchandise, wallpapers, and broad physical assets route through media/brand-asset-suite.md.
Full Asset Proposal Is Now A Routed Review Artifact
The first complete INTO brand asset proposal lives at outputs/into-brand-asset-proposal.html. It is an executive HTML artifact with visible mockups, copy guidance, governance, QA, and a JSON-LD image generation manifest.
The proposal does not replace the source system. Future asset work still starts with the update ledger, this brand book, contexts/design-foundations-system.html, brand/brand-expression-system.md, media/brand-asset-suite.md, channel data, target media sheets, templates, and export checks.
example-brand-asset-readiness-board
Identity
Ready
Mockups
30 visible assets
Prompts
Traceable
Boundary
Consulting first
Logo, modes, tokens, type, and brand codes route to source files.
Stationery, advertising, event, object, product, and environment proofs.
Image slots, filenames, alt text, and JSON-LD prompts map cleanly.
Group and Hospitality variants stay governed, not production-default.
Creative Direction
Operating Intelligence, supported by Material Calm: show workflow, decision, evidence, approval, and measured value.
Visible Scope
Thirty HTML/CSS mockups covering stationery, advertising, events, documents, merchandise, environments, digital surfaces, social, and product frames.
Image Generation
Each major visual has a JSON-LD ImageObject with asset type, filename, ratio, prompt, negative prompt, caption, and alt text.
Boundary
INTO Group and INTO Hospitality appear only as governed variants. Production assets for either need a separate decision and source of truth.
Asset-family implementation table
| Family | Assets Covered | Context Rule |
|---|---|---|
| Stationery and documents | Business card, document, letter, invoice, proposal cover, case study, sales sheet, onboarding packet. | Use Warm Light, strong margins, readable tables, clear source notes, and print-safe hierarchy. |
| Advertising and social | Airport ad, bus shelter ad, LinkedIn banner, social post. | Use one operational claim, one proof line, one route, and platform-safe crops. |
| Events and environment | Rollup, booth, lanyard, badge, office sign, office interior, video background. | Treat space as orientation and evidence, not slogan wallpaper or logo repetition. |
| Objects and merchandise | Notebook, mug, backpack, T shirt, cap, stickers, phone and desktop backgrounds. | Useful object first, small identity, good materials, no novelty AI graphics or logo slaps. |
| Digital product proof | Presentation cover and product screenshot frame. | Show credible workflow state, approval, evidence, and owner/action context before decoration. |
Agent Rule
When asked to create or extend the full asset proposal, load the routed HTML artifact for visible output structure, then use the canonical source files to make any foundation changes. Do not edit the output artifact as the only source of truth when a rule belongs upstream.
Competent, Poised, Efficient
The reader is treated as a peer. The writing is direct, concrete, and calm.
Rules
- Short sentences first.
- Concrete numbers over adjectives.
- Title Case for headlines, card titles, slide titles, and CTA buttons.
- Sentence case for body, notes, captions, and long-form prose.
- Mono uppercase for labels and section markers.
Forbidden Vocabulary
transform, unlock, leverage, synergy, supercharge, next-gen, powered by AI, we believe, we think, and vague metrics like increase efficiency by up to X%.
CTA Examples
Use concrete CTAs: Book A Working Session, Tell Us What's Slow, Bring Us A Workflow. Avoid empty CTAs like Get Started or Learn More.
Conclusion Up Top
INTO writing should answer the reader's next question before they ask it. The point is visible immediately; the evidence follows.
Conclusion First
Lead with the answer, recommendation, change, or decision. Do not make a client open the attachment to find the point.
Anticipate
Include the delta, assumption, cause, owner, deadline, or next action that the reader is likely to ask for next.
Simple Words
Use short words, short sentences, and short paragraphs. Remove jargon unless it is the client's exact operating language.
Fast Acknowledge
When action is underway, acknowledge quickly with owner and timing: Received. Working now; will revert by 2:30pm.
No Good
Hi, just wanted to follow up on the model and see what you think when you get a chance.
Good
Updated LBO model attached. Key change: lower exit multiple, 9.0x vs. 9.5x. IRR is now approximately 18%.
Agent Rule
For emails, proposals, status notes, and executive summaries, write the conclusion first, then the changed assumption, then the implication, then the next action.
Two Modes, One Accent Discipline
Warm Light is the default. Blueprint Dark is the dark surface. Petrol is for action, signal, and measured emphasis, not decoration.
example-color-proof-board
Warm Light / default
Proposal Summary
Blueprint Dark / focus
Review Mode
Semantic signal
Saffron marks caution.
Primary ink on Warm Light, raised evidence, petrol action rail.
Dark surfaces are command, title, review, and focus contexts.
Use for milestone, warning, comparison, and chart signal only.
Warm Light Page
#fbfaf7
Primary Ink
#1a1a1a
Petrol Accent
#1a4a4d
Blueprint Page
#0f1518
Blueprint Accent
#4fb5b8
Hairline
#c8c4b8
Raised Surface
#f4f1ea
Chart Teal
#2d6669
Chart Gray
#5f625e
Saffron Signal
#FFC64F
Positive
#247A5A
Critical
#B94335
Saffron Soft
#FFF1C7
Accent Pastel
#D9EEEE
Agent Rule
Use tokens/into-consulting.theme.css. Do not revive Mineral or Studio. Do not invent new accent colors to solve layout problems.
Use Schemes, Not Color Combos
Color governance controls relationships. Do not invent combinations when the surface already has an approved scheme.
Warm Light
Use for default documents, proposals, decks, newsletters, social posts, invoices, and readable browser surfaces.
Blueprint Dark
Use for title cards, section breaks, video title cards, dark editorial surfaces, and high-contrast moments.
Chart Data
Use teal for the answer, gray for context, Saffron for signal, and red/green only for semantic deltas.
Photo Overlay
Use the dark overlay gradient when text sits on macro texture or editorial photography. Contrast is mandatory.
Editorial Gradient
Use only for cover, title, section, hero/photo overlay, video title, and atmospheric editorial surfaces.
Avoid
No mixed accent stacks, low-contrast text on photos, petrol body copy, chart gradients, or brown secondary systems.
Typography
Body text stays primary ink on Warm Light or light text on Blueprint Dark. Petrol does not become body copy.
Signal
Petrol is for action, active state, selected state, primary data series, and measured emphasis.
Chart Signal
Saffron is chart and milestone signal only. It is not a second brand accent for layouts, cards, or buttons.
Items
Selected tabs, slide thumbnails, agenda rows, and list items use petrol text, rail, underline, outline, or soft surface before fill.
Buttons
The primary button is the normal petrol fill. Nearby items should not compete with it or look like extra CTAs.
Forbidden Combos
Do not combine gradients, petrol fills, photo overlays, and KPI/table surfaces into one decorative treatment.
Agent Rule
Select one approved color scheme for the medium before choosing components. If the scheme does not fit, change the layout or surface, not the palette.
Gradients Are Editorial Surfaces
Gradients are allowed when the surface needs atmosphere, pacing, or photo legibility. They are not a general styling shortcut.
linear-gradient(135deg, #fbfaf7 0%, #e9efef 58%, #f4f1ea 100%)
linear-gradient(135deg, #0f1518 0%, #142426 58%, #1f2a2e 100%)
linear-gradient(135deg, rgba(15,21,24,.86) 0%, rgba(15,21,24,.54) 55%, rgba(15,21,24,.22) 100%)
Allowed
Covers, title slides, section breaks, video title cards, hero/photo overlays, and atmospheric editorial surfaces.
Not Allowed
KPI cards, invoice tables, body document pages, ordinary cards, or charts.
Agent Rule
Use the exact starting gradients from the token file. Do not generate new gradients for routine UI or evidence blocks.
Motion And Depth Stay Governed
Motion, glass, and grain are part of the brand expression only when they clarify state, focus, atmosphere, or sequence.
Motion
Use brand/motion-system.md and the --into-motion-* tokens. Header enters before body, evidence follows the claim, and reduced motion preserves state feedback without choreography.
Depth
Use brand/depth-and-glass-system.md. Start with no box, then hairline, then exhibit, then card only for peer evidence. Glass is dark/photo/focus only and requires an inset highlight.
Texture
Use brand/texture-system.md. Static grain belongs on broad colored surfaces; baked-in grain belongs on atmospheric macro photography; animated grain is reserved for hero, cover, video, or dramatic conclusion surfaces.
| Specimen | Correct INTO Behavior | Reject |
|---|---|---|
| Hero entrance | Label and title settle with --into-motion-considered, body follows, CTA appears last. |
Looping ambient movement, bouncing, or repeating entrance on scroll. |
| Blueprint command glass | Translucent dark surface, blur, hairline border, and inset highlight over a focused command layer. | Broad frosted panels on routine Warm Light work surfaces. |
| Macro photo cover | Photo has baked-in grain, dark teal overlay protects text, optional canvas grain stops for reduced motion. | Text over focal subject, runtime grain on body copy, or grain on data marks. |
| Specimen | Canonical Behavior | Reject |
|---|---|---|
| Shallow-DOF macro hero | Material subject, most of the frame out of focus, small decentered focus zone, petrol/teal shadows, no pure black, protected text zone. | Stock hero photo, literal product image, warm brass/gold/amber highlights, or text over focal detail. |
| Glass button default and hover | btn-glass uses blur/saturation, 0.06 surface, 0.13 border, inset highlight, and hover moves only to 0.11/0.22 with named motion tokens. |
Frosted button without highlight, glow, heavy shadow, glass on Warm Light documents, or glass in dense UI. |
| Dark-editorial cover | Layer order is deep editorial base, macro image, optional CSS bokeh backstop, gradient overlay, governed grain, then content. | Floating dark card as the main hero, unprotected text, generic AI backdrop, or ad hoc blur values. |
| Process timeline on dark | Deep teal base, off-white title, body at restrained opacity, petrol bars or phase labels, quiet week markers, and full-width exhibit spacing. | Embedded spreadsheet look, Saffron as decoration, boxed card clutter, or timeline bars without readable labels. |
| Nav glass on scroll | Heavier blur range only over photographic hero, near-black teal translucent surface, readable links, visible focus, and a stop before light sections. | Default glass app shell, unreadable nav over focal imagery, or sticky frosted SaaS chrome on every surface. |
Agent Rule
If motion, depth, or grain does not clarify state, focus, atmosphere, sequence, or text legibility, leave the surface still and flat.
Three Faces, No Fourth
Typography carries hierarchy. Use the low end first; the maximum is a ceiling, not the default.
example-type-proof-board
Newsreader / display
Operating Intelligence
Lexend / body
IBM Plex Mono / system
Readable working prose explains the decision, the evidence, and the next action without theatrics.
FIG. 006 / APPROVAL QUEUE / SOURCE READY
Newsreader
The Work Speaks First.
Lexend
Body copy should feel calm and readable, with enough space to make the reader trust the material.
IBM Plex Mono
0 6 / T Y P E · FIG. 001 · VALUE DELTA
- Newsreader: headlines, editorial moments, quotes, title slides, proposal covers, major numerals. Default weight is 400; 450 is the maximum exception.
- Lexend: body, buttons, document text, and labels that should disappear into the surface. Body copy defaults to Lexend Light / 300; buttons use 500.
- IBM Plex Mono: section markers, specs, captions, metadata, figure labels, chart labels, IDs, and invoice numbers.
- Do not use 600, 700, or synthetic bold. If hierarchy is unclear, adjust spacing or placement before weight.
Type Has Flow Rules
Use rem for browser and review-layer typography. Convert only at the medium boundary: points for Google Docs, points or pixels for Google Slides, inches for print geometry.
example-type-flow-summary
Label
Display
Lead copy stays narrow enough to read quickly.
FIGURE / SOURCE / STATE
Type scale implementation table
| Role | Family / Weight | Size | Line | Flow Spacing |
|---|---|---|---|---|
| Cover / Hero | Newsreader 400 | 3.25-4.5rem | 1.0-1.06 | 0 before, 1.5-2rem after. |
| Section Heading | Newsreader 400 | 2.75-4rem | 1.04-1.1 | 2.5-4rem before, 1.25-1.75rem after. |
| Subheading / Card Title | Newsreader 400 | 1.35-1.65rem | 1.1-1.18 | 2rem before, 1rem after. Inside cards: 0 before. |
| Lead | Lexend 300 | 1.06-1.2rem | 1.48-1.56 | 0 before, 1-1.5rem after. Max 50ch. |
| Body | Lexend 300 | 1rem | 1.55-1.62 | 0 before, 1.25rem after. Max 56ch. |
| Caption / Meta | IBM Plex Mono 500 | 0.68-0.85rem | 1.3-1.45 | 0.75rem before when attached to figures. |
| Defect line | All families | Working H1 above 4rem | Any | Requires documented cover, hero, or section-break reason. |
Cover / Hero
The System Ships.
Section Heading
Evidence Before Decoration
Body
Readable prose stays narrow enough to move quickly through. The system should prefer columns, side notes, and strong hierarchy over stretched lines.
Caption / Meta
Body Floor
Body and explanations stay at least 1rem in browser/app/workshop surfaces, 16pt in reader-first slides, and 20pt in presented slides.
Tables And KPIs
Table cells stay 0.875rem absolute and 1rem preferred in browser/app/workshop surfaces. KPI labels stay 0.8125rem minimum and explanations stay readable.
Charts
Chart labels stay 0.75rem minimum in browser/app/workshop surfaces, 10pt minimum in reader-first slides, and 12pt minimum in presented slides.
Notes
Footnotes and source notes stay 0.6875rem absolute and 0.75rem preferred in browser/app/workshop surfaces. If the note carries source, legal, or commercial meaning, do not make it decorative.
Spacing Is A Register
Use spacing as a scale of editorial emphasis. Small steps attach related objects. Large steps create chapters, pauses, and confidence.
Digital specs should be written in rem. The current token file stores browser-facing values in rem while preserving public token names; use points, pixels, inches, or frame units only at print, slide, video, and social output boundaries.
- Label to title: 0.75-1rem.
- Title to body: 1.25-1.75rem.
- Body to action row: 1.75-2.25rem.
- Body to exhibit: 2-3rem.
- Exhibit to source note: 0.75-1rem.
- Major slide pause: 4-6rem.
space-1
0.25rem
Hairline offsets, tiny icon gaps.
space-2
0.5rem
Tight label relationships.
space-3
0.75rem
Table cells, compact lists.
space-4
1rem
Default small gap.
space-5
1.25rem
Paragraph after-space.
space-6
1.5rem
Related group spacing.
space-8
2rem
Card padding, lead after-space.
space-11
3rem
Exhibit separation.
space-13
4rem
Section inner rhythm.
space-17
7.5rem
Major chapter pause.
Icons Orient, They Do Not Decorate
Lucide is the primary icon source. Iconify is fallback only when Lucide lacks the concept and the license is clear.
- Outline icons only:
currentColor, no fill, rounded caps and joins. - Stroke weight: 1.5-1.75px in digital review contexts.
- Icon color inherits nearby text. Petrol is for active command, selected state, or signal.
- References: Lucide, Iconify, and Iconify icon sets.
Buttons Are Decisive, Not Loud
INTO buttons use compact geometry, Lexend 500, Title Case copy, accessible command states, and a clear action hierarchy.
Primary
Petrol fill, light text, Lexend 500, compact radius, optional trailing Lucide icon.
Secondary
Hairline outline or pale surface. No heavy fill competing with the primary action.
Quiet
Text-only or icon plus text for low-emphasis actions, inline routes, and secondary document flows.
Product States
Icon, split, destructive, loading, current, pending-approval, and permission-disabled states are part of the system when the behavior exists.
Glass
Glass is dark/photo-only: controlled translucent surface, hairline border, inset top highlight, and no broad frosted SaaS chrome.
States
Hover clarifies action, active compresses by 0.0625rem, disabled stays visible, loading prevents duplicate activation, and focus-visible uses a clear ring.
Anatomy
Normal buttons are inline-flex rows with left-aligned labels, text first, and optional trailing icon. Never stack icon over text.
Never
No pill buttons unless platform-native, no oversized SaaS CTAs, no all-caps CTA copy, and no label shrinking below the minimum type floor.
Containment Is Earned
INTO does not box content by default. Use type, spacing, hairlines, and layout first; cards are reserved for discrete evidence or peer items.
- Default to no box. Use typography, spacing, and alignment first.
- Use hairlines for related groups that need separation without enclosure.
- Use full-width exhibits for wide evidence, not symmetrical bento compression.
- Use cards only for discrete peer items, examples, metrics, decisions, routes, tools, or agent rules.
- Do not place cards inside cards.
- Do not use cards to make a page look busy.
- Use color only for meaning: action, signal, mode, or evidence category.
Metrics Need Context
A number is not evidence until the reader knows the period, unit, source, and movement from the prior period.
| Metric Type | Preferred Format | Delta Format | Rule |
|---|---|---|---|
| Currency | $125k, $1.24M, USD $125,000 | ⏶ $18k vs. prior | Use ISO code when currencies mix, when the surface is legal/commercial, or when ambiguity is possible. |
| Percent | 18%, 18.4%, 0.8% | ⏶ 2.1pp vs. prior | Use percentage points for percent-to-percent change. Use percent change only when the base is explicit. |
| Multiple | 9.0x, 10.4x EV/EBITDA | ⏷ 0.5x vs. prior | Always name the multiple and assumption. Do not show a bare x value. |
| Count / Time | 42 tasks, 18d, 3.2h | ⏷ 6d vs. prior | Say whether lower or higher is positive when the direction is not obvious. |
Agent Rule
Every KPI card must include the value, period, unit, prior-period delta, and a cause or implication. Use ⏶ and ⏷ for compact deltas; color and copy explain whether the movement is favorable.
Tables Are Commercial Instruments
Tables should be readable, auditable, and accessible. They need a title, description, header row, header column when rows have names, and clear totals.
| Workstream | Discovery | Build | Optimize | Row Total |
|---|---|---|---|---|
| Workflow Mapping | $8,500 | $4,000 | $2,000 | $14,500 |
| Agent Build | $4,000 | $18,000 | $6,500 | $28,500 |
| Governance | $3,000 | $5,500 | $4,500 | $13,000 |
| Column Total | $15,500 | $27,500 | $13,000 | $56,000 |
Structure
Use real table semantics in HTML. Header cells use th; column and row headers define scope.
Invoice Math
Commercial tables must expose subtotals, taxes or discounts when relevant, and a final total. Never hide arithmetic in prose.
Shading
Use alternating row shading lightly. It aids scanning but should not compete with the header row or total row.
Recovery
Tables require after-space before the next paragraph. If a note is needed, place it directly below the table in mono caption style.
Document Logic Before Decoration
The brand uses strong margins, clear grids, hairline rules, asymmetric layouts, proximity, and exhibit-caption relationships.
Proximity
Related items sit closer together; unrelated items move farther apart. A label closer to the wrong object is a defect.
Executive First
Put the conclusion, recommendation, or decision question up top unless the surface is intentionally for discovery or capture.
No Meta Copy
Move facilitator notes, internal mode labels, narration state, and build commentary out of the primary content path.
Visual Before Prose
Choose the chart, table, screenshot, schematic, timeline, or decision board before expanding paragraphs.
Open Columns
Use unboxed columns when related content needs side-by-side structure but not individual card inspection.
Accent Rails
Use at most one left rail on a normal slide, section, or panel. Repeated vertical borders turn signal into decoration.
Section Backgrounds
Warm Light is for reading. Blueprint Dark, editorial gradients, and photo overlays are for covers, section breaks, dramatic conclusions, or focus moments with governed text color.
Proposal
Social
Deck
No centered body prose except constrained title-card moments. No decorative color split. No card stacks when a single strong composition would do more work.
Line Length Rule
Limit sentence width wherever the medium allows it. Use columns to keep prose narrow across slides, social, newsletters, reports, and browser-readable collateral. Google Docs final pages are the exception.
Focus Before Ornament
Cards, images, infographics, and slide frames use composition to make the conclusion faster to understand.
Use brand/layout-composition-system.md as the operating layer for hierarchy, proximity, executive relevance, visual-first evidence, chart validity, diagram purpose, and motion decisions.
Text sits on a quiet third.
Rule Of Thirds
Anchor focus text on a third when the medium has enough canvas. Do not center everything by default.
Image Focus
Do not place focus text on top of the image's focal subject. Use quiet negative space or a separate column.
Infographics
Apply the Rams filter: useful, understandable, unobtrusive, honest, thorough, and as little design as possible.
Hierarchy
One conclusion, one dominant evidence object, one next action. Extra labels are allowed only when they reduce interpretation time.
Wordmark First, Mark When Space Is Tight
Use the full wordmark when the viewer needs brand recognition. Use the square mark only when the brand is already established or the surface is constrained.
example-logo-behavior-board
Light surface
Dark surface
Compact mark
Do not
Petrol-filled mark
No shadows, outlines, containers, pattern repeats, or decorative recolors.
- Wordmark: covers, title slides, proposal title pages, newsletter headers, LinkedIn banners, website footers, and document title pages.
- Square mark: 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 in navigation, headers, covers, or footers.
- Favicon: use
assets/favicon.svgor a platform-required PNG/ICO export from that exact square mark. Never use Lucide, Iconify, emoji, a wordmark crop, a generated app glyph, or a petrol-filled mark. - Minimum clear space around full wordmark: 1x dot height.
- Preferred clear space: 2x dot height.
- SVG wordmarks and marks must render through
currentColor; black and white exports set rootcolorfor external<img>use. - The square mark never gets petrol fill, shadows, outlines, decorative containers, or repeated pattern treatment.
- Do not recolor the logo with petrol unless explicitly approved for a campaign system.
Recurring Motifs, Used With Restraint
Brand codes are INTO recognition cues. They should reinforce meaning or hierarchy; they should never become filler.
example-brand-code-atlas
Petrol signal
Action, route, selected state.
Hairline
Structure without boxing.
Mono marker
Square mark
Macro texture
Atmosphere only when text is protected.
Precision motion
Reveal sequence, state, or relationship.
FIG. 011A / DECISION
Petrol Signal
Action, selected state, active route, primary data series, or measured emphasis.
Hairline Rules
Quiet section structure, table rows, chart axes, figure frames, and editorial dividers.
Mono Markers
Section IDs, figure labels, captions, invoice metadata, chart labels, and agent-addressable identifiers.
Square Mark Geometry
Compact identity only: favicon, avatar, slide footer, video corner mark, and business-card reverse.
Star And Circle Devices
The four-point star is the north star and compact AI cue. The thick circle frames or highlights one key idea. Never use either as bullets.
Narrow Editorial Columns
Readable line lengths in slides, social, newsletters, browser collateral, and proposal side notes.
Macro Material Texture
Atmospheric cover, section, and video surfaces that host text and pass the identifiability test.
Evidence-First Tables And Charts
Commercial clarity through KPIs, pricing tables, scope matrices, charts, and Gantt plans with a visible conclusion.
Precision Motion
Motion that reveals sequence, state, transition, or relationship. No decorative loops.
Agent Rule
Choose the medium first, then choose the fewest brand codes needed to clarify the communication job. One to three codes are usually enough. The star and circle devices are framing marks, not list bullets.
Evidence, Explanation, Editorial
Images must earn their place. Do not use an editorial asset to solve an evidence problem.
example-image-register-proof
Evidence
Screenshot crop
Explanation
Industrial sketch
Editorial
Material image
Frame the decision, redact private data, caption the source.
Show workflow, system shape, architecture, or process.
Use atmosphere sparingly. It cannot replace evidence.
Register A - Industrial Sketch
Use for systems, workflows, architecture, process, and operating models. The sketch explains how the work is shaped.
Register B - Impressionist Oil Painting
Use for editorial concept moments, not system explanation. One concept image per piece is the upper limit.
Screenshots
Screenshots are evidence. Crop to the decision or workflow, frame with a hairline, caption in IBM Plex Mono, and redact private client data.
Macro Backdrops Host Text
Photography is allowed when it creates atmospheric texture without narrating the message. If the subject can be named in one second, it is too literal for a backdrop.
example-photo-treatment-proof
Macro material
Non-identifiable texture
Text safety
Controlled overlay
Prompt anatomy
Text sits on a quiet third or protected gradient, never on the focal subject.
subject / scale / light / lens / grade / avoid
Prompt Anatomy
Subject/scale, shallow depth of field, directional light, non-identifiability, color grade, camera/lens reference, and negative prompt.
Overlay
Text over photography needs a contrast-protecting overlay. Use the canonical photo overlay gradient unless the medium specifies another value.
Oxidized Copper
Extreme macro photograph of oxidized copper surface, irregular patina in deep teal and near-black, shallow depth of field with only a narrow plane in sharp focus, remaining surface dissolving into atmospheric blur, directional raking light from upper left casting low-relief shadows across surface texture, shot on Hasselblad 120mm macro, no visible objects, pure material abstraction, editorial quality, desaturated teal color grade.
Copper Wire
Ultra close-up macro of tangled fine-gauge copper wire, dense coiled forms, middle depth of field leaving foreground and background as soft blur, cool steel-blue ambient light with single warm point source glinting off wire edges, dark near-black background behind subject, shot on Canon MP-E 65mm macro, no text, no faces, no identifiable objects, photographic material study.
Concrete Aggregate
Extreme macro photograph of dark concrete aggregate surface, fine granular texture with micro-shadows, very shallow depth of field, only a thin plane of focus visible, soft teal-tinted ambient light from left, deep charcoal tones, grain and mineral inclusions visible in focus plane, rest dissolving to near-black blur, shot on Nikon 200mm macro, documentary realism, no humans, no objects.
Dark Water
Extreme close-up of still dark water surface at night, a single cool teal light source reflecting in a narrow ellipse, surrounding surface almost pure black with micro-ripple texture, shallow depth of field, absolute stillness, ultra-fine grain film simulation, desaturated, cinematic, no sky, no horizon, pure abstract surface, shot on Sony 90mm macro, 1/2 second exposure.
Agent Rule
Use brand/photography-system.md for macro prompts. Run the identifiability test and text contrast check before placing photography behind copy.
Charts Are Decision Evidence
Charts, timelines, and schematics should make the conclusion visible before the reader studies the detail. The figure title states the takeaway; the exhibit proves it.
Conclusion Title
The chart title should be a sentence with a point of view, not a neutral label like "Pipeline by Category."
Data Contract
Expose unit, period, population or denominator, source, method or calculation basis, and assumption/caveat. If the axis does not start at zero, say so directly.
Direct Labels
Prefer value labels, endpoint labels, and short annotations over legends that make the reader decode color.
Designed Schematic
For architecture and tech-stack explanations, use boxed systems with clear layers, verbs, and evidence boundaries.
- Use tabular numerals.
- Put the conclusion up top and the source note at the bottom.
- Label directly when possible.
- Use hairline gridlines only when they help estimate values; five to seven gridlines is usually enough.
- Bar charts start at zero. Line charts may use a tighter axis only when the range is clearly labeled.
- Do not make bar charts from unquantified headlines. If values are illustrative, label them and state the assumption.
- Petrol leads ordered series.
- Use one teal scale and one gray scale as the default chart system.
- Use Saffron only for signal, comparison, warning, or milestone. It is not a decorative secondary brand color.
- Red is last and only for critical contrast.
- If a chart needs more than teal, gray, Saffron signal, semantic green, and critical red, redesign before expanding the palette.
Figure 13.1 / Proposal Pipeline
Automation work creates the largest scoped opportunity.
Use sorted horizontal bars for ranked comparisons. The answer series is petrol; context stays gray.
Source: illustrative INTO proposal pipeline. Values are USD scope estimates by workstream.
Figure 13.2 / Adoption Trend
Usage accelerated after handoff moved into Slack.
Use a single trend line with a quiet gradient area, direct endpoint label, and one annotation explaining the bend.
Source: illustrative usage review. Axis range is 20% to 80% and is labeled because it does not start at zero.
Figure 13.3 / Delivery Mix
Implementation should be the visible majority.
Use pie or composition charts only for one simple whole. If the reader must compare close values, switch to bars.
- Implementation58%
- Strategy22%
- Governance12%
- Enablement8%
Source: illustrative proposal staffing model. Pie charts are allowed only for rough part-to-whole reading.
Figure 13.4 / Delivery Plan
Discovery finishes before build expands.
Gantt charts are for timing, sequence, dependencies, and milestones. Keep the timeline quiet and the task labels readable.
Workstream
M1
M2
M3
M4
M5
M6
Discovery
Build
Launch
Optimize
Source: illustrative delivery plan. Milestones use Saffron only when they mark a real decision or launch point.
Figure 13.5 / Schematic Box Layout
The system view separates user surface, orchestration, and evidence.
Use this for architecture diagrams, tech-stack explanations, and workflow proposals. It is schematic, not a vendor-logo collage.
User / Client Surface
INTO Orchestration Layer
Evidence / Governance Layer
Input
Slack Request
Output
Google Doc
Agent
Brief Router
Control
Brand Rules
Assembly
Draft Surface
Evidence
Client Data
Governance
Review Trail
Operator asks for a client-ready update.
Proposal, status note, or SOW draft.
Selects medium, rules, and source context.
Applies tokens, rhythm, charts, and layout.
Builds the first reviewable artifact.
Approved inputs, tables, and charts.
Decisions, owners, versions, and exports.
Rule: keep schematics to seven primary boxes or fewer. Group secondary systems before adding another node.
Agent Rule
Choose the exhibit from the job: bar for comparison, line for time, pie only for a simple whole, Gantt for schedule, and schematic boxes for architecture or workflow structure. Use brand/data-visualization-system.md before generating chart-heavy collateral.
Designed, Not Embedded
Diagrams explain systems, workflows, schedules, and evidence. They should look built in the INTO system, not pasted from a productivity tool.
Primary navigational anchor: DISCOVERY, BUILD, OPTIMIZE, or the dominant system stage.
Week marker, axis label, route ID, or figure label. Small, quiet, and structural.
Supporting explanation at reduced opacity. It clarifies the diagram without competing with page text.
- Use at least three typographic levels.
- Keep gridlines hairline and low opacity.
- Use 5-7 horizontal gridlines for typical charts.
- Use at least 2rem internal desktop padding.
- Reference brand tokens for all colors.
- Use the fewest colors that accurately represent the data.
- Let motion enact meaning, not decoration.
- Respect
prefers-reduced-motion.
Agent Rule
Rebuild Miro, Notion, spreadsheet, and slide-tool diagrams with INTO typography, token color, low-opacity gridlines, clear padding, and precision motion only when motion explains the content.
Route To The Medium Contract
Every output starts with media, size, surface, margins, typography scaling, spacing, grid, layout system, asset rules, and export constraints.
| Need | Route | First Constraint |
|---|---|---|
| Proposal | google-docs-system.html | Pages format, US Letter, strong print margin, commercial tables. |
| Deck | google-slides-system.html | Decide reader-first or presented mode first, then route every slide through #wireframe-set. |
| Social | media/social.md | Safe areas and platform chrome before composition. |
| Newsletter | media/newsletter.md | Email client limits and single-column resilience. |
| Web app / platform | web-app-system.html | App shell, component states, data views, AI workspace, collaboration, accessibility, and responsive behavior before screens. |
| AI software platform | brand/ai-software-platform-system.md | Use the 21-section AI platform source after the web-app hybrid route for project, social, video, agent, approval, and dashboard products. |
| Full brand asset suite | brand/brand-expression-system.md | Positioning, audience perception, brand architecture, creative direction, materiality, and asset-readiness before asset creation. |
| Advertising, events, environmental, merchandise, physical objects | media/brand-asset-suite.md | Asset preflight, viewing distance, material, identity role, motif count, vendor specs, and QA/export checks. |
| Executive brand asset proposal | outputs/into-brand-asset-proposal.html | Rendered proposal artifact with 30 mockups, copy guidance, governance, QA, and JSON-LD image generation manifest. |
Slide Wireframe Set
Deck work now routes through the canonical fifteen-type wireframe set before styling: cover, section, statement, image/text, columns, exhibit, chart, comparison, Gantt, quote, team, terms, ask, risk, and closer.
Agent Rule
Use contexts/google-slides-system.html#wireframe-set for slide taxonomy, visual specimens, dark-cover rules, and JSON-LD layout primitives. Do not invent a new deck layout until the set fails the communication job.
The maintained channel database is data/channels/channel-media-specs.json. Platform rules must be verified and dated there.
Targeted Feedback By ID
Every section and visible example has a stable ID. Use those IDs when giving design feedback.
Feedback Format
Example: example-layout-deck-frame: increase top margin and make the grid less visually present.
Agents should preserve IDs across revisions unless the underlying section or example is removed.