All proposals
05 / 06Margin
4 logo concepts
clankerdocsSee it in action
VISUAL DOCUMENTS FOR CODING AGENTS

Complex systems.
Clear documents.

Give your agent a better way to explain its work. Read the design, explore the diagrams, and review the details together.

Agent-authored Human-reviewed Rich visuals
ONE DOCUMENT. MORE WAYS TO EXPLAIN.
ArchitectureSequence diagramsDatabase schemasPseudocodeWireframes
BUILT FOR HOW AGENTS WORK

Your agent has more
to show you.

A Markdown file can describe a system. A rich document lets you follow its connections, inspect the details, and review the design in place.

Give your agent a shared document with expressive visuals, precise comments, and a history of every revision.

Try the example

One system.
Every important detail.

Select a service. Follow a request. Inspect the schema.
Then leave a comment and preview the agent's revision.

EngineeringOrder processingInteractive example
SYSTEM DESIGN / ENGINEERING Revision 01

How an order gets processed.

The API records each order before queuing it. A worker handles fulfillment, so checkout stays fast even when downstream services are slow.

Five services. One order.
Order processing architecture. Storefront to Order API, queue, worker, and Postgres.ORDER PROCESSINGPOST /orderspublishconsumeupdate statusrecord01 — CHECKOUTAn order, fromrequest to result.UIStorefrontThe checkout interfaceAPIOrder APIValidates and records ordersQOrder queueBuffers accepted ordersFNOrder workerProcesses queued ordersDBPostgresStores orders and results
Select a service to inspect it. Every view describes the same system.
FN
SELECTED COMPONENTOrder worker

Processes queued orders. Review the behavior in the connected views.

Design decision · Process orders asynchronously

Persist the order first. Keep fulfillment outside the checkout request.

01

Your agent creates.

The plan becomes a document with clear writing and useful visualizations.

02

You review.

Leave a precise comment on a component, diagram, or explanation.

03

Your agent revises.

The document improves. Every revision stays available in its history.

THE MARGIN IDENTITY

Editorial typography meets precise engineering diagrams.

Margin combines the care of technical publishing with the capability of modern software. A distinctive serif headline, dark green ink, and ruled document layouts make the identity feel established and considered. The interactive diagrams provide the contemporary edge.

Find the right signature.

Select a mark to see it applied throughout this proposal. Each concept is an original vector drawing.

Reading marginRecommended

A strong left margin and inset text create a document-shaped C. Recommended for a quiet, distinctive mark that can carry an editorial identity.

Turned leaf

Two spare, interlocking page edges create a folded leaf. The generous open space gives this option an elegant, legible silhouette.

CD monogram

A C opens inside the vertical structure of a D. Their shared stem resembles the bound edge of a document.

Bound notes

A compact binding joins three lines of content. It recognizes the document through its construction rather than its outline.

One color
Reversed
App icon
16px24px32px
Actual sizes

Reading margin is currently applied to the wordmark, document, and review interface.

NEWSREADER + GEIST
Aa0123

Understand
the whole system.

BODY / INTERFACE / CODE

Order processing

The API records each order before adding it to the queue. A worker handles fulfillment and updates the order status.

ReviewedRevision 02
POST /orders → queue → worker

Newsreader gives large headlines an editorial character. Geist carries the body and interface. This contrast creates a premium reading experience without sacrificing technical clarity.

Aa#275548
ForestBrand / actions
Aa#253C34
InkHeadlines / text
Aa#F7F6F0
IvoryBackground
Aa#FFFFFF
WhiteDocument surface
Aa#D0D8CA
StoneBorders / grid
Aa#D4EA91
LimeDiagram emphasis
MESSAGING IN USE

Complex systems. Clear documents.

Give your agent a better way to explain its work. Read the design, explore the diagrams, and review the details together.

Explain the architecture.Comment on the details.Keep every revision.
CREATE → EXPLAIN → REVIEW

Motion with a job to do.

Reveal one detail at a time as the reader explores. Open a layer, follow an annotation, or expand the relevant code. Favor controlled transitions that preserve reading position.

Try the interactive example
clankerdocs

Complex systems.
Clear documents.

clankerdocs.com
DOCUMENT VISUAL LANGUAGE
customersordersorder_items

One customer. Many orders.
Every connection, explained.

WHY THIS DIRECTION

The strongest reading identity: premium, calm, and especially credible for substantial technical documents.

THE TRADEOFF

The editorial tone needs expressive product demonstrations to make the agent capabilities immediately apparent.