The Brand OS Master Template

No raw hex, font name, or logo appears inline anywhere. The token table is defined once in Chapter 1 and referenced by name everywhere else, including inside every filled example.

Placeholder & Co. looks competent and unmistakably temporary. Its mark is a registration target, its motion is a blinking caret. It must never leak taste into a client brand.

Every collateral treatment is a template. Content slots are marked {​{like_this}​} and listed in a fields table. A finished piece is produced by replacing fields only.

Anatomy, then states and variants, then do and never, then one filled example. Print at true dimensions with margins and bleed. Screen pieces responsive, dark and light, with a reduced-motion spec for anything that moves.

• Wordmark sets in the display face, bold, tight tracking, and never wraps. Too big for the space means step down a size.
• Clear space 0.55 × icon height on all sides. Dense UI may drop to 0.35, never below.
• Tagline sits on the wordmark's left edge. Where the lockup carries it, surrounding copy must not repeat it.
• Never rebuild the wordmark as live text in production artwork.

Each brand measures its own lockup minimums against the favicon rule and records them here with px and mm values.

Marketing exports (card, signatures, flyer, og) are artboards in the collateral chapter, exported on demand so they can never drift from the mark. Transparent means genuinely empty, never a white rectangle.

These names are load-bearing. Code references them; build scripts mirror them into the Hub and Website trees. Renaming one is a breaking change and never happens silently.

700 to 800 wordmark and H1 · 600 to 700 H2, H3 · pull quotes at 500. Mixed case, never uppercase-forced.

400 body · 500 taglines and captions · 600 UI titles and table heads · 700 buttons and labels.

600 eyebrows and all-caps labels · 500 money, dates and figures · 400 IDs, hex, code. Tabular figures everywhere numbers align.

Reduced motion: the caret holds solid at full opacity. Try it with this document's reduced-motion tweak, or your OS setting; both are honored.

Tint 10% · blur 18 · saturate 160%. Chips, the working topbar, segmented controls. It belongs to the page it sits on.

Tint 16% · blur 28 · saturate 180%. Panels, drawers, modals, toasts, lightbox chrome. Dark: Paper tint 16 to 6%, rim 1 px at 20%. Light: white tint 86 to 62%, rim 1 px Ink at 9%.

Ratios are measured against the composite, tint plus whatever shows through, never the tint alone. Body on glass ≥ 4.5:1 at the worst point it can travel over; titles ≥ 18 px need 3:1. Glass over photography gets a 40% Ground scrim. Vibrancy on accents only, text is never vibrant. No backdrop-filter support: flat 92% opaque fallback in the same tint. No glass on dashboards read for hours.

• Rotating or stretching the mark
• Rebuilding the wordmark as live text in artwork
• Any red, anywhere
• Accent carrying text on a light ground, eyebrows included
• The Gauges in marketing or near the logo
• The motion signature twice on one screen
• More than one glow per surface, or glow as an outline
• Crowding the lockup below 0.35 × clear space

The kind of rule that belongs here, from the gold standards: no green past hue 150 · no em dashes anywhere in brand copy · never mix this brand with the companion brand in one deliverable.

One line of real coverage items sliding past, once per page. Decoration carrying real data, so every item must be true. Anatomy: track · item · separator dot · edge mask fading the outer 12%. Items are never interactive; a clickable item is a chip, not a strip.

Physics: right to left at ~45 px/s, constant, duplicated once for a seamless loop. Hover eases to a stop over 400 ms, never freezing dead. Reduced motion: a static centered line, mask removed.

Two to four mutually exclusive options, all visible; beyond four it becomes a select. Anatomy: recessed track · equal-width segments set by the longest label · thumb · optional per-label count. One segment is always selected.

Physics: the thumb slides over 220 ms and never fades out and in, the same 220 ms whatever the distance, squashing slightly along its travel. Weight, not bounce. Labels cross-fade 140 ms, finishing just after the thumb lands. Reduced motion: jump, color cross-fade only.

