Sign up

Illustrations

LedgerIt draws the object an idea is about, not a scene around it: a receipt, an account, an approval, a log. The style is abstracted UI, built from the product's own tokens and type, so a drawing reads as a piece of the product.

Anatomy

Every slip has the same six parts. Most use only the first five.

  1. 1PaperSurface 000 with a line-strong hairline, radius md, tilted one or two degrees. No shadow.
  2. 2HeadAn icon or the organization's mark, the title at label weight, and an optional mono reference or muted lock.
  3. 3Greeked linesGray bars of falling width stand for text the drawing does not need to say.
  4. 4Dashed ruleSeparates the body from the one fact the slip is about.
  5. 5The pointOne fact and one ink mark: a check, a lock, an amount through Amount.
  6. 6Torn footOnly for paper that comes off a roll, like receipts and logs.

Examples

The six drawings in the home page's Control section, the three of its Memory section, and the receipt the inbox draws at miniature size.

  • View-only connections
  • Roles and approvals
  • An append-only audit trail
  • Encrypted credentials
  • Yours to take
  • A named accountant
components/marketing/landing/control-figures.tsx
  1. Question
  2. Rule from your answer
  3. Next month
components/marketing/landing/memory-figures.tsx
Miniature: the inbox's receipt, 76px wide
components/marketing/landing/approval-inbox.tsx

Rules

What keeps each drawing consistent with the next.

  • Draw the objectNot people, scenes or metaphors. An idea with no object gets no drawing.
  • One ink markThe ledger role marks the one thing that happened. Everything else is gray.
  • No signal colorGreen and red mean money. A drawing never uses them to decorate.
  • Real dataNames, amounts and accounts come from the demo company, so a drawing never disagrees with the page around it.
  • Few wordsA title and at most three short labels, all translated. A sentence belongs beside the drawing.
  • Tokens and scalesRoles, the type scale and the radii, like any screen, so it holds in dark mode and in Arabic.
  • DecorativeDrawings are hidden from screen readers. The copy beside them says what they show.

Build one

Compose a slip from the shared pieces, set it in a SlipFrame, and check it at phone width in both themes. Lettering below the type scale is allowed only on miniatures under 100px.

import { Slip, SlipFrame, SlipHead, Greeked, SlipRule, SlipMark } from "@/components/marketing/illustrations/slip"