Brand system

INTO Consulting Brand Book

This book defines how INTO Consulting shows up across web, proposals, decks,

Requirement

This 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 the canonical human-readable layer above the token and media files.

Constraints

INTO Consulting only.
Senior operator audience: CEOs, COOs, CTOs, and owners of practical B2B companies.
The brand must feel specific, senior, and built from evidence.
Outputs must be usable by AI agents without tacit brand knowledge.

Bet

INTO should look like a working studio and editorial practice, not a SaaS vendor or consultancy deck machine. This trades some short-term visual variety for long-term recognizability.

Failure Modes

Too much accent color makes the system feel generic.
Too much decoration makes the work feel less serious.
Too much prose makes the collateral feel like strategy theatre.
Too little medium guidance makes AI outputs inconsistent.

Position

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.

Core line:

Recognize the bottleneck. Build the workflow. Measure the value.

Brand Posture

Editorial, not product-hero.
Quiet authority, not corporate polish.
Practical systems, not abstract AI promise.
Evidence-led, not trend-led.
Sparse enough to feel deliberate; structured enough to scale.

Editorial Rhythm

Pacing is the system. Every INTO surface should move through:

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

This is a brand behavior, not only a CSS treatment.

Eyebrows, kickers, section IDs, and figure labels never touch display text.
Display headings have a ceiling. They should lead the surface, not dominate it. Start from the low end of the scale; the maximum is not the default.
Cards, boxes, tables, grids, frames, and examples always create recovery space after themselves before the next prose block.
Wide evidence gets its own row or full-width treatment instead of being squeezed into a symmetrical grid.
Medium specs can change units and proportions; they do not remove the rhythm sequence.

Voice

The voice is competent, poised, and efficient.

Short sentences first.
Concrete numbers over adjectives.
Direct CTAs: “Book A Working Session”, “Tell Us What’s Slow”, “Bring Us A Workflow”.
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.
No emojis. No exclamation marks. No hype vocabulary.

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%.

Executive Writing

Conclusion up top. The reader should know the point before opening an attachment, table, model, or appendix.

Lead with the answer, recommendation, change, or decision.
Anticipate the next question: include the delta, assumption, cause, owner, deadline, or next action.
Use short words, short sentences, and short paragraphs.
Acknowledge quickly when work is underway: “Received. Working now; will revert by 2:30pm.”
For status and deal-process writing, use this order: conclusion, changed assumption, implication, next action.

Example:

No: “Attached is the updated comps table.”
Yes: “Updated comps attached. Median EV/EBITDA is now 10.4x, up from 9.8x, due to Company X earnings revision.”

Visual System

Rule Ownership

This file summarizes brand behavior. Exact production rules live in targeted files so agents can retrieve the smallest useful context.

Brand codes: brand/brand-codes.md.
Brand expression and asset-suite readiness: brand/brand-expression-system.md and media/brand-asset-suite.md.
Design foundations: contexts/design-foundations-system.html.
Media waterfall: update ledger -> design foundations -> tokens and brand systems -> media framework -> channel data -> target media sheet -> target template -> QA/export checks.
Typography and spacing: brand/typography-spacing-system.md.
Logo usage: brand/logo-system.md.
Imagery and photography: brand/imagery-system.md and brand/photography-system.md.
Icons and buttons: brand/icon-system.md and brand/button-system.md.
Data visualization: brand/data-visualization-system.md.
Diagrams: brand/diagram-system.md.
Medium constraints: media/media-framework.md, medium files, and data/channels/channel-media-specs.json.
Update tracking and closeout: contexts/update-system.html, updates/update-protocol.md, updates/update-log.json, and updates/area-cursors.json.
Benchmark synthesis: research/benchmarks/2026-05-13-bang-olufsen-brand-guidelines.md.

Color

Use tokens/into-consulting.theme.css.

Warm Light is the default.
Blueprint Dark is the dark mode.
Mineral and Studio are retired exploration.
Petrol is the accent. Use it for action, signal, and measured emphasis.
Charts use one teal scale and one gray scale by default. Saffron #FFC64F is available only for signal, comparison, caution, or milestone.
Semantic deltas use positive green, critical red, and Saffron caution. Pastel tints may sit behind saturated or dark hues as quiet motifs.

Color Scheme Governance

Use approved schemes, not improvised color combinations.

Schemes to use:

