Reference Updated 2026-05-14

Design system

Tokens, components, and prose styles shared by every doc page in this knowledge base. Live examples below — open the source files to copy markup.

Brand palette

OPDA-inspired deep blue spine, with semantic colours for callouts.

Brand 700

#1a4d80

Brand 900

#0b2545

Brand 500

#4a90c2

Brand 100

#eef4f8

Accent

#f59e0b

Typography

System font stack with serif optional. Tight headings, relaxed body.

H1 · 36px

H2 · 24px

H3 · 20px

H4 · 18px

Body — 16px / 1.6 leading. Used for all paragraph copy.

Small — 14px / muted colour. Used for captions and meta.

Monospace for inline code and identifiers.

Callouts

Five semantic variants. Use sparingly.

Note

Background context or aside.

Key finding

Pull-quote-style emphasis on a load-bearing claim. Use one per page max.

Success

Confirms a positive outcome or completed milestone.

Watch out

Something the reader should be careful about.

Critical

Hard blocker or risk.

Pills & badges

Default Brand Info Success Warning Accent

Tables

Column A	Column B	Column C
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Diagrams (mermaid)

flowchart LR A[Source]:::brand --> B[Transform]:::brand --> C[Knowledge]:::accent classDef brand fill:#eef4f8,stroke:#1a4d80,color:#0b2545,stroke-width:2px; classDef accent fill:#fef3c7,stroke:#b45309,color:#7c2d12,stroke-width:2px;

All diagrams render client-side via mermaid.js.

Card grid

Section

Card title

Short description, max ~2 lines, muted.

Done

Another card

Cards lift on hover and link to deeper pages.

In progress

Third card

Use the pill row for status / category.

Using this in a page

Copy _template.html as a starting point. Each page provides only the <article class="prose"> contents inside <div id="app">; site.js wraps it with header and sidebar.

<script src="../ui/site.js"></script>
<script>OPDA.init({ page: 'page-id' });</script>

The page id matches one in the sidebar NAV array (in site.js) and gets highlighted automatically.