Skip to content
NockerlDesignv2.0.0

Info block / callout

In review
Live · web

Embedded in content: tab to a link, persistent (no dismiss)

Sessions stream over SSE and reconnect with backoff. The callout below sits in the prose like any other paragraph, and it stays put.

Note
Tokens are the source of truth: bind to --color-accent-primary rather than a literal. See the token contract for the full vocabulary.

Because it is part of the document flow, a callout never floats over the layout and is never dismissed.

Tones: a filled disc + text, never color alone

Tip
Press ⌘K to jump to any session. You can also pin a session from the picker to keep it at the top.
Warning
Running nockerl git push squashes local commits into one. Pass --preserve-commits to keep each commit separate.
Caution
DELETE operations are not proxied by the credential store. Destructive actions bypass the allowlist and cannot be undone. Confirm first.

Notice: the rare warm accent (orange), a special heads-up (not a status)

Notice
Special notice: agent spawning is now live. This warm orange accent is reserved for featured, seasonal, or heads-up announcements. See the design laws.

Important, the reserved emphasis: nested hairline frames

Important
Cyan is the one editorial-emphasis tone. Reserve important for the thing a reader must not miss. See the design laws.

Quote: an editorial pull-quote (italic, quietest, no disc)

Quote

Bounded autonomy: autonomy calibrated by task risk. Human-in-the-loop for judgment, AI for speed-to-next-decision.

Nockerl design principles

Custom eyebrow + icon off, still persistent prose

Pro tip
Demos consume var(--token) for every value, so changing one token in tokens.css re-skins the whole page at once.

Live: tab to the link, Enter / click (the island is live)

Try it
Tab to this link and press Enter, or click it. NockerlLink fired 0 times. It stays here, persistent in the prose.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. No Callout ships yet on ANY
// platform; this is the proposed @dizyx/nockerl-react API, derived from the
// shipped emphasis vocabulary (the agent ThinkingSegment + ToolSegment inset +
// the SettingsCard eyebrow + the markdown body styling). A callout is STATIC
// editorial prose, with no dismiss and no actions (that is the Banner).


export function InstallNotes() {
  return (
    <>
      <Callout tone="note">
        Bind to <code>--color-accent-primary</code> rather than a literal. See the{' '}
        <a href="/foundations/tokens/">token contract</a>.
      </Callout>


      <Callout tone="tip" title="Pro tip">
        Press <code>⌘K</code> to jump to any session.
      </Callout>


      <Callout tone="important">Cyan is the one editorial-emphasis tone.</Callout>


      <Callout tone="warning">
        <code>nockerl git push</code> squashes local commits into one.
      </Callout>


      <Callout tone="caution">Destructive actions cannot be undone.</Callout>


      <Callout tone="quote">Bounded autonomy: autonomy calibrated by task risk.</Callout>
    </>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
children *ReactNodeThe rich body: prose, links, and inline code. Bound to the body.medium role; this is what makes a callout read as embedded content rather than an alert.
tone'note' | 'tip' | 'important' | 'warning' | 'caution' | 'quote''note'Editorial tone. Drives the disc / frame color, the default eyebrow, and the icon. Cyan is used only for important (the one editorial-emphasis tone); tip/warning/caution are warm status tokens; note/quote use on-card, never cyan.
titlestringper toneThe uppercase eyebrow label above the body. Defaults to the tone name (Note / Tip / …). Never color alone, because the tone is carried by the disc + icon + label + text.
iconbooleantrueShow the leading tone icon, top-aligned to the first text line. quote ignores this and shows a quote glyph instead.

There is no dismissible / onDismiss / action. A callout is persistent editorial content. For a dismissible, action-bearing, app-state alert, use the Banner.