FleshNote
FLESHNOTE π³Œπ³–π³‰π³€π³™π³›π³¦π³‰
DOCS // v1.3.0
Patchnotes GitHub
FLESHNOTE / DOCS / APP BRAND & DESIGN

FleshNote Brand & App Design Guide

BRAND IDENTITY

The aesthetic identity, naming origin, Hungarian RovΓ‘s ligature logo construction, strict no-rounded-edges geometry, semantic entity colors, and opinionated zero-fiddling UI philosophy.

Name Origin & Lore #

The name "FleshNote" is a direct homage to the creator's eternal novel project, "FleshStone" β€” a story for which hundreds of intricate worldbuilding notes, magic systems, and timelines sat in Obsidian for years while actual chapter prose was procrastinated.

The transformation from Stone to Note reflects the founding philosophy of this IDE: Write First, Note Second. The software is engineered specifically to eliminate worldbuilder procrastination and compel the author to produce manuscript text.

Logo Construction: The "Γ–sszerovΓ‘s" Ligature #

The FleshNote emblem is not an arbitrary geometric icon. It is constructed from the ancient SzΓ©kely-Hungarian RovΓ‘sΓ­rΓ‘s (Old Hungarian Runes, Unicode block U+10C80–U+10CFF) spelling out the name FLESHNOTE:

Word RovΓ‘s Glyphs Phonetic Mapping Unicode Points
FLESH 𐳌 𐳖 𐳉 𐳀 𐳌 (F) Β· 𐳖 (L) Β· 𐳉 (E) Β· 𐳀 (SH) U+10CC8 Β· U+10CC6 Β· U+10CC9 Β· U+10CC4
NOTE 𐳙 𐳛 𐳦 𐳉 𐳙 (N) Β· 𐳛 (O) Β· 𐳦 (T) Β· 𐳉 (E) U+10CD9 Β· U+10CDB Β· U+10CE6 Β· U+10CC9

In historical RovΓ‘s carving, multiple letters sharing common vertical or diagonal stems are fused into a single monogram called an "Γ–sszerovΓ‘s" (bound rune). The FleshNote logo unifies all 8 constituent runes into one sacred literary sigil.

Logo Evolution & Blueprint Concepts

[Concept Art: Early RovΓ‘s Glyph Sketches] concept_rovas_sketches.png

Figure 1: Initial sketches exploring stem overlaps and ligature balance across the 8 constituent runes.

[Vector Blueprint: Final Γ–sszerovΓ‘s Assembly] vector_osserovas_blueprint.png

Figure 2: Precise geometric vector alignment locking the bound rune monogram into 20px stroke vectors.

Vector Assets & Backgroundless SVG Code

For tools, splash screens, or external integrations requiring the raw backgroundless project picker glyph:

FleshNote Vector Glyph
Official Vector Monogram (`ide_icon.svg`)
Clean vector stroke glyph without bounding box backgrounds. Uses amber stroke color #D4A847 with viewBox="0 0 357 411".
SVG (Raw Glyph Vector Code) 
<svg width="357" height="411" viewBox="0 0 357 411" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M141.5 10C145.021 10 189.687 30.6595 226 74.6045V348.703C199.086 380.786 165.921 396 141.5 396C93 396 10 336 10 203C10 69.5 135.5 9.99995 141.5 10Z" stroke="#D4A847" stroke-width="20" stroke-linejoin="round"/>
  <line x1="31.9289" y1="311.929" x2="222.929" y2="120.929" stroke="#D4A847" stroke-width="20"/>
  <path d="M225.929 303L36 113.071" stroke="#D4A847" stroke-width="20"/>
  <line x1="162.536" y1="188.464" x2="223.536" y2="249.464" stroke="#D4A847" stroke-width="10"/>
  <line x1="190.536" y1="162.464" x2="223.536" y2="195.464" stroke="#D4A847" stroke-width="10"/>
  <line x1="112.071" y1="337.071" x2="46.0711" y2="403.071" stroke="#D4A847" stroke-width="20"/>
  <line x1="110.999" y1="87.1413" x2="46.9289" y2="23.0711" stroke="#D4A847" stroke-width="20"/>
  <path d="M226 9.92188C226.73 10.2521 227.594 10.6614 228.587 11.1592C232.245 12.993 237.331 15.8369 243.365 19.7324C255.437 27.525 271.055 39.361 286.484 55.4111C317.326 87.4942 347 135.926 347 202.554C347 338.414 267.632 395.467 226 395.922V9.92188Z" stroke="#D4A847" stroke-width="20" stroke-linejoin="bevel"/>
  <line x1="210.071" y1="280.929" x2="293.071" y2="363.929" stroke="#D4A847" stroke-width="20"/>
