REGARD DESIGN LANGUAGE

Regard for Marpit

A complete tour of the design language, every block, every transition.

Use the navigation drawer (n) to jump between sections.

REGARD DESIGN LANGUAGE

Typography

Body text on a .accent-bar slide. Strong is editorial weight. Italic is emphasis. code lives in a softer card. struck for retraction. Marked for highlighting.

  • Bullets use the deck accent as a muted dot
  • Each item has a marker absolutely positioned
  • Nested lists demote to ink-faint markers
  1. Fragmented ordered list — uses ) not .
  2. Numbers are mono, accent-coloured, lining-numeral
  3. Counter scales beyond 99 just fine

The accent bar above signals section coherence.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Lead slides

Editorial italic display. Watermark hairline. Generous gutter.

This is where you introduce a new section, or open the deck.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Impact slides.

For Conviction. For the lines that have to land.

One sentence. No second column.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

[→B1] Branch markers

Skippable deep-dive sections, marked structurally and visually.

This is what a branch entry looks like. The [→B1] marker is wrapped in a pill — the plugin recognises the heading prefix and styles it.

The arrow keys follow the structure — ↓ steps into this branch, → skips past it. Press s to skip the branch from the keyboard. Press t at any point inside the branch to return to where you descended from, u to ascend one level, and ] to step to the next sibling branch.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Inside branch B1

branchOf: B1 is the canonical authoring contract (ADR-270). It declaratively attaches a slide to a branch and is equivalent to using the [→B1] heading prefix — both emit data-regard-branch="B1" on the <section>.

The breadcrumb at the bottom-left shows your descent path: Trunk · Branch markers — anatomy.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

[→B1.1] Sub-branches nest

When a slide's branch id contains a dot (B1.1), it nests under its parent automatically. The drawer (n) renders the tree, indented per depth.

Use u to ascend one level (back to B1's anchor). Use t to return all the way to the trunk.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::values — three-value grid

Life

Growth

The accent that signals improvement, health, expansion. Used for positive trajectory, healthy operations.

  • emerald-400 in Night
  • emerald-600 in Day
Cognition

Depth

Thinking, knowledge, navigation. The deck's default accent — restrained, blue, certain.

  • blue-400 / blue-600
  • The most-used accent
Identity

Interiority

Character, name, the property of being-this-mind-and-not-another. Reserved for self-referential surfaces.

  • violet-300 / violet-600
  • Light hand
Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::pillars — value + name + outputs

Sovereignty

Knowledge

The knowledge that produces sovereignty.

  • Consulting
  • Research
  • Methodology
Openness

Platform

The platform that makes openness real.

  • Familiar.dev
  • Vivero
  • MCP
Autonomy

Community

The community that generates autonomy.

  • HomeGrower
  • Practitioner network
  • Makerspace
Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::conviction — pull declarations

The conviction block is for the line that has to land mid-content. Heavier than a paragraph, lighter than a full impact slide.

A second conviction, in a different tone:

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::intersection — N × N → result

Knowledge × Platform →

Productised Methodology

packages, tools, licensing

Knowledge × Community →

Compound Growth

network effects, partnerships

Platform × Community →

Operating Substrate

shared services, ERPaaS

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::compare — left ↔︎ right (replaces ugly tables)

Cloud
AWS, Azure, Google. US export controls already restrict European companies.
AI frontier
OpenAI, Anthropic, Google. Closed APIs at 10–100× the cost of open alternatives.
Open-weight
DeepSeek, Qwen, Kimi, GLM. Runnable on European infrastructure under European law.
Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::timeline — temporal trajectory

Q1 2026

Foundation

JLDB GmbH operational. Practitioner network at 4 nodes.

Q3 2026

Platform alpha

Familiar.dev workbench live. First ERPaaS pilots.

2027

Practitioner growth

Network at 12+ nodes. Conferences quarterly.

2028

Sovereign AI-ERP

European Mittelstand pilots converting at scale.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::metric and :::metric-grid

€240k
Gross / event
10–100×
Cost advantage
397B
Qwen 3.5 params
4
Countries

A single metric in line:

1T
Kimi K2.5
Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::callout — admonitions

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

:::split — two-column layout

The split block gives you precise control over column ratios — 1-1, 2-1, 1-2, 1-3, 3-1, or golden. Each side accepts arbitrary markdown.

This is the wide side. Prose breathes here. Sub-headings, paragraphs, lists, blocks all compose naturally.

2:1
Ratio
Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

The Familiar's register

When this slide is the Familiar speaking, the register-mirror class shifts the entire surface into a serif voice. Borders warm. Type becomes Petrona display italic. The wash leans toward attention.

"I do not have access to that yet. But I see the shape it would take, if I did."

This is Mode 2 — the Mirror. Reserved. Distinct from analytical chrome.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Instrument register

This is register-instrument — analytical, provisional, dashed. The cognition-tint repeating background and dashed top border signal that what's shown here is interpretation, not fact.

0.87
Confidence

Use for analytical surfaces: confidence intervals, predictions, derived metrics, anything that should be read as the model says rather than the system records.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Record register

register-record is the third register: factual, structured, solid border. This is what the system knows — events, attestations, signed records.

Event Time Source
Founding 2026-01-15 Registry
First conference 2026-03-20 Calendar
Practitioner #4 2026-04-02 Records

These three registers (Record, Mirror, Instrument) match the canonical Regard registers and travel with the wider design system.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Code with auto-scaling

The deck honours @auto-scaling code,math,fittingHeader from theme metadata. Long fenced blocks shrink to fit; KaTeX math blocks auto-scale.

// regardAudit walks the rendered DOM and applies design-language rules
import { regardAudit } from "@familiar/regard/audit"

const findings = regardAudit(document.body, {
  surface: "site",
  familiars: ["alder", "cairn", "cece", "wren"],
})

if (findings.errors.length > 0) {
  throw new Error(formatFindings(findings))
}

Inline code lives in a soft card. Math: E=mc2E = mc^2. Display:

V(deck)=∑i=1nattentioni⋅retentionicognitive loadi\mathcal{V}(\text{deck}) = \sum_{i=1}^{n} \frac{\text{attention}_i \cdot \text{retention}_i}{\text{cognitive load}_i}

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Image alt-text microsyntax

Beyond Marpit's ![bg] and width:/height: keywords, the theme respects a few alt-class hooks:

  • ![center](img.png) — display: block; margin: auto
  • ![right](img.png) — float right
  • ![left](img.png) — float left
  • ![frame](img.png) — bordered, card background, slight padding
  • ![ring](img.png) — accent-coloured shadow ring
  • ![full](img.png) — width: 100%

These compose with Marpit's existing keywords: ![right frame w:300](img.png).

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Transitions

soft-fade · rise · cover · slide · dissolve · zoom-in · none

Each one defined as a marp-cli bespoke transition via View Transitions API.

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Putting it together

Regard-Marpit · Feature Tour
REGARD DESIGN LANGUAGE

Built for sovereign decks.

@familiar/regard-marpit

npm i -D @familiar/regard-marpit @marp-team/marp-cli

Copy the bundled marp.config.mjs beside your deck — the three-line
quick start is in the README.

Regard-Marpit · Feature Tour