One ring, identical on every focusable thing; the only element never restyled per component. Anatomy: 2 px solid ring · 3 px offset · follows the element's own radius exactly. Never a glow, never dashed.

Physics: keyboard focus shows it, mouse and touch do not. It appears instantly, because any entrance makes fast tabbing feel smeared, and fades out over 120 ms. Error plus focus: the error color wins the border, the ring keeps its own color. The one deliberate non-animation in the system.

Thick glass, or the flat equivalent, above the page. One panel at a time: a needed second panel means the first should have been the page. Anatomy: optional scrim · surface · title bar with one dismiss · body · action bar, separated by hairlines at 12%, never shadows. A toast is the same surface, no title bar, six-second life.

Physics: arrives from the edge it belongs to over 260 ms decelerating, scrim fading with it; leaves in 180 ms accelerating the way it came. Reduced motion: 120 ms cross-fade in place.

Labels are always visible, never a placeholder as a label; placeholders show format, not meaning; we mark optional, never required. Anatomy: label · optional marker · control · placeholder · helper text · error text, which replaces helper and never stacks.

Physics: errors appear on blur, never mid-typing, and clear the instant the value is valid. Focus rim recolours over 140 ms, nothing grows, the label never floats. The error message slides down 4 px over 160 ms, pushing content; it never shakes. Reduced motion: no slide.

Sections of one record, one at a time. Tabs change what you are looking at; a segmented control changes how. If the panes are not parts of the same thing, they are not tabs. Anatomy: tab list · label · optional mono count · 2 px indicator · full-width base rule at 14% · pane. Overflow scrolls, never wraps.

Physics: the indicator travels along the base rule over 240 ms, stretching as it moves. Outgoing pane fades 100 ms; incoming fades in 160 ms with a 6 px rise, 60 ms later. Panes never slide sideways. Reduced motion: jump and swap.

Every brand names one component its product is built around and gives it the full treatment: {​{headline_component}​}. GreenRoom's is the availability calendar; HOI's is the thirty-year funding table. The contract: every cell or row carries state before anyone reads a number · a legend is mandatory when more than two states are on screen · state is carried by wash, edge rule and legend, never by the color of a numeral alone.

Physics: nothing animates on load, a figure that fades in is a figure you cannot trust yet. Reordering and range-painting move at 90 to 220 ms so the eye can follow. Reduced motion: instant.

Marketing heroes only, glow layers only. Never text, never the mark, never in the tools. Anatomy: clipped stage · back glow at 0.35 × scroll speed · front glow at 0.6 × · content at 1.0, pinned. Two glow layers max, total travel capped at 80 px.

Physics: layers lock to scroll position, no easing, no lag. Off under reduced motion, on touch, and under 720 px viewport height. If a viewer notices the glow moving, it is going too far, and the hero must work flat.

Two components that happen to both sit at the top; they never borrow each other's styling. Header (sells): full lockup · nav links · one primary action · transparent over the hero, thin glass once scrolled, ≥ 72 px. It condenses ~16 px over the first 80 px of scroll, one continuous transition tied to scroll, and never hides and reappears. Topbar (works): mark only, never the full lockup · switcher · view control · search with its shortcut shown · account · 52 px fixed. It does not move, resize, or hide, ever; only a soft shadow appears once content scrolls under. Offline tints its hairline, the one color change it has.

A peeking row of cards pushed by hand, or a paginated document stage. It never auto-advances. Anatomy: viewport · track · equal-width slides · 40 to 60 px peek · progress pips where the active pip stretches to a bar · optional desktop-only edge arrows. At start and end, the matching arrow disables; nothing wraps.

Physics: the track follows the finger one to one with resistance at both ends; on release it settles to the nearest slide over 320 ms, decelerating hard. Flick speed affects distance, not landing speed. Reduced motion: 120 ms cross-fade, no travel.

The handover from marketing to tool; it gets the full treatment once, then never gets in the way again. Anatomy: one centered 400 px card · the mark is the only branding, no wordmark, no tagline · heading · email · password with inline forgot link · primary action · divider · magic-link alternative · footer switch. One column, always.

