Couldn't open the file. Check the file and try again.
A small tip. Every color has a light and dark counterpart.
Loading preview / skeleton specimen
ReadyNeeds attentionFailed
An empty folder, a fresh start.
Create a note to put your first idea on the desk.
Your first note is ready. Find it in the Notes tab.
An idea you can follow
Decisions, handoffs, and a clearer next step.
Use a flowchart for a choice, a sequence for who does what, and a comparison for what gets easier. Each example explains the same task: saving and reopening a draft.
Choose the next step
When opening the workspace, check for a saved copy. Yes: open the saved draft. No: create a new draft. Both paths leave you ready to write.
Start
Open workspace
Decision
Saved copy exists?
Yes
Open saved draft
Keep working where you left off.
No
Create a draft
Start with a fresh page.
Build a flowchart like this
Stack steps inside p95-flow. Use two p95-flow-branch containers inside p95-flow-branches for a binary decision. Label each branch with its condition. At compact widths, the outcomes stack in reading order.
Read from top to bottom. Each numbered step names the sender, the receiver, and the work passed between them.
Editor → Workspace
Save draft
Send the current text and file name.
Workspace → Disk
Write file
Store the draft on this machine.
Disk → Editor
Confirm saved
Show “Saved” only after the write succeeds.
Build a handoff sequence like this
Use an ordered list with p95-sequence for a short trace or timeline. Put the participants, action, and result in each list item. Numbering carries order without relying on color or animation.
Keep the task and level of detail the same on both sides. Here, visual signposts replace guesswork when reopening a draft.
Before: find it yourself
Read a paragraph of setup notes.
Guess which command comes next.
The reader has to reconstruct the path.
After: follow the signposts
Check whether a saved draft exists.
Open it, or create a new draft.
The condition and next action are explicit.
Build a comparison like this
Compose p95-grid and p95-panel with visible “Before” and “After” headings. Keep the before state first in the document so the story still makes sense when columns stack.
Keep one question per figure. Write the takeaway in its caption, label every path, and keep essential meaning in real text. These examples use only pencil-95.css and native HTML.
A home for your words
The Markdown reader.
readme.md / rendered preview
The things worth keeping
A desk is a place for work in progress. This one has room for unfinished thoughts, overcomplicated plans, and the next useful thing.1
Make it simple enough to use. Leave a little evidence of the hand that made it.
Even the smallest detail can feel considered.
A list for a slower afternoon
Start with one useful idea.
Give it a clear name.
Find the smallest version that works.
Keep the things that help.
Leave some room for the next person.
Open a fresh document.
Write something real.
Read it once.
Make it a little clearer.
Save a copy.
Small, satisfying progress
Choose a direction
Make something useful
Leave room to improve
A little code, clearly set
Wrap rendered content in .p95-prose. Keep styles scoped to .p95. Press Ctrl + S to save.
A strong label for a smaller idea. Highlight the important bit and let the rest breathe.
A fifth-level heading
The same voice, one step quieter. H2O and x2 have room here, too.
A sixth-level heading
Still a heading. Still useful.
Window
A frame around a related set of things.
Paper
The reading surface inside the frame.
Figure 1. A familiar shape, with a human line.A note about Markdown support
Headings 1 through 6, paragraphs, links, emphasis, nested lists, task lists, blockquotes, code, tables, images, rules and footnotes are styled. Definition lists, disclosure, keyboard hints and highlights are included for renderers that emit HTML extensions.