Warm Light: default documents, proposals, decks, newsletters, social posts, invoices, and readable browser surfaces.
Blueprint Dark: title cards, section breaks, video title cards, dark editorial surfaces, and high-contrast moments.
Chart/data: teal for the answer, gray for context, Saffron only for signal, comparison, warning, or milestone, and green/red only for semantic deltas.
Photo overlay: canonical dark overlay gradient when text sits on macro texture or editorial photography.
Editorial gradient: covers, title slides, section breaks, hero/photo overlays, video title cards, and atmospheric editorial surfaces only.

Schemes to avoid:

Petrol body copy.
Brown secondary chart systems.
Mixed accent stacks.
Low-contrast text on photography.
Gradients on KPI cards, invoice tables, body document pages, charts, or ordinary cards.

Typographic color rule:

Body text stays primary ink on Warm Light or light text on Blueprint Dark.
Petrol is for signal and action only.
Saffron is chart, milestone, and caution signal only, not a second brand accent.

Item and control color rule:

Primary buttons are the only routine petrol-filled controls.
Current tabs, slide thumbnails, agenda rows, list items, and pager controls use petrol text, rail, underline, outline, or soft surface before fill.
A selected item should not look like another primary CTA.
If color feels busy, remove accent from items before changing typography.

Typography And Spacing

Use brand/typography-spacing-system.md and contexts/design-foundations-system.html.

Newsreader is for display, H1, slide titles, quotes, and major numerals. Default weight is 400; 450 is the maximum exception. Do not use heavy bold.
Lexend is for body, leads, interface labels, buttons, and readable UI copy. Body defaults to 300. Buttons use 500.
IBM Plex Mono is for labels, source notes, IDs, metadata, and compact specs.
Browser and workshop H1 should normally sit between 2.5rem and 3.5rem. Working slide H1 above 4rem is a defect unless documented.
Presented slide title above 56pt needs a reason. Bigger type is not the default expression of confidence.
Stable rhythm matters: 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, and major slide pauses 4-6rem.
Heading margins are not symmetric. Headings bond to following content.
Browser, app, workshop, and hybrid-review type and spacing use rem. Convert units only at the medium boundary.
Use a 0.25rem micro baseline for type alignment and a 0.5rem structural baseline for spacing, gutters, padding, and controls.
Default letter spacing is 0; do not use negative tracking. Mono markers get rhythm from content, separators, and placement rather than tracking.
Italics are limited to one short heading phrase, editorial contrast, or quotation-like emphasis. Never use italics in buttons, UI labels, data labels, chart labels, table cells, source notes, or body emphasis.

Design Foundations

Use contexts/design-foundations-system.html before changing foundation rules.

Waterfall: lower layers can specialize for a medium, but they cannot silently contradict the foundation. Document unit translation at the medium boundary.
Baseline: 0.25rem micro baseline and 0.5rem structural baseline.
Grid: mobile one column with 1rem side margin; tablet 6 columns with 1rem gutters and 1.5rem margin; desktop 12 columns with 1.5rem gutters and 2rem margin; wide desktop keeps max-width caps before widening prose.
Width: browser content caps around 80rem; hybrid review caps around 90rem; prose remains controlled by character measure.
Usability: status, recovery, recognition over recall, consistency, error prevention, efficient repeated-work controls, minimalist focus, and help are review gates.
Miller/chunking: group roughly three to six meaningful chunks when recall is required; do not blindly cap menus at seven when recognition and structure are available.
Reading paths: F-pattern is a dense-content scanning risk, Z-pattern is for sparse cover or decision screens, and vertical/layer-cake scanning is the default for mobile, docs, long review pages, and operational UIs.
Bento: use only for comparable peer modules or one dominant module with supporting modules. Reject decorative dashboard walls and nested cards.

Logo

Use brand/logo-system.md.

Wordmark: covers, title slides, proposal title pages, newsletter headers, LinkedIn banners, website footers, and document title pages.
Square mark: favicon, social avatar, slide footer, video corner mark, business-card reverse, and compact document headers.
Identity surfaces use either the wordmark or the square mark, not both as a side-by-side lockup. Use the wordmark in navigation; use the square mark for compact footer, favicon, avatar, and constrained identity slots.
Favicon: use assets/favicon.svg or a platform-required PNG/ICO export from that exact square mark. Never use a Lucide icon, wordmark, emoji, generated symbol, or petrol-filled mark.
The square mark is identity, not decoration. Do not fill it with petrol, add shadows, add outlines, place it in decorative containers, or repeat it as a pattern.
SVG logo and mark assets inherit through currentColor; black and white exports set root color for external <img> use.

