Style Tile
PMG Digital Personas
Visual reference for the spec site. Every component on this page is the source of truth.
Heading level one (36px / 700)
Heading level two (24px / 600)
Heading level three (19px / 600)
Heading level four (16px / 600)
Body text at 17px with a line height of 1.65. The type is set in the system sans-serif stack, which means it looks native on every platform. No web fonts to load, no layout shifts, no licensing headaches. The text color adapts between light and dark modes using CSS custom properties.
Here is a paragraph with inline code rendered in the monospace stack, and a sample link styled with the accent color. Links underline on hover, never on rest. The goal is quiet legibility: nothing shouts, everything reads.
Colors (adapt to current mode)
These swatches use the CSS custom properties directly, so they reflect whichever color scheme your system prefers.
Callout variants
This is an informational callout. It highlights context worth noticing.
This is a warning. It flags a tradeoff or open question.
This is a danger callout. It marks a hard failure or a red line.
The Abstention Contract: if the system cannot cite, it does not answer.
Card components
Proof-carrying answers
Every response ships with a signed bundle that binds the output to the exact artifacts it drew from and the policy in effect. If coverage is thin, the system refuses.
Transparency log
Events that matter go into an append-only log with inclusion proofs. Third parties can run monitors that flag suspicious patterns.
Definition card
Archive
The encrypted, versioned collection of everything the decedent chose to preserve.
Button styles
Code block
{
"output_digest": "sha256:...",
"artifacts": [
{"hash": "sha256:...", "uri": "bag://archive/payload/003.txt", "snippet_hash": "...", "rank": 3}
],
"coverage": {
"claim_1": ["artifact_7#snipA", "artifact_9#snipC"]
},
"policy_hash": "sha256:...",
"model_id": "persona-rag-v2",
"runtime_hash": "sha256:...",
"prompt_hashes": {"system": "sha256:...", "policy": "sha256:..."},
"transparency_log": {"entry_id": "...", "inclusion_proof": "..."},
"signature": {"kid": "did:...#key-1", "jws": "..."}
}Three-panel sequence: claim lifecycle
Spotlight panel
Policy governs everything. When values collide, governance wins.
Conditional paths
Evidence threshold crossed. Delay window begins.
Insufficient evidence. System waits.
8px grid reference
Scroll reveal
Elements below use data-reveal and animate into view via IntersectionObserver. Scroll down to see them appear.
This callout fades in when it enters the viewport.
Revealed card one
This card animates into view as you scroll.
Revealed card two
Both cards share the same reveal trigger.
This paragraph is the final revealed element. If prefers-reduced-motion is active, the vertical translation is removed and only a quick opacity fade remains.