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

Better diagrams.
Better documents.

Help your agent turn complex ideas into clear, visual documents. Follow the connections, inspect the details, and comment where it matters.

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 SPECTRUM IDENTITY

A graphic document system with color that explains.

Spectrum builds a graphic identity from the contents of a rich document. Modular marks, substantial typography, and a coordinated set of visualization colors turn the product's expressive range into the brand's most visible asset.

Find the right signature.

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

Block documentRecommended

A folded page is assembled from four bold modules. Recommended because the same modules can organize diagrams, layouts, and motion.

Woven pages

Two folded strips interlock into a document symbol. The overlap suggests the combination of writing and visual explanation.

Open diagram

A C-shaped arrangement of blocks leaves a page-like counter in the center. It connects the name to a document built from visual parts.

Page mosaic

A deliberately asymmetric set of tiles forms a page in motion. Its four parts can carry the visualization palette in larger applications.

One color
Reversed
App icon
16px24px32px
Actual sizes

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

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

Geist gives the graphic system a direct, contemporary foundation. Substantial headlines and compact labels balance the color; body text remains neutral and readable.

Aa#6741D9
VioletBrand / actions
Aa#25232D
BlackHeadlines / text
Aa#FCFBFE
PaperBackground / documents
Aa#DCD7E8
RuleBorders / grid
Aa#E6A09A
CoralService diagrams
Aa#9ABFEB
BlueData diagrams
Aa#D2EBA3
LimeFlow diagrams
MESSAGING IN USE

Better diagrams. Better documents.

Help your agent turn complex ideas into clear, visual documents. Follow the connections, inspect the details, and comment where it matters.

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

Motion with a job to do.

Assemble a document from meaningful blocks. Keep each service's color consistent while switching from architecture to sequence to schema so the reader can track the same system.

Try the interactive example
clankerdocs

Better diagrams.
Better documents.

clankerdocs.com
DOCUMENT VISUAL LANGUAGE
customersordersorder_items

One customer. Many orders.
Every connection, explained.

WHY THIS DIRECTION

The broadest visual expression, with a graphic language that comes directly from rich document content.

THE TRADEOFF

Color must carry consistent meaning. Too many competing accents would make technical explanations harder to follow.