Brand Codes

Use brand/brand-codes.md.

Brand codes are recurring INTO recognition cues. Use them with restraint and only when they reinforce meaning, hierarchy, or recognition.

Petrol signal.
Hairline rules.
Mono section markers.
Square mark geometry.
Four-point star and thick circle devices for north-star goals, AI cues, framing, and highlighting.
Narrow editorial columns.
Macro material texture.
Evidence-first tables and charts.
Precision motion.

One to three codes are usually enough for a surface. Do not force all codes into one execution.

The star and circle devices are never bullets. Use them as deliberate framing or highlight marks only.

Editorial Gradients

Gradients are editorial surfaces only. They are allowed for covers, title slides, section breaks, video title cards, hero/photo overlays, and atmospheric editorial surfaces.

Do not use gradients for KPI cards, invoice tables, body document pages, ordinary cards, or charts.

Starting gradients:

Name	Value
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

Use brand/icon-system.md.

Lucide is the primary source: outline icons, currentColor, no fill, 1.5-1.75px stroke, rounded caps and joins.
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.

References:

Lucide: https://lucide.dev/
Iconify: https://iconify.design/
Iconify icon sets: https://icon-sets.iconify.design/

Buttons

Use brand/button-system.md.

Primary: petrol fill, Lexend 500, Title Case, compact radius, optional trailing Lucide icon.
Secondary: hairline outline or pale surface, no heavy fill.
Quiet/Text: text-only or icon plus text for low-emphasis actions.
Glass secondary: dark or photo editorial surfaces only.
Icon-only: familiar commands only, with accessible labels and tooltips.
Split: default action plus separate alternate-action menu.
Destructive: reset, revoke, void, or delete actions with confirmation when high risk.
Loading and permission-disabled states are required when the behavior exists.
States: hover clarifies action, active compresses subtly, disabled stays visible but non-interactive, loading prevents duplicate activation, current marks path/selection, and focus-visible remains accessible.
No pill buttons unless platform-native. No oversized SaaS CTAs. No all-caps CTA copy in canonical collateral; uppercase Webflow notes are site-specific reconciliation, not a global button rule.

Typography

Three faces only:

Newsreader: headlines, editorial moments, quotes, title slides, proposal covers, major numerals.
Lexend: body, labels that must disappear, buttons, document text. Body copy defaults to Lexend Light / 300.
IBM Plex Mono: section markers, specs, captions, metadata, figure labels, chart labels, IDs, invoice numbers.

Top useful weight is 500. Do not use heavy bold.

Type specs use rem in browser and review-layer contexts:

Role	Size	Line height	Flow spacing
Cover / hero	4.75-5.75rem	0.94-0.98	0 before, 2rem after
Section heading	2.75-3.5rem	1.02-1.08	1rem before, 1.75rem after
Subheading / card title	1.45-1.75rem	1.1-1.18	2rem before, 1rem after; 0 before inside cards
Lead	1.12-1.25rem	1.48-1.56	0 before, 2rem after; max 50ch
Body	1rem	1.55-1.62	0 before, 1.25rem after; max 56ch
Caption / meta	0.68-0.85rem	1.3-1.45	0.75rem before when attached to figures

Convert units only at the medium boundary: points for Google Docs, points or pixels for Google Slides, inches for print geometry.

Minimum text floors:

Body and explanations: 1rem browser/app/workshop, 16pt reader-first slides, 20pt presented slides.
Table cells: 0.875rem absolute and 1rem preferred in browser/app/workshop; 12pt absolute and 14pt preferred in reader-first slides; 16pt absolute in presented slides.
KPI labels: 0.8125rem minimum; KPI explanations: 0.9375rem preferred.
Chart labels: 0.75rem browser/app/workshop, 10pt reader-first slides, 12pt presented slides.
Chart annotations: 0.8125rem browser/app/workshop, 11pt reader-first slides, 13pt presented slides.
Footnotes and source notes: 0.6875rem absolute and 0.75rem preferred in browser/app/workshop; 9pt absolute and 10pt preferred in reader-first slides.
Button labels: 0.875rem default, 0.8125rem compact.

