No. 26 · Editorial & content · Rate it
Margin
Long-form reading — warm paper, a narrow serif column, numbered sidenotes in a wide margin, a reader's highlighter and a quiet writer studio
A literary language for essays, magazines, newsletters and long reports, Persian-first. Warm paper and soft black ink, one plum ink for note numbers, links and the single action, and a pale highlighter that belongs to the reader. Literata (optical sizes) sets the reading column at about 66 characters with Inter for the interface; Persian runs in Vazirmatn with a looser line. The page is a grid: contents on the start side, the text in the middle, numbered sidenotes, margin notes and figure captions in the end margin — and on phones each note number opens its note inline. Reader controls change size and paper (white, sepia, night), a progress hairline tracks the read, and selecting text offers highlight, copy-quote and note. The writer studio has drafts, a calm editor with sidenote chips, live word count, outline and a pre-publish checklist, scheduling, a library, read-through stats and readers.








Best for
- Essays, magazines and literary journals
- Newsletters and paid writing
- Long reports, research and documentation
- Writer and editor studios
Not ideal for
- Dense dashboards and trading tools
- Loud retail and promotions
- Products that need many colours to signal state
Signature moves
- A narrow Literata column (~66 characters) on warm paper
- Numbered sidenotes, margin notes and captions in the end margin
- Note numbers open notes inline on phones
- Reader controls: size, paper (white, sepia, night), progress hairline
- Selection toolbar: highlight, copy quote, note
- Writer studio: sidenote chips, live counts, outline, checklist, schedule
Try it with another brand color
Opens the demo with only --brand changed. The style should still read as Margin.
Install this skill
/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install margin@tastefolionpx skills add tastefolio/tastefolio.github.io --skill margincurl -L https://tastefolio.github.io/downloads/margin.zip -o margin.zip
unzip margin.zip -d .claude/skills/Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/margin/SKILL.md for every UI change."Files
Rate this style
Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.