Physics: the card arrives once, a 12 px rise and fade over 320 ms; nothing staggers in after. Credential errors are deliberately vague; format errors are specific. A failed attempt fades the message in over 160 ms and moves focus to the first bad field; the card does not shake, shaking reads as blame. Reduced motion: it simply appears.

Cells of different sizes on one grid, where size means importance. Anatomy: 12-column grid, uniform row height · cells spanning 1 to 5 columns, 1 to 2 rows · mono eyebrow · figure or content · optional footer line. One hero cell per grid. Loading keeps the cell's exact size so the grid never reflows; empty keeps the cell and states what is missing.

Physics: marketing cells arrive in reading-order stagger, 40 ms apart, capped at half a second, once. Tools: no entrance animation at all. Reduced motion: all cells together.

Full-attention viewing. The chrome may be glass; the image never is; nothing is ever blurred over a photograph someone is trying to read. Anatomy: scrim at Ground 82% · stage fitting the image without cropping · caption · counter and arrows in one small bar · close top right, always. Thumbnails only above twelve items. A lightbox is always dark; it is the one component that ignores its context.

Physics: the image grows out of the clicked thumbnail over 280 ms and closes back into it; that is what makes it a zoom, not a page. Between images, 180 ms cross-fade with a 20 px drift; the chrome never moves. Escape closes, arrows move, focus returns to the trigger. Reduced motion: cross-fades only.

A discrete measure of progress: pipeline stage, percent funded, profile completeness. Segmented, not smooth, because the steps are real. Anatomy: label · mono value, always n of total or a measured percentage with its threshold named, never a bare number floating alone · a track of 4 to 8 equal segments · filled segments · threshold marker. Read-only: it reports, it never sets. Indeterminate shows an evenly dim track; it never guesses.

Physics: segments fill one at a time, 90 ms each, so the bar counts up rather than sliding. Threshold changes hit the crossing segment first, the rest re-tint 60 ms later, so the change reads as a consequence. Completion is one soft 300 ms brightening. No confetti, no pulse. Reduced motion: instant.

Category tables on the document chrome, built to be co-branded for partner accounts. The partner mark sits in the header at the same cap height as ours, separated by a hairline divider; neither mark ever sits inside the other's clear space.

The sheet a new client or partner gets on day one. It answers exactly three questions: what happens next, who to reach, and where things live. The warmest piece in the kit, which still means calm.

A document someone completes with a pen. Grouped checkbox rows, each row one concrete item with a where-to-find hint. Snippet blocks (callout, tip, warning) are shared with every guide in the library so all guides age together.

A working form that gets filled at a counter, landscape because the writing hand needs rows, not columns. Field labels sit in mono caps above their write-in rules; the reference number is the biggest thing on the sheet after the title, because the sheet exists to be filed and found.

The eight-section rhythm every partner or campaign microsite follows. The order is the argument: promise, proof, product, path. The sticky header condenses per pattern 09; the rhythm rule from Chapter 1 places the dark bands.

One page, one action. A campaign landing page is the microsite canon cut to four sections with the form promoted into the hero. Everything else on the page exists to answer the objection that stops the form.

One set of fields, two outputs: a scrolling micro-page for the phone and a print PDF for the meeting. The pair is generated together and never edited separately; if a number changes, both regenerate.

The article page the content calendar feeds. A reading column around 68 characters, a header that states its business, and figures that always explain themselves. Every post regenerates its own share card from the T06 formula with {​{post_title}​} in the display line.

Letter landscape folded to three panels. The fold order is the reading order: front panel sells, inside educates, back panel closes with contact and QR. Panels are 3.67 in wide with a 3 mm safety inside each fold; nothing crosses a fold. The catalog reuses the same grammar at multi-page scale: a cover, then product grid pages of four to six cells on the document chrome.

The mailer front is a poster read in one second at the mailbox; the back obeys postal rules before brand rules. The certificate is the one ceremonial piece in the system: a landscape sheet, a rules border, the mark as its seal, and no other decoration.