Do not make text tiny to fit a box. Split, widen, reflow, simplify, or move detail to appendix before using the lowest floor.

Layout

Use brand/layout-composition-system.md before building decks, reveal.js slides, workshop screens, complex web-app review pages, or any surface where hierarchy and evidence must make a decision easier.

The brand uses document logic:

Strong margins.
Hairline rules.
Two-column and asymmetric layouts.
Clear figure/caption relationships.
Ragged-right text.
No centered body prose except constrained title-card moments.
Comfortable line length is a design rule. Use columns to keep prose narrow where the medium allows it; Google Docs final pages are the exception.
Related items sit closer together; unrelated items sit farther apart. A source note detached from its chart, a label closer to the wrong object, or an action separated from the decision it executes is a layout defect.
Use one or two columns by default. Three columns are only for peer lists, compact comparisons, KPI triplets, or shortlist options.
Open columns without boxes are preferred when related content needs side-by-side comparison but not individual card inspection.
Left accent rails are scarce signal. Use at most one on a normal slide, page section, or app panel; repeated vertical borders fail review.
Title and section backgrounds are 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.

Spacing Register

Digital specs should be written in rem. The token file currently stores pixel values for implementation continuity; treat the rem scale as design intent.

0.25rem: hairline offsets, tiny icon gaps.
0.5rem: tight label relationships.
0.75rem: table cells, compact lists.
1rem: default small gap.
1.25rem: paragraph after-space.
1.5rem: related group spacing.
2rem: card padding, lead after-space.
3rem: exhibit separation.
4rem: section inner rhythm.
7.5rem: major chapter pause.

Containment Ladder

Cards are evidence containers, not page architecture. Containment is earned.

Default to no box. Use type, spacing, and alignment first.
Use hairlines for related groups that need separation without enclosure.
Use full-width exhibits for wide tables, charts, deck frames, screenshots, Gantt plans, and schematics.
Use cards for discrete peer items, examples, metrics, decisions, routes, tools, and agent rules.
Default radius: 0.375rem.
Default padding: 1.5-2rem.
Do not place cards inside cards.
Avoid bento-style grids unless every card is a comparable peer.
Use color only for action, signal, mode, or evidence category.

Metrics And KPIs

Metrics are evidence only when they have context.

KPI cards must include value, period, unit, prior-period delta, and cause or implication.
Always show the delta from the previous period.
Use ⏶ for upward numeric movement and ⏷ for downward numeric movement. Direction shows movement; color and copy explain whether it is favorable.
Use tabular numerals.
Use percentage points for percent-to-percent change: 61.8%, ⏷ 2.1pp vs. Q1.
Use percent change only when the base is clear: revenue ⏶ 12.4% vs. Q1.
Use ISO currency codes when currencies mix, when ambiguity is possible, or when the surface is commercial/legal: USD $125,000.
Use compact currency only in KPI or slide contexts where precision is not the point: $125k, $1.24M.
Say whether lower or higher is positive when the direction is not obvious.

Tables

Tables are commercial instruments. They should be readable, auditable, and accessible.

Use a title or caption-style description.
Use a header row.
Use a header column when rows have named entities or workstreams.
Use alternating row shading lightly.
Use sum columns and sum rows for invoices, commercial matrices, and budgets.
Expose subtotals, taxes, discounts, and final totals. Never hide arithmetic in prose.
Use real table semantics in HTML and accessible table structures in document templates.
Tables require recovery space before the next prose block.

Composition And Infographics

Executive surfaces use a conclusion-up-top filter. Visible words must help the audience understand what changed, why it matters, what decision is needed, what evidence proves it, or what action follows.
Remove meta commentary from the primary content path. Facilitator notes, script cues, AI narration state, internal mode labels, and build commentary belong in notes, drawers, voiceover files, or appendix detail.
Before writing paragraphs, choose the dominant visual evidence form: chart, table, screenshot, schematic, timeline, owner/action/date strip, comparison, or decision board.
Use the rule of thirds for card, text, and image composition when the surface has enough canvas.
Keep focus text off the focal subject of the image. Use quiet negative space or a separate column.
Infographics follow the Rams filter: useful, understandable, unobtrusive, honest, thorough, and as little design as possible.
One conclusion, one dominant evidence object, one next action.

Imagery

Use brand/imagery-system.md.

