UI/UX Design Brief

A prompt for an AI design tool (or a designer) to produce and refine Jotry’s screen designs and visual language. It covers the Release 1 scope only, as defined in the project plan.

The visual direction is chosen: Studio Stationery — Graphite, from the Jotry project in Google Stitch. Both apps already implement it (Android ui/Theme.kt, iOS EditorStyle.swift and the SwiftUI screens), so this brief asks for refinements and missing states, not new directions.

Items marked (new) are decided in the project plan (D-15 to D-25). Both apps now have a first version of each (with a thumb-reach bottom bar: Notebooks, Search and New note); generated titles are on iOS only so far. They still need considered designs: the top-level list and hidden default notebook, pinned notes, multi-select, the undo bar, quick capture, automatic titles, note lookup with back/forward, and links between notes. Everything else describes what the apps do today; designs must fit it rather than invent features.

Paste everything below the line into the design tool.

You are a senior product designer. Refine the screens and visual language of Jotry, a private note-taking app for Android and iPhone. The design direction is established (below); keep it, extend it to every screen and state listed, and point out anything that weakens it.

The product

Jotry is a calm, trustworthy place to write. People write formatted notes, keep them in notebooks, and can go back to earlier versions of a note. It works fully offline with no account and no cloud. Nothing leaves the device. The emotional promise is: “your words are safe here, and nothing is ever lost.”

Core principles that must show up in the design:

• Local and private: no sign-in, no sync badges, no social features. A quiet “Saved” badge is the only save indicator.
• History is kept: changes are saved automatically and kept as versions (one per minute of writing, see the editor). Restoring an old version never erases the current one.
• Formatting without syntax: notes are stored as Markdown behind the scenes, but users never see Markdown characters. Headings, bold, lists, quotes, code, links and checkboxes always appear formatted, including while typing. There is no “source mode”.
• No decisions before writing (new): capturing a thought needs no title and no notebook choice. Titles are automatic.
• Undo, not “Are you sure?” (new): deleting and moving happen at once and offer a brief Undo bar instead of a confirmation dialog.

Design direction: Studio Stationery — Graphite

Charcoal ink on archival paper. Restrained, precise and quiet, drawn from drafting paper, ledger books and index cards, translated into modern flat form (no skeuomorphic textures).

• Color: charcoal ink and slate graphite for content and controls, muted slate for metadata, green reserved for the “Saved” state only. No other accent color. Depth comes from tone and 1px hairline borders, not shadows.
• Type: DM Sans for interface and note text; JetBrains Mono for metadata stamps (dates, times, counts, badges), usually uppercase and letterspaced, and for code. Both are free (SIL Open Font License) and bundled in the apps.
• Metaphors in use: notebooks as bound volumes with a coloured spine on the card’s left edge; notes as index cards; pinned notes as cards clipped to the top of the desk; history as a dated timeline of drafts; the formatting toolbar as a pen tray docked on the keyboard; checkboxes as square ledger ticks.
• Shapes: 4dp/pt controls, 8 cards, 12 sheets and dialogs. Icons are line icons at about 1.75px stroke with rounded caps.

Tokens in use (light / dark)

Type scale in use: note title 26/34 bold; headings 22/30, 19/26 and 17 semibold; note body 16/26; card title 16/22 semibold; secondary 13/20; mono stamps 12/16 and 11/16; code 14/21 mono. Propose changes only with a reason.

Platform stance

• One shared visual identity across Android and iOS: the same colors, type, iconography, components and motion.
• Keep behaviors people rely on, and use the system’s own versions of them: back gesture, text selection handles, the system keyboard, share and file pickers, Dynamic Type and font scaling, screen readers. Don’t redraw these. Style around them.
• Avoid platform signatures that would make it look like a clone: no Material FAB-and-app-bar template and no default iOS grouped-list look.
• Phones first (portrait). Note how layouts could grow to tablets later.

Screens to design (Release 1)

The hierarchy has exactly two levels (D-15): the top level holds notebooks plus the notes that aren’t in any notebook, and notebooks hold only notes (no nesting). Notes created outside a notebook go into a built-in default notebook that the user never sees as a notebook: its notes simply appear at the top level. There is no visible Inbox.

