Tokens
Colour palette
Tokens
Typography
Document title — Playfair Display
--mkh-font-display · 28pt
Section title — Inter
--mkh-font-body · 14pt
Sub title — Playfair Display
--mkh-font-display · 11.5pt
Body copy is set in Inter at 10.5pt with a 1.55 line height. It stays in the muted body ink so that navy headings and gold accents keep their hierarchy.
--mkh-font-body · 10.5pt / 1.55
Mono — JetBrains Mono 0123456789
--mkh-font-mono · 9pt
Building blocks
Document components
My Knowledge Hub
A
Section header
Sections carry a gold marker, a name and a body. Markers are lettered or numbered and always precede the section name.
Callout. Used for assumptions, prerequisites and anything the reader must not miss.
| Item | Detail | Owner |
|---|---|---|
| Discovery | Workshops and system review | MKH |
| Design | Target model and roadmap | Joint |
| Handover | Documentation and enablement | MKH |
- Disc bullets for unordered lists
- Decimal markers for ordered steps
Live example
A4 document sample
My Knowledge Hub
Workday Financials — Exploration
A structured discovery of the current finance landscape, the target operating model and the sequencing required to deliver it.
A
Context
Understanding the current platform footprint, integrations and reporting obligations before any target design is proposed.
B
Scope
- Core financial accounting
- Procure to pay
- Reporting and analytics
Print this page to see the A4 page rules, margins and page breaks applied.
Integration
Use the kit in another project
1. Load the fonts and stylesheet
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://clacour.io/mkh/document.css">
2. Wrap your document
<article class="mkh-doc">
<div class="mkh-masthead">…</div>
<h1>Document title</h1>
<section class="mkh-section">
<div class="mkh-section-head">
<span class="mkh-marker">A</span><h2>Section name</h2>
</div>
<div class="mkh-section-body">…</div>
</section>
<div class="mkh-brandline"></div>
</article>
3. Or read the raw tokens
fetch('https://clacour.io/mkh/document-tokens.json')
.then(r => r.json())
.then(tokens => console.log(tokens.color.gold));