magogi/prod/: mgf-brand-web-0.2.0 metadata and description
The Magogi Foundation brand-web kit as an installable package — tokenized CSS + components + self-hosted fonts + logo/pattern assets, shipped as package data so every MGF web surface shares one source of truth. Sibling of mgf-common under the mgf.* namespace.
| author | Bassam Alsanie, mgf-brand-web contributors |
| classifiers |
|
| description_content_type | text/markdown |
| keywords | brand, css, design-system, fonts, magogi, web |
| license | MIT |
| license_file |
|
| metadata_version | 2.4 |
| project_urls |
|
| requires_dist |
|
| requires_python | >=3.11 |
Because this project isn't in the mirror_whitelist,
no releases from root/pypi are included.
| File | Tox results | History |
|---|---|---|
mgf_brand_web-0.2.0-py3-none-any.whl
|
|
|
mgf_brand_web-0.2.0.tar.gz
|
|
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, and Federation-Lattice patterns, 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
pip install mgf-brand-web # resolves from the self-hosted devpi index
Mount the kit's static directory (FastAPI/Starlette example):
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):
<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 -->
<link rel="stylesheet" href="/static/brand/instruments.css" />
instruments.css is an optional, additive fifth layer for operator/console
surfaces (state chips, a dark streaming console, the telemetry live-pane, …).
Load it after components.css; pure content/marketing surfaces can skip it.
See src/mgf/brand_web/static/README.md
for the full class vocabulary and the brand rules baked in (one gold flame per
view, colour+dot+label status, automatic dark mode). A live gallery of the
instrument layer lives at docs/instruments-demo.html.
What's inside
tokens.css · base.css · components.css · instruments.css · fonts.css
fonts/(Inter, Space Grotesk, JetBrains Mono) ·logo/(Cornerstone Orbit + favicon) ·pattern/(Federation Lattice). 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.
[bb]: https://codeberg.org/magogi-admin/mgf-brand — brand/MAGOGI_BRAND_BOOK.md