# mgf-brand-web

The **Magogi Foundation brand-web kit** as an installable package — the CSS
implementation of the [Magogi Brand Book][bb] (tokenized colours + typography +
components) plus the self-hosted OFL fonts, Cornerstone-Orbit logo marks,
Federation-Lattice patterns, the 42-icon sprite, the `.mgf-console` operator
shell, and a Jinja template pack, shipped as **package data**.

`mgf-brand` ships only design tokens + prose; **mgf-brand-web fills the
component-CSS gap** so every MGF web surface (the cloud console, internal tools,
…) consumes **one source of truth** instead of copying CSS — the drift the
federation kept hitting. Sibling of `mgf-common` under the `mgf.*` namespace.

## Use it

```bash
pip install mgf-brand-web   # resolves from the self-hosted devpi index
```

Mount the kit's static directory (FastAPI/Starlette example):

```python
from fastapi.staticfiles import StaticFiles
from mgf.brand_web import static_dir

app.mount("/static/brand", StaticFiles(directory=static_dir()), name="brand")
```

Then load it in your `<head>` (load order matters: **tokens → fonts → base →
components**):

```html
<link rel="icon" href="/static/brand/logo/magogi-favicon.svg" />
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="/static/brand/fonts/inter-latin.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="/static/brand/fonts/space-grotesk-latin.woff2" />
<link rel="stylesheet" href="/static/brand/tokens.css" />
<link rel="stylesheet" href="/static/brand/fonts.css" />
<link rel="stylesheet" href="/static/brand/base.css" />
<link rel="stylesheet" href="/static/brand/components.css" />
<!-- operator tools only: control-surface components + the app shell -->
<link rel="stylesheet" href="/static/brand/instruments.css" />
<link rel="stylesheet" href="/static/brand/console.css" />
```

`instruments.css` (state chips, a dark streaming console, the telemetry
live-pane, …) and `console.css` (the `.mgf-console` shell: dark top bar + nav
rail + legend + printable readout + skip link) are **optional, additive**
operator layers. Load them after `components.css`; pure content/marketing
surfaces skip both.

Operator consoles skip the hand-written `<head>` + shell markup entirely with
the **Jinja template pack** (plain package data — the kit still imports no
framework):

```python
from mgf.brand_web import static_dir, templates_dir
templates = Jinja2Templates(directory=[str(MY_TEMPLATES), str(templates_dir())])
```

```jinja
{% extends "mgf/console.html" %}          {# the shell, blocks for your chrome #}
{% import "mgf/macros.html" as mgf %}     {# chips, icons, absence, … #}
{{ mgf.sync_chip('IN_SYNC') }} {{ mgf.icon('proof', label='Verified') }}
```

See [`src/mgf/brand_web/static/README.md`](src/mgf/brand_web/static/README.md)
for the full class vocabulary, the icon usage law, and the brand rules baked in
(one gold flame per view, colour+dot+label status, automatic dark mode). The
**living styleguide** — the shell + every family + all 42 icons + the type
ramp, rendered from the shipped templates — is served by the kit's demo app:
`python demo/app.py` → `http://127.0.0.1:8791/`.

## What's inside

`tokens.css` · `base.css` · `components.css` · `instruments.css` ·
`console.css` · `fonts.css` + `fonts/` (Inter, Space Grotesk, JetBrains Mono) ·
`logo/` (Cornerstone Orbit + favicon) · `pattern/` (Federation Lattice) ·
`icons/` (the 42-symbol sprite, vendored byte-identical from `mgf-brand`) ·
`templates/mgf/` (console shell + macro pack + styleguide, via
`templates_dir()`). It is **framework-free** (enforced by an import-linter
contract) so any web stack can depend on it.

## Provenance

The token set is reconciled to the Brand Book and kept in step with the flagship
`mgf-website`'s `global.css`. First consumer:
[`mgf-cloud-app`](https://codeberg.org/magogi-admin/mgf-cloud-app).

[bb]: https://codeberg.org/magogi-admin/mgf-brand — `brand/MAGOGI_BRAND_BOOK.md`