</svg>

Hungarian Runes as Universal Visual Flair #

Whenever cosmetic visual flair, animated accents, particle effects, or loading states are added to FleshNote, Hungarian RovΓ‘s runes must be the primary decorative motif:

  • Title Screen Transition: In ProjectPicker.jsx, the header smoothly shifts character-by-character from RovΓ‘s glyphs (𐳌 𐳖 𐳉 𐳀 𐳙 𐳛 𐳦 𐳉) to English Latin letters with a 140ms stagger.
  • Entity Extraction Loader: In EntityExtractorLoading.jsx, swirling particle runes (𐲆 𐲗 𐲖 𐲨 𐲀 𐲁 𐲂 𐲃 𐲄 𐲅 𐲈 𐲉) converge to fill the logo mask during asynchronous NLP processing.
  • Hardcore Focus Modes: Ambient particle trails and pulse effects in Zen and Fog sprint modes use glowing rune particles with text-shadow: 0 0 12px currentColor.

App Geometry: The "Hard Edges Only" Rule #

FleshNote evokes the aesthetic of a medieval scriptorium merged with a code terminal:

Strict Zero Border-Radius Policy (border-radius: 0px) Functional UI components (buttons, cards, inputs, tabs, dropdowns, context menus, and toolbars) must NEVER use rounded corners. Sharp rectangular edges convey tactile solidity and functional density.

The only permitted exceptions: The outermost desktop window frame (8px), circular avatar crop previews, and small notification badge count pills (8px).

Entity Type Semantic Color Palette #

Color is semantic, not decorative. Every story entity type has an assigned color token applied uniformly across TipTap editor link marks, sidebar inspectors, and relationship matrix graphs:

Entity Type Assigned Token Hex Value Visual Swatch
Characters --entity-character / --accent-amber #d4a052 Gold Amber
Locations --entity-location #5c9e6e Forest Green
Lore Items & Artifacts --entity-lore / --entity-item #5c8ec4 Sapphire Blue
Twists & Danger Phrases --accent-red #c45c5c Crimson Red
Quick Notes & Mentions --entity-quicknote / --accent-purple #8b6ec4 Royal Purple

Opinionated UI: No Theming & No Fiddling #

FleshNote is intentionally built with an opinionated, non-customizable theme:

  • No Theme Store or Custom CSS Loaders: There is no light mode, pastel theme, or custom background image setting.
  • Anti-Procrastination by Design: Writers using customizable apps frequently spend hours tweaking fonts, hex codes, and layouts as a form of productive procrastination. FleshNote delivers a single, perfectly calibrated dark environment so the author can focus 100% on drafting prose.
  • Accessibility Exception: The only visual override permitted is OpenDyslexic mode, which swaps font stacks while maintaining identical layout geometry and contrast.

Interaction Density & Asymmetric Click-Friction #

FleshNote applies asymmetric friction to user interactions based on whether an activity is directly productive or potentially distracting:

Interaction Category Target Click Friction Architectural Rationale
Productive Actions
Drafting, linking entities, time overrides, saving		 0 to 1 Click (Zero Friction)
Direct typing, `@mention` autocomplete, instant hotkeys (`Ctrl+S`, `Ctrl+B`).		 Eliminate any barrier between the author's brain and the manuscript canvas.
Deep Management Actions
Entity Inspector, bulk renaming, relationship matrices		 1 to 2 Clicks (Contextual)
Docked right-hand inspector panel, right-click context menu.		 Available on demand without obstructing the active writing viewport.
Non-Productive Rabbit Holes
Statistics dashboards, achievement charts, history graphs		 2+ Clicks (Intentional Friction)
Placed inside dedicated modal dialogs or secondary sub-tabs.		 Prevents the writer from procrastinating by staring at analytics or tinkering with lore instead of finishing the chapter.
On This Page