Zenzic Style Guide¶
"The rigour applied to code must extend to every pixel the user sees."
This document codifies the Zenzic Visual Language — the binding rules for all Zenzic documentation pages. Every contributor must follow these rules. Reviewers must reject PRs that violate them.
Directive: ZRT-DOC-002
1. Card Rule (High-Density UX)¶
Navigation cards orient. They do not replace the sidebar.
Structure¶
Every card in a <div class="grid cards" markdown> block must have exactly:
- An icon (
:material-*: / :octicons-*:— see §3). - A bold title.
- A description of at most two lines.
- A single action link using the arrow prefix.
Canonical example¶
- :material-play: **User Guide**
Everything you need to install, configure, and integrate Zenzic into
your CI/CD workflow.
[:material-arrow-right: Explore the Guide](../../../how-to/install.md)
Forbidden patterns¶
| Pattern | Why |
|---|---|
Custom pseudo-tags <Icon name="..." /> | Strictly Forbidden. Unrendered HTML tag in Material for MkDocs. |
Horizontal link chains (·-separated) | Creates a wall of text; impossible to scan |
Nested <li> lists inside a card | Breaks card height uniformity |
--- separators inside a card | Adds visual noise without information gain |
| Cards with zero action links | Dead-end; the user has nowhere to go |
3. Iconography Law (Material for MkDocs)¶
This section details the specifications and guidelines for 3. Iconography Law (Material for MkDocs) within the Zenzic ecosystem.
Native Emoji & Icon Shortcodes¶
Every icon in the documentation MUST be rendered using native Material for MkDocs shortcodes:
Examples:
:material-bug-outline::material-file-document-edit-outline::material-sparkles::octicons-git-pull-request-16::material-arrow-right:
Rules¶
- Strict Shortcode Rule: Custom pseudo-tags like
<Icon name="..." />are strictly forbidden. Always use native Material for MkDocs:material-*: / :octicons-*:shortcodes. - Semantic consistency: If an icon represents "Contribute" on one page, it must be the same icon on every page.
- Uniform syntax: Every icon in a card grid uses native
:material-*: / :octicons-*:shortcodes. - No emoji in headings: Emoji characters (
⚡,🛡️,🚀, etc.) are permitted in running prose only. They must not be used as heading prefix decorators. Heading hierarchy communicates document structure; emoji communicates marketing enthusiasm. These are incompatible roles. Headings containing emoji will be rejected in PR review.
4. Anchor ID Protocol (ZRT-DOC-004)¶
This section details the specifications and guidelines for 4. Anchor ID Protocol (ZRT-DOC-004) within the Zenzic ecosystem.
When to add explicit IDs¶
Add {#id} to a heading when it satisfies both of:
- It is an H2 or H3 heading (never H1 — some engines auto-generate H1 IDs from sidebar labels).
- It is referenced by a cross-page link (
[text](page.md#anchor)).
i18n Invariant¶
The canonical ID is always the English slug. Italian (and any future language) pages must use the same {#id} value:
<!-- * EN * -->
## Getting Started {#getting-started}
<!-- * IT * -->
## Inizia Ora {#getting-started}
This ensures the VSM resolver and cross-language links never break due to translation-dependent slug generation.
Heading format¶
Do not add IDs to headings that are never linked to externally. Every explicit ID is a maintenance contract.
5. Code Block Rule¶
Every opening fence must carry a language tag:
| Fence | Verdict |
|---|---|
```python | ✓ |
```bash | ✓ |
```toml | ✓ |
```text | ✓ (plain output) |
``` | ✗ FORBIDDEN |
Use text for output that has no syntax highlighting. Naked fences hurt accessibility tools and syntax highlighters.
Gutter specificity: for CLI output shown inside :::info blocks, always use the text tag to prevent the syntax highlighter from generating random colours on log strings or file paths.
6. SPDX Header¶
Every source documentation file (.md, .md, and equivalent content files) must carry SPDX metadata.
Minimum header pattern:
<!-- SPDX-FileCopyrightText: 2026 PythonWoods <[email protected]> -->
<!-- SPDX-License-Identifier: Apache-2.0 -->
Files with YAML frontmatter place the SPDX block immediately after the closing ---.
Significant Contribution Rule (MUST)¶
For significant changes (new logic, major content blocks, structural rewrites), contributors must add their own SPDX-FileCopyrightText line below the project line.
<!-- SPDX-FileCopyrightText: 2026 PythonWoods <[email protected]> -->
<!-- SPDX-FileCopyrightText: 2026 Contributor Name <[email protected]> -->
<!-- SPDX-License-Identifier: Apache-2.0 -->
Trivial edits (typos, punctuation, formatting-only changes) do not require an additional contributor line.
Legal Governance Model¶
Zenzic does not require a CLA transfer model. Governance is based on:
- DCO (Developer Certificate of Origin) for authorship attestation.
- REUSE/SPDX for per-file copyright and license traceability.
Contributors retain copyright on significant changes and declare authorship via SPDX headers.
7. Visual Consistency Checklist¶
Before submitting a PR, verify:
- Every card grid follows §1 (single action link).
- Every admonition matches its §2 role.
- All icons use native
:material-*: / :octicons-*:shortcodes. - Cross-referenced H2/H3 headings have explicit
{#id}(§4). No anchors on H1. - No naked code fences exist (§5).
- SPDX header is present (§6).
- No hex literal (
#rrggbb) insrc/outsideZenzicPalette._*(§9). - All colour references use
ZenzicPalette.*— no removed flat constants (§9). - Any text-bearing diagram inside a Markdown page uses native HTML/Jinja or Mermaid syntax (§10).
8. ZenzicUI Gateway¶
All branded terminal output in Zenzic flows through a single object: ZenzicUI in src/zenzic/ui.py. Command modules must never instantiate Console or ZenzicUI directly — they must call get_ui() and get_console() from zenzic.cli._shared.
Core methods¶
| Method | When to use |
|---|---|
print_header(version) | The top-of-output Zenzic Frame banner — once per command invocation |
make_panel(content, *, title, border_style) | Styled Rich Panel — for structured output blocks |
print_exception_alert(message, *, context, title, border_style) | Error panels for ZenzicError and PluginContractError |
Usage pattern¶
# In any _check.py / _clean.py / _standalone.py command
from . import _shared
# Print the Zenzic banner header
_shared.get_ui().print_header(__version__)
# Print a styled panel
panel = _shared.get_ui().make_panel(
"Content here",
title="Panel Title",
border_style="bold cyan",
)
_shared.get_console().print(panel)
Why the gateway matters¶
The --no-color and --force-color CLI flags call configure_console(), which atomically replaces the module-level console and _ui singletons. Any locally-created Console or ZenzicUI instance will be frozen before the flag takes effect, silently ignoring the user's color preference.
The force_terminal parameter must always be None (auto-detect) in the module-level Console, never False. Explicit False disables color system detection entirely — resulting in no ANSI styling even in truecolor terminals. This is the most common source of visual regressions in the Zenzic CLI layer.
Checklist addition¶
Add to your PR checklist:
- No
Console(...)orZenzicUI(...)instantiation in command modules. - All banner output uses
get_ui().print_header(), not a locally-created UI instance. -
force_terminalon any newConsolecall isNoneor conditional (True if ... else None), neverFalse.
9. ZenzicPalette — Zero Hex Law¶
ZenzicPalette in src/zenzic/ui.py is the sole authorised source of colour values in the entire Zenzic codebase. This is the Zero Hex Law.
The Law¶
Design Constraint
No hex colour string (e.g. #4f46e5) and no raw Rich colour name (e.g. "red", "cyan") may appear anywhere in src/ except inside ZenzicPalette._* private class attributes. Every other file must address only the semantic public attributes shown below.
Semantic palette¶
| Attribute | Hex | Meaning |
|---|---|---|
ZenzicPalette.BRAND | #4f46e5 | Zenzic primary / brand accent (Indigo) |
ZenzicPalette.SUCCESS | #10b981 | OK · clean · pass (Emerald) |
ZenzicPalette.WARNING | #f59e0b | Caution · advisory (Amber) |
ZenzicPalette.ERROR | #f43f5e | Failure · broken links (Rose) |
ZenzicPalette.DIM | #64748b | Muted · secondary text (Slate) |
ZenzicPalette.FATAL | #8b0000 | Security breach · path traversal (Critical Red) |
Pre-composed style strings¶
For the most common combinations, use a STYLE_* constant instead of constructing f"bold {X}" inline:
| Constant | Expands to |
|---|---|
ZenzicPalette.STYLE_BRAND | "bold #4f46e5" |
ZenzicPalette.STYLE_OK | "bold #10b981" |
ZenzicPalette.STYLE_WARN | "bold #f59e0b" |
ZenzicPalette.STYLE_ERR | "bold #f43f5e" |
ZenzicPalette.STYLE_DIM | "#64748b" |
Usage pattern¶
# CORRECT — semantic alias via ZenzicPalette
from zenzic.ui import ZenzicPalette
table = Table(border_style=ZenzicPalette.DIM, header_style=ZenzicPalette.STYLE_BRAND)
text = Text.from_markup(f"[{ZenzicPalette.BRAND}]Zenzic[/]")
panel = Panel("...", border_style=ZenzicPalette.STYLE_ERR)
# FORBIDDEN — hex literal outside ZenzicPalette
text = Text.from_markup("[#4f46e5]Zenzic[/]") # ✗
# FORBIDDEN — flat constant import (removed in)
from zenzic.ui import INDIGO, EMERALD # ✗
# FORBIDDEN — inline alias
P = ZenzicPalette # ✗ use full qualification
Updating the palette¶
To change a colour, edit only the corresponding _PRIVATE hex attribute inside ZenzicPalette in src/zenzic/ui.py. All semantic aliases and pre-composed style strings derive from those private attributes — the entire codebase updates automatically.
Checklist addition¶
Add to your PR checklist:
- No hex literal (
#rrggbb) anywhere insrc/outsideZenzicPalette._*. - No raw Rich colour names (
"red","cyan") for brand-palette usage — useZenzicPalette.*. - No local alias
P = ZenzicPalette— always use the full class name. - No
from zenzic.ui import INDIGO(or any removed flat constant).
10. Markdown Asset Componentization Law¶
Directive: ZRT-DOC-010
Design Constraint
Any diagram or structured illustration intended for exclusive use within Markdown pages must be implemented using native HTML/Jinja templates or Mermaid code blocks, never as a static text-bearing .svg file.
For the detailed architectural rationale behind this directive, see Markdown Asset Componentization Rationale.
Checklist addition¶
Add to your PR checklist:
- Any text-bearing diagram or illustration inside a Markdown page is implemented via native HTML/Jinja or Mermaid.