themed-brief.canvakit.html

themed-brief v1.0.0

Briefing page that reads designkit tokens from $design — every color, font, and spacing value comes from an active DESIGN.md. Declares its preferred preset via the `design:` frontmatter hint so it renders themed even outside a workspace with a local DESIGN.md.

data sources

intro : file

{
  "kind": "file",
  "path": "briefings/current.md"
}

source

open in playground →

---
template: true
name: themed-brief
version: 1.0.0
description: Briefing page that reads designkit tokens from $design — every color, font, and spacing value comes from an active DESIGN.md. Declares its preferred preset via the `design:` frontmatter hint so it renders themed even outside a workspace with a local DESIGN.md.
author: canvakit
# Author's preferred theme — operator workspace DESIGN.md still wins.
design: dk:heritage
variables:
  title: "Executive summary"
dataSources:
  intro:
    kind: file
    path: "briefings/current.md"
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <style>
      :root {
        /* Defaults when no DESIGN.md is active — designkit bridge
           injects a :root block that overrides these. */
        --color-primary: #111;
        --color-accent: #666;
        --font-h1-family: ui-serif, Georgia, serif;
        --font-body-family: ui-sans-serif, system-ui, sans-serif;
        --spacing-lg: 2rem;
      }
      body {
        font-family: var(--font-body-family);
        color: var(--color-primary);
        padding: var(--spacing-lg);
        max-width: 46rem;
        margin: 0 auto;
        line-height: 1.7;
      }
      h1 {
        font-family: var(--font-h1-family);
        font-size: 2.5rem;
        letter-spacing: -0.02em;
        margin-bottom: 0.25rem;
      }
      .byline { color: var(--color-accent); font-size: 0.9rem; margin-bottom: 2rem; }
      .prose p { margin-bottom: 1rem; }
    </style>
  </head>
  <body>
    <h1>{{title}} — {{intro.title}}</h1>
    <p class="byline">
      {{#intro.author}}by {{intro.author}} · {{/intro.author}}
      {{$meta.renderedAt}}
    </p>
    <div class="prose">{{{intro.$body}}}</div>
  </body>
</html>

install

curl -L canvakit.sh/api/template/themed-brief -o themed-brief.canvakit.html