FleshNote
FLESHNOTE π³Œπ³–π³‰π³€π³™π³›π³¦π³‰
DOCS // v1.3.0
Patchnotes GitHub
FLESHNOTE / DOCS / STYLE GUIDE & STANDARDS

Documentation & UI Style Guide

STANDARDS

Design system rules and consistency guidelines for documentation writing, alert callouts, warning panels, typography, schemas, and UI components.

Purpose & Tone of Documentation #

FleshNote documentation is written for developers and technical contributors. The tone is clean, pragmatic, and direct:

  • No Product Marketing Pitch: Avoid promotional fluff ("revolutionary", "unrivaled"). State what the code does, where data is stored, and how algorithms work.
  • High Information Density: Lead with concrete types, schemas, and file paths rather than abstract summaries.
  • Actionable & Reproducible: Code snippets should be copy-paste ready and include exact CLI commands or schema definitions.

Callout & Alert Panels #

To maintain visual hierarchy, use the 4 standardized callout styles consistently:

Note Panel (.docs-alert.note) Use for general background context, non-critical architectural explanations, or helpful reference details.
Tip Panel (.docs-alert.tip) Use for performance optimizations, developer shortcuts, recommended VSCode workflows, and productivity tips.
Important Panel (.docs-alert.important) Use for crucial architectural rules, mandatory build requirements (e.g. PyInstaller before Electron), and strict code conventions.
Warning Panel (.docs-alert.warning) Use for breaking changes, database migration risks, potential data loss scenarios, and sync merge conflict cautions.
Alert Panel Rules: 1. Never place two alert panels immediately adjacent to each other.
2. Never nest alert panels inside tables or other alerts.
3. Always start with a concise bold header summarizing the rule.

Typography & Font System #

Typography across the documentation and IDE follows a strict semantic hierarchy:

Font Family Design Application Example Elements
Inter Body text, documentation prose, UI labels, button text. Paragraphs, headings, sidebar navigation items, modal dialogs.
JetBrains Mono Code snippets, SQL schemas, UUIDs, IPC channel names, table headers. {{char:ID|Name}}, window.api.saveChapterContent(), fleshnote.db.
Crimson Pro Literary quotes, novel manuscript previews, chapter excerpts. Export preview canvas, Pentimento manuscript text.
Noto Sans Old Hungarian RovΓ‘s glyph badges and branding accents. π³Œπ³–π³‰π³€π³™π³›π³¦π³‰ brand badges.

Code Snippets & Schema Formatting #

Every multi-line code block in documentation must be wrapped inside a .code-block-wrapper containing a .code-header with a language badge and a copy button (.btn-code-copy):

HTML Example Template 
<div class="code-block-wrapper">
  <div class="code-header">
    <span class="code-lang-tag">Python / FastAPI</span>
    <button class="btn-code-copy">Copy</button>
  </div>
  <pre><code>@router.post("/chapters")
async def list_chapters(payload: ProjectPayload):
    return {"chapters": []}</code></pre>
</div>

UI Consistency Rules in Desktop IDE #

When writing or reviewing code for the React frontend (src/renderer):

  • No Browser Native Popups: Never invoke window.confirm(), window.alert(), or window.prompt(). Always render customized dark/amber overlay modals matching the IDE theme.
  • Logical CSS for RTL Mirroring: All positioning and spacing must use CSS logical properties (inset-inline-start, padding-inline-start, margin-block) so Arabic and RTL layouts auto-flip seamlessly without media query hacks.
  • Dynamic Bounding Bounds: All right-click context menus and hover cards must use `useLayoutEffect` against their bounding ref to detect viewport overflow and flip coordinates (`left: auto; right: 100%`) before render.
On This Page