Type

Handwritten Notes

Research notes

this bit matters!

Circle the step people skip. In testing, eight of twelve missed the confirm button on the second screen.

Tokens

The pairing as CSS

/* Handwritten Notes · type pairing · Designed using Design Lounge (https://www.designlounge.live) */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --font-display: "Caveat", cursive;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
body {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.55;
}
/* No mono in this pairing. Code uses the system mono; amounts stay in the text face with even-width digits. */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
}
.num {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}