mokudocs

About

mokudocs

About

mokudocs v 1.0

Docs Hub

Welcome

Index

Welcome

Getting Started

Welcome

New

Quick Start Checklist

Updated

Template Overview

New

Support & License

Template Setup

Information Architecture

New

CMS Collections Setup

New

URL & Slug Rules

Updated

Writing Docs

Writing Style Guide

Updated

Using Doc Blocks

Adding Images, Diagrams, and Screen Recordings

Design Systems

Navigation (Side Nav + Current State)

Table of Contents (TOC) Pattern

Styling Guide (Typography + Code)

New

Updates & Support

Release Notes

Changelog

Roadmap

Troubleshooting & FAQ

Updated

Bookmarks

New

Dec 30, 2025

Design Systems

BOOKMARK

Save on this device

Styling Guide (Typography + Code)

Documentation should feel easy to read for extended periods, especially when pages combine explanatory text, UI references, and code.

MokuDocs uses a clean, restrained visual system designed to support scanning and comprehension rather than visual novelty.

Typography principles

prioritise readability over density
keep heading hierarchy obvious
avoid overly narrow body widths
use spacing to separate ideas clearly

Code principles

code should be easy to distinguish from body copy
inline code should be used for short references only
longer examples should live in dedicated code blocks
examples should be valid, readable, and worth copying

Practical guidance

Use typography and code styling to support clarity, not aesthetic experimentation. A documentation system should feel stable and dependable first.

What good looks like

readable line length
consistent heading rhythm
code samples that are clean and complete
tables and callouts that feel part of the same system

Helpful resources

Want a stronger foundation in Framer's layout and styling model? Start with these official lessons.

Framer Fundamentals

Link and color styles in Framer

Creating light and dark themes in Framer

Typography system

Element	Usage	Guidance
H1	Page title	One per page
H2	Primary section headings	Use for major content divisions
H3	Secondary section headings	Use only when needed
Body	Main explanatory content	Keep paragraphs concise
Inline Code	UI labels, variables, short code references	Use sparingly
Code Block	Full examples and snippets	Keep examples complete and readable

Typography system

Element	Usage	Guidance
H1	Page title	One per page
H2	Primary section headings	Use for major content divisions
H3	Secondary section headings	Use only when needed
Body	Main explanatory content	Keep paragraphs concise
Inline Code	UI labels, variables, short code references	Use sparingly
Code Block	Full examples and snippets	Keep examples complete and readable

Typography system

Element	Usage	Guidance
H1	Page title	One per page
H2	Primary section headings	Use for major content divisions
H3	Secondary section headings	Use only when needed
Body	Main explanatory content	Keep paragraphs concise
Inline Code	UI labels, variables, short code references	Use sparingly
Code Block	Full examples and snippets	Keep examples complete and readable

Code block example

type DocPageProps = {
  title: string
  summary?: string
  blocks?: Array<{
    type: "table" | "code" | "image" | "note"
    title: string
  }>
}

export function DocPage({ title, summary, blocks = [] }: DocPageProps) {
  return (
    <article>
      <h1>{title}</h1>
      {summary ? <p>{summary}</p> : null}

      {blocks.length > 0 && (
        <section>
          <h2>Included Blocks</h2>
          <ul>
            {blocks.map((block, index) => (
              <li key={index}>
                {block.title} — {block.type}
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  )
}

Code block example

type DocPageProps = {
  title: string
  summary?: string
  blocks?: Array<{
    type: "table" | "code" | "image" | "note"
    title: string
  }>
}

export function DocPage({ title, summary, blocks = [] }: DocPageProps) {
  return (
    <article>
      <h1>{title}</h1>
      {summary ? <p>{summary}</p> : null}

      {blocks.length > 0 && (
        <section>
          <h2>Included Blocks</h2>
          <ul>
            {blocks.map((block, index) => (
              <li key={index}>
                {block.title} — {block.type}
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  )
}

Code block example

type DocPageProps = {
  title: string
  summary?: string
  blocks?: Array<{
    type: "table" | "code" | "image" | "note"
    title: string
  }>
}

export function DocPage({ title, summary, blocks = [] }: DocPageProps) {
  return (
    <article>
      <h1>{title}</h1>
      {summary ? <p>{summary}</p> : null}

      {blocks.length > 0 && (
        <section>
          <h2>Included Blocks</h2>
          <ul>
            {blocks.map((block, index) => (
              <li key={index}>
                {block.title} — {block.type}
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  )
}

‹ Table of Contents (TOC) Pattern

Release Notes ›

Styling Guide (Typography + Code)

Documentation should feel easy to read for extended periods, especially when pages combine explanatory text, UI references, and code.

Typography principles

Code principles

inline code should be used for short references only

Practical guidance

What good looks like

Helpful resources

Typography system

Typography system

Typography system

Code block example

Code block example

Code block example