| version | alpha | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | The Inner Loop | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Isotype-style information-design system for an internal BMW field guide to LLMs and coding agents. Precise and calm, with a learn-once color code anchored in the BMW M tricolor. Ships in two registers: a default light "BMW in daylight" and a sanctioned dark "BMW at night" (reader-toggled, system-aware). Both depart from — and never revive — the prior "precision observatory" aesthetic. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colorsDark |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
The Inner Loop is an internal BMW field guide that explains how LLMs and coding agents actually work to non-technical and semi-technical colleagues. The visual system is Isotype-style information design: structure is made legible through a small, consistent color code the reader learns once and re-reads in every diagram. The register is brand — design carries the explanation.
The feel is BMW in daylight: a light, cool, near-white ground, generous white space, one precise grotesque, and the BMW M tricolor (blue / violet / red) as a disciplined structural accent and the motif of the agent "loop." It reads calm, exact, and unhurried — the fog lifting, never technical intimidation.
This system deliberately replaces the prior dark "precision observatory" aesthetic (near-black ground, electric-blue glow, blueprint grid, film grain, monospace eyebrows), which read as generic AI dev-tool and fought the calm-clarity goal. See Do's and Don'ts.
Strategy: Full palette on a light ground. Color is semantic, not decorative — each concept owns a hue, and that mapping is constant site-wide so a reader learns the legend once.
Surfaces & ink
paper— page background. Cool near-white with a whisper of BMW blue. Not cream / sand / warm — that warmth is the AI default and is banned here.surface/surface-sunken— panels and recessed wells for diagrams.ink— body text (~14:1 onpaper).ink-muted— secondary text, held at ≥4.5:1 for AA. Do not let muted text drift lighter "for elegance."line/line-strong— hairlines and dividers.brand— BMW corporate blue for interactive chrome;brand-strongis the AA-safe variant for links/text onpaper.
Concept role-hues (learn once, read everywhere)
Each pairs a saturated *-ink (labels, 2px borders, pictograms) with a pale
*-fill (block backgrounds). The BMW M tricolor supplies the hero three.
| Concept | Token | Hue |
|---|---|---|
| system prompt (fixed) | concept-system |
slate |
| history / context flow | concept-history |
M blue |
| user input | concept-user |
teal |
| tool call | concept-tools |
M violet |
| tool output | concept-tool-output |
M red |
| model response | concept-response |
ochre |
M tricolor (m-blue, m-violet, m-red) is reserved for the loop-spine
motif — used as an ordered set, once per context, never as scattered
decoration.
Contrast rules: body text is always ink / ink-muted, never a concept hue.
Concept hues carry meaning through fills, borders, and large labels — and are
always paired with a text label (never color alone), for color-blind and AA
compliance.
Light ("BMW in daylight") is the default and the brand's front door. Dark ("BMW at night") is a sanctioned peer register — the same Isotype system after hours, not a different identity and never a revival of the banned observatory look (see Don't).
- One token layer, two grounds. All UI reads canonical
--c-*tokens (plus concept hues); the dark register overrides only that layer under:root[data-theme='dark'], so every derived alias inherits for free. SeecolorsDarkin the frontmatter for the resolved values. - Dark is not inverted light. The ground is a deep cool graphite
(
oklch(0.165 …)), never near-black. Depth comes from surface lightness (raised = lighter), not shadow. Concept*-fills invert to low-lightness tints;*-inks and the M tricolor lift so each pairing still clears AA (≥4.5:1 body, verified: ink 15.7:1, muted 7.8:1, every concept label ≥6:1 on its fill). No neon glow — the old glows become quiet, low-alpha tinted lifts. - Selection. First paint is resolved by a blocking script in
app.html: an explicit stored choice wins, otherwise the OSprefers-color-scheme; the page then follows the OS live until the reader toggles. This prevents a light-flash on dark devices (the site is fully static — no server to pick for us). - The toggle is a single sun/moon icon button in the masthead (far right).
The switch is a calm whole-page crossfade via the View Transitions API, with
an instant fallback under
prefers-reduced-motionand on unsupported browsers. The choice persists inlocalStorage. - GSAP-driven SVG highlights (the few inline
fill/stroke/colortweens in the chapter diagrams) resolve theme-aware hexes at mount, since GSAP tweens concrete colors; the static diagram itself reads live CSS tokens.
One family does the work: Hanken Grotesk — a humanist grotesque that echoes BMW Type's clean, engineered warmth while staying open-license (Google Fonts). Hierarchy comes from weight and size contrast, not a second display face. A serif would pull toward the editorial-magazine reflex and away from BMW's sans-led identity — so there is none.
display(700) — chapter titles.title(600) — section heads.body(400) /caption(500) — prose, held to caption length.label/codeuse Spline Sans Mono, reserved only for real tokens, code, and data values — never as a section eyebrow or "technical" costume.- Modular scale, fluid
clamp()on headings, ratio ≥1.25. Display letter-spacing floor −0.02em. Usetext-wrap: balanceon titles,text-wrap: prettyon prose. Cap measure at 65–75ch.
Alt: Archivo may sub for display only, if a more engineered headline is
wanted. Spline Sans Mono is carried over from the prior system intentionally.
Generous white space on a disciplined column/baseline grid — transit-map order, not density. Each chapter leads with a structural diagram (color-coded flat blocks + simple Gerd-Arntz-spirit pictograms); prose sits beside or below it at caption length. Vary spacing for rhythm: tight groupings inside a diagram, generous separation between ideas.
- Spacing scale
xs…2xl; page edges usespacing.gutter(clamp(1rem, 4vw, 6rem)). - A persistent loop mini-map lives in the margin (or top on mobile) and marks the current node of the agent loop, so the reader never loses the whole.
- Responsive: wide diagrams reflow to a vertical stack on mobile while keeping the legend visible. Test every chapter title at each breakpoint for overflow.
- Flexbox for 1D, Grid for 2D. Breakpoint-free card rows only where cards are the
right affordance:
repeat(auto-fit, minmax(280px, 1fr)).
Depth is quiet and physical, like ink on good paper — not glowing glass.
- No neon glow, ever. Separation comes from
surfacevssurface-sunken, hairlinelineborders, and at most one soft, low, neutral shadow (0 1px 2px/0 8px 24px -16pxat low alpha) for panels that truly lift. - Semantic z-index scale: base → sticky header → mini-map → expander → modal →
tooltip. No arbitrary
9999.
Precise and restrained, matching BMW's geometric discipline. Modest radii only:
rounded.sm (4px) for chips and small controls, md (8px) for inputs, lg
(12px) for diagram panels, pill for the rare toggle. No heavy rounding, no
giant rounded-corner icon tiles above headings (template tell).
- Site header — light, hairline bottom border; the M-tricolor appears as a
thin spine accent, not a heavy top stripe. Wordmark in Hanken Grotesk;
chapter
n/07indicator. - Chapter section —
paperground,data-chapterfor the scroll observer; leads with its diagram-panel. - Diagram panel —
surfacewell,lineborder,rounded.lg; the Isotype stage where color-coded blocks and pictograms live. - Token chip — small
rounded.smchip in a concept*-fill; the persistent object that hands off between chapters (Ch.2 → Ch.3 → Ch.4). - Context-window strata — stacked bands, one concept hue each, each band text-labeled.
- Legend — always-available key mapping hue → concept; the contract that makes every diagram readable.
- Loop spine / mini-map — the agent loop drawn with the M-tricolor; marks the current node and is the reduced-motion fallback for the connective transitions.
- "Go deeper" expander — closed by default; holds optional technical depth (attention, temperature) out of the main reading line.
- Footer — quiet; restates the wordmark and the "illustrative, not production" disclaimer.
Motion teaches — it is part of the explanation, not garnish. GSAP only
(ScrollTrigger + Flip are GSAP plugins; honors the stack constraint).
- Connective through-line (signature). Chapters are one continuous system.
Shared objects persist and morph across each boundary so concepts visibly
compose: tokens from Ch.2 flow into Ch.3's prediction, then stack into Ch.4's
context window, then feed Ch.5's loop. The Hero loop is the spine; each chapter
zooms into one of its nodes and back out. Implement with
ScrollTriggerpinningFlipfor element handoff.
- Diagram motion — tokens flow, the context window fills, the loop cycles; each animation reveals an already-visible default state (never gates content visibility on a class).
- Easing — ease-out (quart / expo). No bounce, no elastic.
- Reduced motion is mandatory and must still teach. Under
prefers-reduced-motion: reduce, big handoffs collapse to the loop mini-map advancing one node + static "carried from Ch.N →" connectors and end-state diagrams. Never a blank or untaught section.
Do
- Default to light, cool, and spacious — BMW in daylight. The dark register is its sanctioned night twin: same system, deep cool graphite ground, depth via surface lightness (not glow). See Theming.
- Make color mean something; keep the concept→hue mapping constant; always pair hue with a label.
- Use the M-tricolor as one disciplined motif (the loop), not scattered stripes.
- Keep prose caption-length; push depth into "Go deeper."
- Give every motion a reduced-motion fallback that still teaches.
- Hold body and placeholder text to AA (≥4.5:1); large/bold text ≥3:1.
Don't
- No revival of the "precision observatory": no neon/electric-blue glow, no blueprint-grid background, no film-grain overlay, no near-black ground. These are the banned tells — the sanctioned dark register avoids every one of them (deep cool graphite, quiet lifts, learn-once color code intact).
- No cream / sand / warm-neutral
paper. Cool near-white only. - No monospace as a "technical" costume; mono is for tokens and code only.
- No tracked uppercase eyebrow above every section (
letter-spacing: 0.22emuppercase mono — removed from the old system). - No gradient text, no side-stripe accent borders, no glassmorphism, no identical icon-card grids.
- No childish / cartoonish pictograms; keep them flat, exact, Isotype-grade.
- Never encode meaning in color alone.