Kuickr House Style

The canonical guide for authoring rich pages that Kuickr hosts. Read this before you write a page, whether you are a human, the CLI, or an agent using the MCP kuickr_style_guide tool.

Building something rich, animated, or design-forward? First call kuickr_recipes (action=search — e.g. "animated landing", "gradient hero", "3d mockup", "scroll story") for a proven recipe with copy-paste technique, then apply this house style over it.

Kuickr pages should feel like permanent, useful documents: structured, scannable, token-driven, and easy to revisit. The current design authority is the design-system registry, not a copied private palette.

Design systems

Agents and humans choose a named design system before authoring.

Fetch the current registry instead of copying stale tokens:

GET /api/v1/design-systems
GET /api/v1/design-systems/kuickr/tokens.css
GET /api/v1/design-systems/kuickr/DESIGN.md
GET /api/v1/design-systems/game/tokens.css
GET /api/v1/design-systems/game/DESIGN.md
GET /api/v1/design-systems/inventlist.com/tokens.css
GET /api/v1/design-systems/nodepad/tokens.css

Over MCP:

kuickr_list_design_systems
kuickr_get_design_system { "id": "kuickr" }
kuickr_get_design_system { "id": "game" }
kuickr_get_design_system { "id": "inventlist.com" }
kuickr_get_design_system { "id": "nodepad" }

The default Kuickr system uses --kk-*: Libre Baskerville for display, Space Grotesk for UI, JetBrains Mono for code/meta, ink as primary, brass as secondary, semantic card colors for decision/blocker/question/idea/outcome, and an explicit [data-theme="dark"] override. Do not use a system-preference dark mode block for new pages. The root DESIGN.md is the Stitch-style AI-readable companion for these tokens; the CSS token files remain the runtime source.

The game system uses NOCTURNE --gm-* tokens: midnight ink, cream text, ember-to-gold living light, ice-teal live state, beveled instrument panels, and the same display/UI/mono font trio as Kuickr. Use it only for the play shell, MCP-authored games, and published game pages. It is intentionally separate from docs and books.

The Nodepad system uses the app/product track from the InventList docs: Inter for body UI, Instrument Serif for display headings, and JetBrains Mono for metadata, refs, timestamps, and keyboard hints. Runtime-book/editorial mockups may use Fraunces, but hosted Nodepad-style pages should start with the product track. Font size settings are S 13px, M 15px, L 17px; the default is M 15px. Composer scale is title 22px, body 15px, metadata 11px. Reading widths are narrow 576px and wide 768px. Rhythm is 4/8/12/16/24/32/48/72px.

Token Rules

1. Use one named design system per page unless the page is explicitly comparing systems.
2. Inline or link the fetched token CSS before page styles.
3. Reference tokens with var(--kk-...), var(--gm-...), var(--np-...), var(--kind-...), or var(--operator-...).
4. Do not hard-code product colors in page CSS. Raw hex values belong in token files only.
5. Use explicit theme attributes: light by default, [data-theme="dark"] only when a page ships a real dark variant.
6. Keep generated HTML self-contained when it is sandboxed; do not assume the Kuickr chrome CSS will leak into the iframe.

Page Anatomy

Use this structure for rich docs and high-bearing pages:

1. Eyebrow: mono, uppercase context such as Spec 35 / design system.
2. Title: one clear h1; use the design-system display font.
3. Lede: one or two sentences that explain the outcome.
4. Meta row: owner/source/status/revision/date.
5. Sections: short h2 headings, each with a one-line setup when useful.
6. Structured blocks: tables, callouts, code blocks, flow rows, and status rows.
7. Footer: source path, revision, and Kuickr attribution when relevant.

Minimal Kuickr HTML skeleton:

