# Max LVL — The creative system

GitHub: [maxLVLmedia/max-lvl-branding](https://github.com/maxLVLmedia/max-lvl-branding), private. This repository contains the complete current studio, all seven image assets, supplied SVG masters and working exports, local fonts, documentation and verification code.

Web edition 4.0.0. The book uses a full-bleed portrait version of the doorway collage, with editable type on the dark left and the sunlit scene on the right. The wider artwork remains in the motion specimen. The home-service contact section uses a blue-steel or cool-neutral ground. The V1 artwork is included alongside its revised working versions.

**Open Max LVL Branding in Builder** to view and edit the studio. It is an Astro site: Builder runs its local preview, edits its pages and copy, and pushes it to the private staging address. Begin with The brand; explore The builder, UI elements, Web experiences, and Build with it.

## What is here

- A visual brand system with dark and light options, deep spectrum, updated SVGs, typography specimens, purposeful motion, and customer-centered writing. Choose each deliverable's appearance using the [theme scope](docs/EXPERIENCE-SYSTEM.md#4-type-themes-and-visual-hierarchy).
- A working Builder direction with Website/Patterns, Automations, Creative, and People examples. Edits use local demonstration state.
- An interactive component lab showing the actual panel anatomy, separation, inspectors, controls, states, and reusable code.
- Two standalone websites in `public/examples/`, with original cinematic imagery and useful local interactions.
- Complete strategy, experience guidance, and a candidate-specific Claude Code handoff in `docs/`.
- An evidence-based Builder PLAN review and a complete overnight execution supplement for Fable.

The existing source projects, Builder candidate and PLAN were inspected read-only. This repository is the current web edition. Earlier PDF and atlas editions remain at the authoring location; they are historical material and are not needed to use or reuse this edition. `source/import-record.json` records the verified complete copy into this repository.

## Pages and editable copy

| Page | Route | Content |
|---|---|---|
| The brand | `/` | Belief, color, type, motion, words and media chapters |
| The builder | `/builder/` | The Builder application specimen |
| UI elements | `/components/` | The component and panel lab |
| Web experiences | `/experiences/` | The two client website examples in a framed browser |
| Build with it | `/kit/` | Handoff prompt, source documents, workspace map, live color roles, source map |

Every page, its sections and their words live in `content/builder-site.json`, Builder's native authoring model. Each section is a pattern component in `src/components/` that receives its words as props; `src/layouts/Studio.astro` supplies the header, navigation, theme toggle and footer. Edit words in Builder's Website workspace or in the JSON; change a section's structure in its component. Lists within a section are numbered props (`color1Name`, `color2Name`…), so each item stays independently editable. Line breaks in headings are kept as written.

## Reuse

`public/css/foundation.css` is the live application foundation; `ui.tokens.json` records that profile. `brand.tokens.json` plus `brand.css` provide the broader marketing/brand profile. The two profiles share identity primitives and intentionally assign working actions for their different contexts. Use one semantic owner per experience. See `docs/CLAUDE-HANDOFF.md` for integration.

The specimen scripts are classic browser files rather than ES modules so any host can load them without a bundler. `MLBuilder.mount(host)` and `MLComponents.mount(host)` mount the specimens. The Builder requires `public/js/builder-automation.js` and `public/js/builder-creative.js` to load before `public/js/builder.js`, together with `public/css/builder-automation.css`, `public/css/builder-creative.css` and `public/css/builder.css`. The studio layout loads them in that order. The shell creates the panel hosts and mounts both workspace modules. Prefixes isolate their classes. Before using a module in another project, include its CSS and foundation, then map local demonstration state and asset paths to the host's actual model and lifecycle.

When extracting the Builder, provide the host adapters `window.ML.toast(message)` for visible status feedback and `window.ML.copy(text)` for clipboard handling, including an accessible fallback when copying is unavailable. The studio supplies them through `public/js/studio.js` before mounting. Reimplement these two adapters in the destination host; importing the full studio presentation is unnecessary.

The two customer websites are standalone pages in `public/examples/`. Their company identities, people, and forms are fictional demonstrations. Forms prepare local results; they do not send messages, book appointments, or call a provider. The retirement example helps organize questions and does not calculate personal financial suitability.

Browser-local storage remembers available preferences and demo work. Private browsing or disabled storage can limit persistence. Draft-save feedback distinguishes saved work from work retained only in the open demonstration. Clipboard access varies with browser policy; source files remain available for direct selection.

## Source map

| File | Responsibility |
|---|---|
| `content/builder-site.json` | Pages, sections, words, menu and asset roles |
| `src/layouts/Studio.astro` | Page shell: header, navigation, theme toggle, footer, stylesheet and script order |
| `src/components/*.astro` | One pattern per studio section |
| `src/lib/inline.mjs` | Numbered-prop lists and inline `code` / color marks in copy |
| `public/css/foundation.css` | Theme, exact identity colors, fonts, common controls |
| `public/css/studio.css` + `public/js/studio.js` | Studio presentation, theme, host adapters, specimen behavior, token search, handoff copy |
| `public/css/builder.css` + `public/js/builder.js` | Builder shell, Website/Patterns and People; requires both workspace modules below |
| `public/css/builder-automation.css` + `public/js/builder-automation.js` | Required Automation workspace: branching canvas, inspector and local drafts |
| `public/css/builder-creative.css` + `public/js/builder-creative.js` | Required Creative workspace: library, comparison and placement |
| `public/css/components.css` + `public/js/components.js` | Component and panel lab |
| `public/examples/` | Standalone client experiences |
| `public/assets/masters/` | Byte-preserved supplied SVGs |
| `public/assets/` | Theme-matched working SVGs and image assets |
| `public/fonts/` | Locally bundled DM Sans and Newsreader, with licenses |
| `docs/` | Strategy, experience system, implementation handoff, sources |
| `source/` | Asset provenance, prompt records, research scope |
| `validation/` | Verification scripts and scoped results |

The documents, token files, `source/` records and this README keep their repository locations and are published beside the pages at the same addresses (`/docs/BRAND-STRATEGY.md`, `/brand.tokens.json`); `astro.config.mjs` serves them in development and copies them into the build.

## Staging

Push to Staging in Builder publishes the `staging` branch to [staging.max-lvl-branding.pages.dev](https://staging.max-lvl-branding.pages.dev) through the Git-connected Cloudflare Pages project `max-lvl-branding`. Cloudflare Access admits only email addresses ending in `@maxlvlmedia.com`, `@nextlevel.video` or `@nextlevelmediacrew.com`, and every response also carries `X-Robots-Tag: noindex` (`public/_headers`). The studio has no public production release. See [editing and sharing](docs/BUILDER-AND-SHARING.md).

## Development checks

Install Node.js 22.12 or newer and run `npm ci`. `npm run dev` starts a local preview outside Builder; `npm run build` writes the static site to `dist`. `npm test` builds the site, then runs the interaction checks: the studio pages over local HTTP, the Builder specimen, the component lab and the client examples. jsdom is a development dependency and does not ship into the browser experience. `JSDOM_PATH` can override its location when an existing test runtime is preferred.

With Python 3 installed, run `python validate_tokens.py --check-fonts`. For image/reference validation, first run `python -m pip install -r requirements-dev.txt`, then `python validation/verify_studio.py`. The latter uses the bundled assets and optionally compares original logos with their historical source directory when that directory is available.

All branding changes are made in this repository on the `staging` branch and pushed, which keeps the backup and the staging site current.