{#- mgf-brand-web · the living styleguide (M1 P4.1) ========================================================================= The kit demonstrating itself: this page IS the `.mgf-console` shell (it extends mgf/console.html), and its readout renders every operator vocabulary the kit ships — chips (with icon slots), the 42-icon sprite, the type ramp, indicators, progress, tabs, the streaming console, the live-pane, detail/evidence, honest absence. Serve it during development with the kit's demo app: python demo/app.py → http://127.0.0.1:8791/ (It replaced docs/instruments-demo.html, which was a hand-copied, unserved gallery.) Context: `icon_names` (list, from the sprite), `kit_version`. ========================================================================= -#} {% extends "mgf/console.html" %} {% import "mgf/macros.html" as mgf %} {% block title %}mgf-brand-web {{ kit_version | default('') }} — living styleguide{% endblock %} {% block mark_title %}mgf-brand-web{% endblock %} {% block mark_sub %}living styleguide{% endblock %} {% block topbar %} kit {{ kit_version | default('dev') }} {{ icon_names | default([]) | length }} icons · 6 sheets {# D-BRAND-ACCENT: the ONE affirmative gold action per view. #} {% endblock %} {% block rail_label %}Styleguide sections{% endblock %} {% block rail %}
The shell
.mgf-console this very page
Vocabularies
{% for anchor, name, kind in [ ('#logo', 'The living mark', 'inline · animated · moods'), ('#type', 'Type ramp', '--mgf-text-*'), ('#icons', 'Icons', 'the 42-symbol sprite'), ('#chips', 'State chips', 'sync · test · workflow'), ('#marks', 'Origin & provenance', 'origin · derived · authority'), ('#signals', 'Indicators & progress', 'dots · bars · tabs'), ('#streams', 'Console & live-pane', 'dark stream · telemetry'), ('#records', 'Detail & evidence', 'run records'), ('#absence', 'Honest absence', 'empty states'), ] %} {{ name }} {{ kind }} {% endfor %}
Colour policy
gold
the ONE affirmative action per view
busy blue
functional busy / running — never a CTA
violet
derived / authority / telemetry

Status is colour + dot + label, never colour alone. Icons are monochrome (currentColor). This legend block is .mgf-console__legend. {{ mgf.derived_tag('the styleguide') }}

{% endblock %} {% block main %}

mgf-brand-web {{ kit_version | default('') }} · operator kit

The living styleguide

Everything on this page is the installed kit — no page-local styling beyond layout scaffolding. The chrome around you is the .mgf-console shell (console.css + the mgf/console.html template); every component below is instruments.css / components.css on the generated --mgf-* tokens. Flip your OS theme: the readout follows, the instrument chrome stays dark.

Type ramp · --mgf-text-*

{% for step in ['4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'base', 'sm', 'xs'] %}
--mgf-text-{{ step }} Calibrated instrument
{% endfor %}
--mgf-font-mono sha256 392322ed…d774 · provenance is mono

Iconography · {{ icon_names | default([]) | length }} symbols · icons/icons-sprite.svg

24×24 grid, stroke 1.25, round caps, currentColor — one drawing serves every ground. Decorative by default (aria-hidden); name meaningful ones (role="img" + aria-label). Rendered via mgf.icon(name).

{% if icon_names %}
{% for name in icon_names %}
{{ mgf.icon(name, size=24) }}
{{ name }}
{% endfor %}
on Ink — same files, currentColor themes: {% for name in icon_names[:12] %}{{ mgf.icon(name, size=20) }}{% endfor %}
{% else %} {{ mgf.empty_state('No icon inventory passed', 'Render this page with icon_names (the demo app parses the sprite).') }} {% endif %}

State chips · .status-chip / .tstate

Sync language ({{ mgf.sync_chip('IN_SYNC') }} …), test language, and the workflow language — colour + dot + label, mapped with state.lower().replace('_','-').

{% for s in ['IN_SYNC', 'STALE', 'TAMPERED', 'UNKNOWN', 'UNREADABLE', 'CHECKING', 'SYNCING', 'ERROR'] %}{{ mgf.sync_chip(s) }}{% endfor %}
{% for s in ['pass', 'fail', 'error', 'skipped', 'running'] %}{{ mgf.status_chip(s) }}{% endfor %} {{ mgf.status_chip('pass', running=true) }}

Optional icon slots from the sprite (0.4.0) — decoration on top of dot + label, inheriting the state colour:

{{ mgf.status_chip('pass', icon_name='success') }} {{ mgf.status_chip('fail', icon_name='error') }} {{ mgf.sync_chip('STALE', icon_name='warning') }} {{ mgf.sync_chip('UNKNOWN', icon_name='pending') }}
{% for s in ['done', 'in_progress', 'next', 'postponed', 'blocked', 'todo'] %}{{ mgf.tstate(s) }}{% endfor %}

Origin & provenance marks · .origin-badge / .derived-tag / .authority-badge

{% for o in ['web', 'cli', 'agent', 'ci'] %}{{ mgf.origin_badge(o) }}{% endfor %} {{ mgf.derived_tag('the styleguide') }} Authority live · ephemeral, not provenance warden up warden down

Indicators · progress · tabs

running queued idle stale down unknown
low medium high effort L stage-2b started 3d ago priority high
{{ mgf.icon('warning') }} soothsmith dashboard built from e3504fc, HEAD is a91f7c2 — force-sync to rebuild.

Dark streaming console · telemetry live-pane

#106:41:02run_requestrequest · P-F3 · zig build test
#206:41:03gategate emit-set no-drift → pass
#306:41:04errorholder process died — heartbeat stopped
Telemetry zig build test streaming
{{ mgf.icon('build') }} run emit-set no-drift test
62%sess_20260628…last event 2s ago
surface_version 1.0.0 pinned · gate → pass

Detail · evidence

run_id run_20260628T0641_a1
lease heartbeats 1 · reclaimed false
{{ mgf.icon('chain') }} derived · changelog
R15 closed at 7160a43 — emit-set versioning adopted.

evidence · zig build test 91/91; verify.sh 710f9ea4…620b unmoved

Honest absence · mgf.absence() / mgf.empty_state()

{{ mgf.absence('UNKNOWN', "This project isn't wired yet", 'No fed-resources/ found.', action='Add the directory and force-sync.') }} {{ mgf.absence('UNREADABLE', "Resources can't be read", 'Manifest schema 0.0-draft not recognized.', errors=['manifest.json: schema 0.0-draft', 'expected: 0.1']) }} {{ mgf.empty_state('No past runs', 'Once tests run, their records are listed here.') }}
{% endblock %} {% block head_extra %} {% endblock %}