Skip to content
NockerlDesignv2.0.0

Markdown content

In review
Live · web

Density

Comfortable · docs

Orchestrating a session

Nockerl renders assistant replies as styled prose, not raw text. The same renderer drives chat bubbles and these docs. Bind to a type role and the whole scale moves together. Mention a tool inline as nockerl session send and it reads as code.

What it composes

One prose surface lays out every markdown element on a single left edge with a steady vertical rhythm:

  • Headings, paragraphs, bold and italic runs
  • Inline code chips and fenced code wells
  • Lists, blockquotes, tables, rules, and figures

Run order

  1. Author the component spec on the docs site
  2. Sign-off lands on the design
  3. Resolve to tokens and publish

Review checklist

  • Resolve raw values to design tokens
  • Ship to the per-platform packages (@dizyx/*)
  • Conform the web dashboard last

The canonical look is sourced from the Android and Voice apps, never the web dashboard, which is conformed last.

Streaming snippet

await nockerl.send(
  'project:nockerl-design::primary',
  'Pick up the next ticket.',
);  // hand work to another session

NockerlSurface mapping

ElementType roleSpacing
h1title / headline24 px above
Paragraphbody.medium16 px flow
List itembody.medium8 px gap
Figure 1: an inline image renders full-width with a muted caption.

Density: comfortable · checklist 2/3 done. Tab to the checkboxes, link, and toggle. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
// Renders a whole markdown string as styled prose: headings bind to the type
// ramp, inline + fenced code reuse <CodeBlock>, links reuse <NockerlLink>.


export function AssistantMessage({ markdown }: { markdown: string }) {
  return (
    <MarkdownContent
      content={markdown}
      density="compact"          // chat-bubble density; "comfortable" for docs
      onImageClick={openLightbox}
    />
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
content *stringThe raw markdown to render as styled prose.
density'comfortable' | 'compact''comfortable'Typographic scale + spacing rhythm. compact = chat-bubble density (the Android heading map); comfortable = docs density (the scale stepped up).
onImageClick(src: string) => voidInvoked when a rendered markdown image is clicked (opens a lightbox).
textColorstringBody text color override. Defaults to the surface's on-* token (e.g. on-card in an assistant bubble).