Design

Jot is designed like a printed page. Paper and ink, one typeface, a visible grid, square corners and one signal colour. Nothing is decoration: every rule, shape and colour carries information or holds the grid.

1 · Principles

1. Words first. The note is the largest thing on the screen. Tools stay small, grey and out of the way.
2. One face. JetBrains Mono everywhere, so every character lines up like a typewriter page. Hierarchy comes from size, weight and capitals, never from a second font. Because every weight and slant has the same width, formatting can be drawn right under the text as you type.
3. Square. No rounded corners. The only curves are true circles and the phones in pictures.
4. The grid shows. Twelve columns, drawn as hairlines in the gutters. Text sits flush left on a column edge.
5. One signal. Ochre marks what matters now: the open tab, the open note, a pin, the caret. Never body text on paper.
6. Plain words. Short sentences, sentence case, no exclamation marks, no jargon.

2 · Colour

Eight tokens per theme, in css/paper.css. The app and the site read the same file.

Paper (light)

• paper#f1ece2the page
• sheet#f8f5eethe note, dialogs
• ink#1f1d1atext, solid shapes
• ink-2#5d574dsupporting text
• ink-3#645e53labels, dates, 4.6:1
• rule#ddd5c6hairlines
• signal#b07d00marks and shapes
• signal-ink#8a5f00signal as text, 4.8:1

Carbon (dark)

• paper#151412the page
• sheet#1b1a17the note, dialogs
• ink#ebe5d9text, solid shapes
• ink-2#a39b8bsupporting text
• ink-3#958f81labels, dates, 4.8:1
• rule#2a2824hairlines
• signal#e0aa2amarks, shapes and text
• select#272420the open note in the list

Ochre was chosen to stand apart from the maker's other tools (Swoop is orange, Pinch blue, Flick lime, Scrawl yellow) and from Claude's clay. On paper it is too light for small text (3.1:1), so text uses the darker #8a5f00. Ink on an ochre fill reads at 4.6:1.

3 · Type

JetBrains Mono, one variable file, weights 400 to 800. Contextual alternates off, slashed zero on.

Role	Size	Weight	Tracking
Display	44–108 px	800	−6.5%
Section heading	28–52 px	800	−5%
Card heading	17–20 px	800	−3%
Body, note text	15–18.5 px	400	0, leading 1.65–1.75
Label	10.5–12.5 px	700, capitals	+12–14%

4 · Grid

Twelve columns on wide screens and four on phones, with gutters of 14–28 px and a 1320 px maximum. The hairlines sit in the middle of each gutter, so a column's text starts on its edge. Section heads use one pattern everywhere: the number in column 1, the label in columns 2–4, the heading from column 5 (shown in ink below).

5 · Geometry

Every shape is built from the grid's square module: whole circles, squares, quarter and half circles, and two print textures, a halftone dot screen and a 45° hatch. They are filled with ink, the signal or a texture, never a gradient.

6 · Components

Buttons are ink blocks or ink outlines, 40 or 54 px tall, square. Hover turns an ink button ochre. In the app, the list row for the open note gets a 3 px ochre bar; a pinned note, a small ochre square; the open tab, an ochre underline.

7 · Icon

A lowercase j drawn from squares and one curve, followed by an ochre cursor, as if the word is still being typed. The maskable version shrinks the glyph to 70% so Android's circular crop never cuts the cursor.

8 · Research

• Josef Müller-Brockmann, Grid Systems in Graphic Design: the modular grid, flush-left text, information over decoration.
• iA Writer: typography as the interface, a monospaced face, nothing around the words.
• Simplenote and Simple Notes: a list and an editor, pins, search and nothing else.