The two canonical registers are industrial sketch and impressionist oil painting. For proposals and decks, prefer diagrams, tables, screenshots, and workflow schematics before illustration.

Photography

Use brand/photography-system.md.

Default: no stock photography.
Macro material abstracts are allowed for covers, title slides, section breaks, video title cards, and hero/photo overlays.
Apply the identifiability test: if the subject can be named in one second, it is too literal for a backdrop.
Prompts must specify subject/scale, shallow depth of field, directional light, non-identifiability, color grade, camera/lens reference, and negative prompt.
Text over photography requires the canonical photo overlay gradient or a medium-specific equivalent with proven contrast.

Diagrams

Use brand/diagram-system.md.

Diagrams use three text levels: phase label, structural label, and body/supporting description.
Gridlines are hairline and low opacity; use 5-7 horizontal gridlines for a typical chart.
Diagram containers need at least 2rem internal desktop padding.
Architecture and tech-stack explanations should use the schematic box layout in brand/data-visualization-system.md before inventing custom diagrams.
Motion must enact meaning, use cubic-bezier(0.16, 1, 0.3, 1), and respect prefers-reduced-motion.

Charts

Use brand/data-visualization-system.md.

Charts are working evidence, not decoration. Every chart starts with the conclusion, then exposes unit, period, source, and note.

Quantified basis is required. Charts should expose population or denominator, method or calculation basis, and assumption or caveat when relevant.
Use tabular numerals.
Label directly when possible.
Gridlines are hairlines and only appear when they help estimate values.
Bar charts start at zero.
Line charts show change over time. They may use a tighter axis only when the range is explicit.
Use a light gradient below a single line only when it reinforces the trend.
Pie charts are allowed only for one simple part-to-whole story with a few segments. If comparison matters, use a bar chart.
Gantt charts are used for project schedules, milestones, sequence, and dependencies.
Schematic box layouts are used for architecture, tech-stack, AI workflow, and operating-model explanations.
Petrol leads ordered series.
Use the teal scale for the answer, active series, ordered series, and trend emphasis.
Use the gray scale for context, baselines, comparison series, axes, grids, and less important categories.
Use Saffron only for a separate signal, comparison, caution, 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, group, filter, split, or change the chart type.
Do not make bar charts from unquantified headlines. If the values are illustrative, label them as illustrative and state the assumption.

Template Governance

Templates are canonical artifacts, not one-off styling examples.

Deck templates should include master layouts for:

Cover.
Section break.
Agenda.
Quote.
Evidence/table.
KPI.
Chart.
Gantt.
Q&A.
Thank-you.
Appendix.

Proposal and SOW templates should include:

Page setup and margin rules.
Paragraph styles.
Header and footer behavior.
Cover, recommendation, evidence, scope, commercials, governance, and acceptance sections.
Table styles for scope, pricing, responsibility, assumptions, exclusions, and invoices.
Print and PDF export checks.

If a recurring layout is used more than once, promote it to a template or master layout instead of redesigning it inside each document.

Brand Architecture

Use brand/brand-expression-system.md before creating or reviewing a full brand asset suite.

This repo remains the canonical production source for INTO Consulting. It can describe the relationship to the wider INTO company so designers and AI agents do not blur scopes, but it does not define production-ready INTO Hospitality or INTO Group assets without a separate decision.

Architecture rules:

INTO Group is the parent idea: practical AI operations across connected businesses.
INTO Consulting is the canonical scope of this repo: AI implementation, workflow automation, internal copilots, AI agents, agentic systems, and AI-enabled operations for companies.
INTO Hospitality may share parent-level principles such as calm practical intelligence, operational evidence, Warm Light/Blueprint Dark restraint, and anti-hype rules, but it needs its own production source before asset creation.
Internal tools and AI products route through contexts/web-app-system.html and brand/ai-software-platform-system.md.
Advertising, events, merchandise, physical objects, office signs, environmental design, wallpapers, video-call backgrounds, and broad brand asset suites route through media/brand-asset-suite.md.

Unified expression is required for parent recognition: wordmark or square mark, Warm Light, Blueprint Dark, petrol signal, restrained typography, hairlines, mono markers, evidence-first composition, and no generic AI imagery.

Variation is allowed by job, not by taste. Hospitality can become more service-aware and guest-operations-led only after its own production decision. Consulting stays editorial, evidence-led, workflow-first, commercial, and technically capable.