<div class="page" data-theme="light">
  <style>
    /* Paste the tokens_css returned by kuickr_get_design_system here. */
    body {
      margin: 0;
      background: var(--kk-wash);
      color: var(--kk-text);
      font-family: var(--kk-font-ui);
      line-height: 1.6;
    }
    .page {
      max-width: var(--kk-read);
      margin: 0 auto;
      padding: var(--kk-s-7) var(--kk-s-5);
    }
    .eyebrow {
      font-family: var(--kk-font-mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--kk-secondary);
    }
    h1 {
      font-family: var(--kk-font-display);
      font-weight: 400;
      font-size: 48px;
      line-height: 1.08;
      color: var(--kk-ink);
    }
    .callout {
      border-left: 3px solid var(--kk-secondary);
      background: var(--kk-secondary-soft);
      border-radius: var(--kk-r-sm);
      padding: var(--kk-s-4);
    }
  </style>

  <div class="eyebrow">Spec 35 / design system</div>
  <h1>Project Atlas</h1>
  <p class="lede">One sentence on what this is and who it is for.</p>
  <p class="meta">status: partial / rev 1 / 2026-06-29</p>

  <h2>At a glance</h2>
  <table>
    <tr><th>Thing</th><th>State</th></tr>
    <tr><td>Token system</td><td>current</td></tr>
    <tr><td>MCP delivery</td><td>available</td></tr>
  </table>
</div>

Minimal Nodepad HTML skeleton:

<div class="np-tokens np-wash page" data-theme="light" data-density="comfortable" data-font-size="m">
  <style>
    /* Paste the tokens_css returned by kuickr_get_design_system {"id":"nodepad"} here. */
    body {
      margin: 0;
      background: var(--np-wash);
      color: var(--np-text);
      font-family: var(--np-sans);
      font-size: var(--np-font-size);
      line-height: var(--np-line-height-body);
    }
    .page {
      max-width: var(--np-reading-narrow);
      margin: 0 auto;
      padding: var(--r-6) var(--r-4);
    }
    h1 {
      font-family: var(--np-display);
      font-size: var(--np-font-size-title);
      line-height: var(--np-line-height-title);
      color: var(--np-ink-runtime);
    }
    .meta {
      font-family: var(--np-mono);
      font-size: var(--np-font-size-meta);
      color: var(--np-muted);
    }
    .kind {
      font: 600 var(--np-font-size-kind)/1 var(--np-sans);
      letter-spacing: .04em;
    }
    [data-theme="dark"] .page {
      background: var(--np-wash);
      color: var(--np-text);
    }
  </style>

  <p class="meta">nodepad / light default / dark ready</p>
  <h1>Working notes</h1>
  <p>Use Nodepad tokens for app/workspace pages, capture docs, and notepad-style surfaces.</p>
</div>

Writing Rules

1. Lead with the outcome. The first screen should answer what this is and why it matters.
2. Keep prose to a reading measure around var(--kk-read) or the selected system's equivalent.
3. Use tables for structured facts; do not bury state in paragraphs.
4. Use callouts for constraints, decisions, blockers, and risks.
5. Tag code fences with a language.
6. Link relatively inside a hosted folder when possible (other.html, sub/x.html, ../y.md).
7. Use the canonical URL returned by kuickr_pages for exact page references.
8. Keep one visual family per page. Mixing --kk-* and --np-* is only for comparison pages.
9. Match sibling pages before editing: search/read them first, then write.
10. Prefer durable headings and clear section names over decorative copy.

Authoring Via MCP

Use this sequence:

1. Call kuickr_style_guide.
2. Call kuickr_list_design_systems.
3. Call kuickr_get_design_system for the intended system and paste or apply its tokens_css. For the kuickr system, read /api/v1/design-systems/kuickr/DESIGN.md when you need the design rationale and component guidance, not just raw CSS.
4. Use kuickr_pages with action=search or action=read to match nearby pages.
5. Use kuickr_page with action=create or action=append to publish.

For the requested Nodepad app/workspace look, choose nodepad; for broader InventList.com docs, choose inventlist.com; for Kuickr's own product look, choose kuickr.

See also: Design systems ↗ — the token sets a page can be authored in.