Back to site

Design system · draft 2 · Notion reference

Custody design system

The site builds from styles.css. This page renders every token and component so any page can be rebuilt from it.

Reference and principles

Borrowed from Notion (the system, not the assets)

  • White page, warm grey washes, bold plain sans headlines
  • Pastel tags for status and categories
  • Callouts, toggles, checklists and property lists
  • Hand-drawn ink notes in the margins

Custody's own

  • Bricolage Grotesque headlines, Figtree body, Caveat for handwritten notes (all self-hosted)
  • Our own doodles: one scribble underline, two margin arrows
  • Every demo shows the approval step and an exception
  • Logo: a rounded frame holding a solid core

Do

  • Write like a tidy shared doc: plain, direct, specific
  • Use pastel tags for meaning (status, timing, missing info)
  • Keep handwriting to two or three notes per page

Don't

  • Copy Notion's illustrations, logo or product names
  • Use emoji as section icons
  • Use more than one blue primary button per screen area

Color

Paper--paper #FFFFFF
Wash--wash #F7F6F3
Wash 2--wash-2 #EFEEEA
Ink--ink #191918
Ink 2--ink-2 #55534E
Ink 3--ink-3 #6F6D67
Accent--accent #2463D1
Line strong--line-strong #D3D1CB

Pastel tags

Yellow · waitingBlue · service, infoGreen · sent, doneRed · missingPurple · timingOrange · needs infoGrey · neutral

Light values shown. Dark mode redefines every token in styles.css.

Typography

Brand: friendly but credible, like a tidy shared document written by someone capable. Not corporate, not cute. Pick a pairing to preview it across this whole page.

Live specimen

The AI tools your small business actually needs

We build the everyday tools small businesses run on: replying to leads, processing paperwork, and answering staff questions.

Nothing goes to a customer until a person on your team approves it. 0123456789 · $2,184.50

Display · 40–72 / 700 / 1.02Answer leads faster.
H2 · 30–44 / 650 / 1.08Start with one tool
H3 · 20 / 650

What I'll need from you

Lede · 18–21

They draft replies, read invoices, and find answers in your own documents.

Body · 17

A person on your team approves every result before it goes out.

Kicker · 15 / 600

Control and reliability

Meta · 13.5

Dana Ruiz · 9:14 am

Hand · Caveat 24

nothing goes out until you click

Scribble

Less time on paperwork.

Space and radius

4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96. Sections 104px desktop, 64px mobile. Content column 1080px.

r-tag · 4

r-callout · 6

r-btn · 8

r-card · 12

r-block · 16

shadow-card

Motion: 120ms for state changes, 240ms for toggles, ease cubic-bezier(.3,.7,.3,1). Disabled under prefers-reduced-motion.

Components

Buttons

Inputs

Enter an email address like name@company.com.

Filter pills (tabs)

Callouts

Needs review. No PO number on this invoice.

Source: Service Policy v3, section 4.2

Failed. The CRM rejected this update.

Card with properties

Invoices / INV-20417Needs review

Properties

Vendor
Northgate Supply Co.
Total
$2,184.50
PO
Missing

Quote block

Could someone come out next week?
Dana Ruiz

Measured in a pilot: field accuracy, exception rate.

Checklist and toggle

  • A working tool in your accounts
  • Test results on agreed examples
  • One reviewer, about 2 hours a week
What do we keep if we stop working together?

Everything: the tool, code, prompts and documentation.

How long does a pilot take?

Usually 3 to 5 weeks.

Blocks

Blue block

Used once, for the pilot offer.

Wash block

Alternating section ground.

Placeholder mark

Pilot build from $[price]. Fill every one of these before launch.

Graphic style

Ink-line annotations only: 2px round-capped strokes in ink 2, one curve plus an open arrowhead, paired with a Caveat note. Scribble underline: one 5px accent stroke, used once per page. No characters or illustrations yet; those come from the design-loop step if approved.

a margin note