1. Top-level list (new; replaces the notebook list and its Inbox card): the app mark at the top; then, in order, pinned top-level notes, the notebooks, and the unpinned top-level notes (most recently edited first). Notebook cards keep the spine, “VOL. 01 · 12 NOTES” stamp and name, with rename, reorder (move up/down), archive and delete in a card menu. Deleting a notebook never deletes its notes: they move to the top level, and the Undo bar puts the notebook and its notes back (D-21: once the bar has gone, the notebook can’t be restored from Trash, but no notes are lost). Archived notebooks sit in a collapsible “Archived” section. A clear “New note” action and a quieter “New notebook” action. Search, Trash and Settings are reached from the top bar.
2. Notebook’s note list: a header card with the notebook name, note count and a full-width “New note” primary button; then pinned notes, then “Sorted by last edit” and note cards with a time stamp (“TODAY 14:32”, “YESTERDAY 18:05”, “MAR 12”), title, two-line preview and a task-progress badge (“1/3 tasks”). Card menu: Pin/Unpin, Move, Move to trash.
3. Pinned notes (new, D-16 and D-19): pin and unpin from a note’s menu (and from the note itself). Pinned top-level notes show at the very top of the top-level list; pinned notes in a notebook show at the top of that notebook only. Pinned notes are ordered by most recent edit, with no limit and no manual ordering. Pinning isn’t an edit (no new version, no change to the edited time), so the design should not imply it changed the note. Give pinned cards a quiet pin marker and a section label.
4. Multi-select (new, D-18): in any note list, press and hold a note to enter selection mode with it selected; tap to add or remove notes; Select all; then Move (to any notebook or the top level) or Delete. The bar shows how many are selected. Back or Cancel leaves selection mode and changes nothing.
5. Note editor, the most important screen:
   • A live formatted editor with headings (three levels; the tool cycles H1 → H2 → H3 → off), bold, italic, strikethrough, bullet and numbered lists, nested checklists shown as real tappable checkboxes, quotes, inline code, code blocks and links.
   • Lists continue on Return; Return on an empty item steps out one level, then out of the list. Indent and outdent move list items.
   • Pen-tray toolbar docked above the keyboard: a stats row (word and character counts, undo, redo), then a horizontally scrolling rail with heading, bold, italic, strikethrough, checklist, bulleted list, numbered list, indent, outdent, quote, inline code, code block and link. Active tools are filled ink with on-ink glyphs. On iOS the rail also has “hide keyboard”.
   • Automatic title (new, D-23): the user never has to type a title, and no separate title field is shown while writing. The first line serves as the title at once; on devices with an on-device language model (Apple Foundation Models, Gemini Nano), a short generated title may replace it once the note has been idle for a few seconds. Nothing leaves the device and nothing is ever downloaded or switched on for this. Show the title in the note header; tapping it edits it, and a hand-edited title is never replaced. Design how a generated title arrives (quietly, without moving the text being typed) and how a user-set title looks, if at all different. (Today’s apps still have an optional title field; it goes away with this.)
   • Links (changed, D-25): the link tool opens a single field, with no choice to make first. If what’s typed looks like a web address (a scheme such as https:// or mailto:, a leading www., or a domain like example.com/page, with no spaces), the top suggestion is that web link. Otherwise the field lists matching notes from the note lookup, and offers “Create note “…”” when nothing matches. Selected text becomes the link’s label. Typing [[ in the text opens the same note lookup inline and always means a note link. Note links and web links both look like links (never syntax); consider whether note links are distinguishable (for example a small note glyph). A note link shows the target’s current title unless the user typed a label, and keeps working when the target is renamed or moved. Editing an existing link offers Remove.
   • Code is typed exactly: inside code the keyboard stops capitalizing, autocorrecting and substituting smart quotes. Show code visibly distinct (monospace on a code panel).
   • Save state: a pill badge in the editor header: “SAVED” (green dot), “EDITED”, “SAVING” or “NOT SAVED”. No save button. The app saves once 35 characters have changed or 10 seconds after the first unsaved change, and immediately when the editor closes, the note is left or the app goes to the background.
   • The note’s notebook appears as a badge in the header. Entry points: Done (back to the read view), note lookup, History, Pin, Move to notebook and Move to trash.
   • A new note opens straight in the editor. A new note left without any content is discarded when you leave it; design no prompt for this.
6. Note lookup and back/forward (new, D-17 and D-20): from inside any note (reading or editing), open a lookup that fuzzy-searches note titles, then bodies; title matches rank first, and trashed notes never appear. Choosing a result opens that note. Navigation then works like a browser: Back returns to the previous note, Forward returns again, repeated jumps extend the trail, and notes deleted during the session are skipped. Following a note link counts as a jump. Design the lookup (a sheet or overlay with a field and ranked results, highlighting matches as search does) and how back and forward are offered inside a note, distinct from leaving the note. The trail isn’t kept between launches; the app reopens on the last open note.
7. Read view of a note: the note on a sheet, formatted and read-only, but checkboxes can still be toggled and links can be followed; an Edit action; a notebook badge and “EDITED TODAY 14:32” stamp. A note in the trash shows an “In the trash” banner with Restore.
8. History timeline: versions grouped by day (“TODAY — SEP 30”, “YESTERDAY — SEP 29”, “FRI, SEP 26”), each with its time (HH:MM, local), what happened (Edited, Checklist updated, Moved, Moved to trash, Restored from trash, Restored earlier version, Imported, Copied from history, Created) and the title at that time. The newest is marked CURRENT. While writing, history keeps one version per minute; other actions always add a version. Explain in one line that restoring never removes the current version.
9. Revision preview: the old version on a sheet with its date, time and reason, and two clear actions, “Restore as current” (primary, disabled when it is already current) and “Copy to new note” (secondary). Restoring is not destructive, so it may keep a reassuring confirmation: it becomes a new current version and the present one stays in history.
10. Search: a search field over titles, text and checklist items; result cards with the notebook badge, task progress and a snippet, with matches highlighted in title and snippet (ink, heavier weight, on the highlight token). States: before typing, results with a count, and no matches. Results can be selected like any note list (press and hold, or Select in the More menu) and moved or deleted together (D-41).
11. Trash: deleted notes as cards with Restore; they keep their full history. Opening one shows the read view with the “In the trash” banner. Permanently deleting from Trash is still an open question; the leading option is to delay the purge until the Undo bar has gone, so it needs no dialog either.
12. Settings: export all notes as Markdown files (one folder per notebook), import Markdown files or a folder (with a plain-language import summary), a short privacy statement (notes stay on this device; no account, cloud or sync; Android backups only when end-to-end encrypted, iOS backups exclude notes), and the app version.
13. Quick capture (new, D-22): long-pressing the app icon offers Quick capture (an Android app shortcut, an iOS Home Screen quick action). It opens a blank note with the keyboard already up, at the top level, with nothing to choose. Leaving it untouched discards it. Design the shortcut’s label and glyph and confirm the editor needs no extra chrome for this entry.
14. Undo bar (new, D-24): deleting a note, deleting selected notes, deleting a notebook and moving notes happen immediately and show a brief bar at the bottom (“Moved to trash · Undo”, “3 notes moved to Work · Undo”, “Notebook deleted, its notes are now at the top level · Undo”). It stays about six seconds and is dismissed by the next action. Undo puts everything back exactly. There are no “Are you sure?” dialogs for these actions.
15. Empty states and first run: an empty top level (no notebooks and no notes yet), an empty notebook, no pinned notes (show nothing), no lookup or search results, empty trash. Each is a line icon on a small paper tile, a short title and one warm sentence. There’s no sign-up or onboarding wall.

Also cover these states: loading, errors (for example an import failure or a failed save, written in plain language), and long titles, very long notes, long code lines, deeply nested lists and a long trail of looked-up notes.

App icon

The mark, named Jotmark (D-32), is a capital J whose top bar keeps only its right half (reading like a square-root sign), with a dot where the left half of the bar would be: paper (#F8FAFC) on ink (#0F172A). The app’s header tile shows the same Jotmark glyph. It must also work as an Android themed (monochrome) icon and as iOS dark and tinted icons.

Deliverables

• Design tokens: confirm or adjust the tokens above for light and dark, plus spacing and motion (durations and easing, including opening a notebook, entering history and the checkbox tick).
• Component library: notebook card with spine, note card (normal, pinned, selected), section header with count badge, stamps and badges, the save badge, the note header with its automatic title, pen-tray tools (normal, active, disabled), ledger checkbox (open, done, nested), quote and code panels, web and note links, buttons (primary, secondary, destructive), search field, the note lookup, the single-field link picker, the selection-mode bar, the Undo bar, back/forward controls inside a note, dialogs (rename, restore), empty-state tiles, and the icon style.
• High-fidelity mockups for every screen and state above in light and dark mode, with notes on any Android and iOS differences in behavior only.
• Key interaction specs: the checkbox tick, toolbar behavior with and without a text selection, the single-field link picker and [[, the note lookup and back/forward, entering and leaving selection mode, the Undo bar appearing and timing out, a generated title arriving, quick capture from the app icon, and the save badge changing state.

Quality bar

• Accessibility: WCAG AA contrast in both themes (faint is decorative only), touch targets of at least 44pt/48dp, layouts that hold up at the largest text sizes, labels for every control that screen readers can read, and meaning never shown by color alone (the save badge also says it in words; active tools are also announced as selected). Checkboxes must work as real, accessible checkboxes.
• Typography comes first. It’s a writing app, so the note page should be as comfortable to read and write on as a well-set book.
• Restraint: no accent color beyond the saved green, hairlines instead of shadows, and depth from tone and layering.
• Every choice should reinforce “calm, private, nothing is ever lost.”

Out of scope (don’t design these)

Nested notebooks; a visible Inbox or default notebook; manual ordering of pinned notes; restoring a deleted notebook from Trash; widgets or share-sheet capture (future options); prompts to download or enable an on-device model; accounts, sign-in or profile avatars; cloud sync, sync or encryption status badges; sharing or collaboration; tags and filter chips; named versions, hashes or document IDs; word-count diffs in history; attachments or images; diagrams (Mermaid) and maths, which stay plain code blocks in Release 1; reminders or due dates; plugins; and desktop or web layouts.