Skip to content

Branding Lookbook

This page exercises every visual primitive the documentation site uses, under the current QueBIT-themed Material palette and font settings. Use it to review and lock the look before content migration begins.

The same content also renders under the ControlWORQ lookbook and the DataWORQ lookbook, each with data-product="controlworq" or "dataworq" set on <body>. The per-product variant CSS in docs/stylesheets/extra.css is currently commented-out, so all three pages render identically — when we enable variants, the differences will appear here first.

Typography

Heading 1 — Page title

Heading 2 — Major section

Heading 3 — Subsection

Heading 4 — Sub-subsection

Heading 5
Heading 6

Body text is set in Roboto at 16 px. Use strong to emphasize, italic for titles or definitions, and inline code for identifiers, file paths, or short snippets.

A regular paragraph runs the full width of the content column. Documentation paragraphs will rarely exceed two or three sentences before yielding to a list, table, or callout — so reviewing the readable line length here is meaningful.

Block quotes are used sparingly, typically to flag a note from a third party (a vendor advisory, a customer quote, a product release announcement).

  • Unordered list item one
  • Unordered list item two
    • Nested item
    • Another nested item

  • Unordered list item three

  • Ordered list item one

  • Ordered list item two
  • Ordered list item three

Inline link to ControlWORQ — links use the accent color and underline on hover.

Color tokens

The brand palette in use:

Primary
QueBIT navy#0F4B83
Accent
Teal#0E7C86
Product accent
--product-accentscoped via data-product

The "Product accent" swatch above uses var(--product-accent). On this page it falls back to the global accent. On the ControlWORQ and DataWORQ lookbook pages it picks up any per-product override defined in extra.css.

Logo and favicon

The site logo renders in the header at the top of every page. The favicon shows in browser tabs.

QueBIT logo

Logo source: docs/assets/quebit-logo.png. Favicon source: docs/assets/favicon.png.

Admonitions

Note

Use note for ancillary information that's helpful but not strictly required to follow the surrounding instructions.

Tip

Use tip for suggestions that improve the workflow but aren't required for correctness.

Info

Use info for context or background a reader may want — usually a reference to a related concept or page.

Warning

Use warning for actions that could produce unexpected behavior or require caution.

Danger

Use danger for actions that can cause data loss, downtime, or irreversible side effects.

Example

Use example to introduce a worked example, code sample, or end-to-end demonstration.

Collapsible note

Admonitions can also be collapsible (??? instead of !!!). Useful for long context that most readers will skip.

Code blocks

Python:

def migrate_article(manifest_entry: ManifestEntry, output_root: Path) -> None:
    """Convert one Document360 article to its MkDocs equivalent."""
    source = manifest_entry.source_path
    target = output_root / manifest_entry.product / f"{manifest_entry.slug}.md"
    target.parent.mkdir(parents=True, exist_ok=True)
    target.write_text(transform(source.read_text()))

YAML:

theme:
  name: material
  palette:
    - scheme: default
      primary: custom
      accent: custom

Bash:

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
mkdocs serve

Inline code: mkdocs build --strict.

Tabbed content

sudo apt install python3.12 python3.12-venv

brew install python@3.12

winget install Python.Python.3.12

Tables

Product Articles Categories Status
ControlWORQ 31 9 Migration in progress
DataWORQ 376 53 Migration in progress
Total 407 62

Buttons

Primary button Secondary button

Buttons inherit primary/accent from the brand palette and respect light/dark scheme toggles.

Light / dark scheme

Material auto-detects the user's preferred scheme via prefers-color-scheme and offers a toggle in the header. Both schemes use QueBIT navy as primary; the dark variant lightens the primary slightly for legibility on dark surfaces.

Try the toggle (top-right) and confirm both schemes look correct.