Design system 0.6.0

Words

Microcopy

How HeyGoal talks, and the final wording of every button, empty state, error, undo toast and help bubble.

HeyGoal talks like a knowledgeable friend: plain words, short sentences, warm but not cute. The "Hey" is the tone; the "Goal" is done, completed.

Voice rules

  • Say what happened, then offer the way back. "Backup restored" with Undo; "Timer hidden — it keeps running. Find it on Time."
  • Name the state from the real setup, never a generic line. "Saved in this browser only, until you sign in" vs "Synced to your account's private cloud copy… Last synced 3:42 PM"
  • One term per concept, the same everywhere. Earned, Invoiced, Not invoiced yet, Invoiced, unpaid, Overdue, Received, Still owed. "Outstanding" is retired
  • Label what is not built. "Planned — not in this release" on the Premium perks; nothing pretends
  • Sentence case everywhere; kickers are the only uppercase. Buttons: "Add a client", "Mark paid", "Clear demo content"
  • Numbers carry their unit and their definition. "3 of 5 done", "day 4 of 12", a ? bubble on every money figure
  • English only; no slang, no references to a country, a language or a sport. Standing brand rule
  • The product name is HeyGoal in every string a person reads. Identifiers that saved data depends on keep their Workdeck-era names; that is code, not copy

House style

  • Second person; the app never says "I" or "we". "your own records are untouched"
  • No emoji; typographic characters do the work. · separates, — comes before a consequence, → marks a range, … truncates, × closes
  • Page names keep their capital inside a sentence. "Customize on Home brings it back", "Find it on Time"
  • Contractions, one form each. couldn't, isn't, don't; not "could not" in one toast and "couldn't" in the next
  • No serial comma, as the brief writes. "tasks, projects, time and billing"; "PNG, JPG or WebP"
  • A button that ends a form stays short; a call to action outside a form takes the article. "Add client" at the end of the add form; "Add a client" in Getting started and empty states
  • Mark as …, with the "as", and its toast says the same. "Mark as paid", "Mark as sent", "Mark as unpaid"; "INV-0102 marked as unpaid"

Button labels

A verb first, in sentence case. "Add" puts an item in a list; "Create" makes a document. Three labels are not verbs on purpose: Done ends a mode, Today moves the calendar, Not now declines an offer. A page head's "New …" opens a blank record.

  • "Add task"
  • "Add project"
  • "Add client"
  • "Add expense"
  • "Add payment"
  • "Start timer"
  • "Stop and log"
  • "Mark as sent"
  • "Mark as paid"
  • "Download PDF"
  • "Export backup"
  • "Restore from backup"
  • "Clear demo content"
  • "Load demo content"
  • "Turn on sync"
  • "Erase cloud copy"
  • "Continue with Google"
  • "Email me a link"
  • "Refill from project"
  • "New note"
  • "Done"
  • "New invoice" — The same button says New invoice once one exists. One label at any count; the dialog's own button stays Create invoice.
  • "Set up sync" — The storage line's button names a place, not an action.
  • "Reorder the menu" — The phone-only button in arrange mode; a verb first.
  • "Print or save a PDF" — A verb first, and the same words as the printing toast.
  • "See Premium" — Settings and the upsell open the same dialog; one label for one action.
  • "Customize Home" — Home is a page name.

Empty states

One line, text only: what is missing and the one thing to do about it.

  • "All clear. Add a task above to get started."
  • "No projects yet. Add your first one above."
  • "No clients yet. Add one above — projects link to them by name."
  • "Start a new note to capture your first idea."
  • "No cards on Home yet. Click Customize to add some."
  • "Nothing done yet. When you set a project to Done, it moves here."
  • Overdue: "Nothing overdue." · Done: "No tasks done yet. Tick one and it moves here." · All: "No tasks yet. Add one above." — One string served three filters and said what to do in none.
  • "No time logged yet. Start the timer or add an entry above." — Add the one action.
  • "No expenses yet. Add one above." — Add the one action.
  • "Nothing matches these filters. Change one to see more." — Three wordings for one state; one sentence, with its action.
  • "Log time, set a price on a project or add an expense and it shows up here." — No serial comma.
  • "Add your first link above, paste an image or create a folder to get organized." — No serial comma.
  • "Add a project first; invoices are built from a project's price, hours and expenses." — No serial comma.
  • "No invoices yet. Click New invoice — the lines fill in from the project's price and hours." — Down to one line.

Error toasts

What happened, then what to do. Two short sentences, no blame, no "Oops".

  • "That image is over 10 MB. Choose a smaller one."
  • "That file isn't a calendar. Choose an .ics file."
  • "Couldn't open Google. Try again in a moment."
  • "That PDF couldn't be built. Try again in a moment."
  • "Storage is full. Remove some images, or export a backup and clear old data."
  • "Printing isn't available here. Open HeyGoal in your browser to print or save a PDF."
  • "Couldn't copy here. Select the text and copy it instead."
  • "That file isn't a HeyGoal backup. Choose a .json file made with Export backup."
  • "Couldn't send the link. Check the address and try again."
  • "Your data is 300 kB; a cloud copy can hold 256 kB. Shorten or split some notes, then sync again."
  • "That image couldn't be read. Try a PNG or JPG." — One form of the contraction.
  • "The start date is after the end date. Change one of them." — Add what to do; the form keeps what was typed.
  • "That isn't an image. Choose a PNG, JPG or WebP file." — Say what happened first; no serial comma.
  • "That file couldn't be saved here. Open HeyGoal in your browser to download it." — Add what to do, as the printing toast does.
  • "Sign-in isn't available right now. Your work stays saved in this browser." — Name the state, so nobody fears for their data.
  • "This image lives on the device where it was added. Open HeyGoal there to see it." — Add what to do.
  • "You already have a folder with that name. Pick another name." — Add what to do.
  • "That calendar file is over 8 MB. Export a shorter date range and try again." — Add what to do.

Destructive actions

Act at once. The toast names what happened and carries Undo; a consequence follows a dash. Only Erase cloud copy and Erase all data ask twice, on the button itself: "Click again to erase".

  • "Task deleted"
  • "Payment deleted"
  • "Invoice deleted"
  • "Note deleted"
  • "Clock removed"
  • "Software deleted — its expenses moved"
  • "Demo content cleared — your own records are untouched"
  • "Getting started hidden — Customize on Home brings it back"
  • "Menu hidden — the button in the top-left corner brings it back"
  • "Layout reset"
  • "Menu order reset"
  • "Backup restored"
  • "Demo content loaded"
  • "Removed from Quick access" — Quick access is a page name.
  • "Folder deleted — its items kept" — A dash comes before a consequence.
  • "INV-0102 marked as unpaid — its payment removed" — A dash comes before a consequence, and the toast says what the button says.

Help bubbles

"Term = definition." The same words in the UI, the ? bubbles and the PDFs. Never uppercase or tracked, even inside a kicker.

  • "Earned = hours × the project's rate (or your account rate). A fixed-price project counts its whole price."
  • "Invoiced = the total of the project's invoices, paid or not."
  • "Not invoiced yet = earned minus invoiced — work you could still put on an invoice."
  • "Invoiced, unpaid = invoices sent (or drafted) that nobody has paid yet. Overdue = sent and past its due date."
  • "Received = payments recorded on the project. Marking an invoice paid records one for you."
  • "Still owed = earned minus received — everything the project is still owed, whether or not it is on an invoice yet."
  • "Multi-task turns every line of the text into its own task. Paste a list, a meeting recap or a to-do from an email; bullets, dashes and numbers at the start of a line are removed. Project, priority and dates apply to all of them." — No serial comma.

Storage lines

Read from the real setup and name the one action that changes it. Wherever a cloud exists, say that images stay on their device. "Saved" and "synced", never "stored" or "mirrored".

  • "Saved in this browser only — nothing is uploaded. Export a backup now and then to keep a copy, or to move to another computer."
  • "Saved in this browser only — nothing is uploaded until you turn on sync in Settings."
  • "Saved in this browser only, until you sign in. Signing in keeps a private cloud copy, so your phone or another computer opens the same tasks, projects, time and billing."
  • "Saved in this browser and synced to your account's private cloud copy — sign in on another device and the same work is there. Last synced 3:42 PM."
  • "Images in notes and Quick access stay on the device you added them on; everything else travels with sync and with a backup."
  • "Signed out. Your data stays on this device."
  • "Everything is saved in this browser and synced to your private cloud copy. Export a backup now and then anyway — images only live on this device." — One term per concept: Settings said stored and mirrored.

Front door

Say what signing in gives, that it is free, and that you can go without it.

  • "Welcome to HeyGoal"
  • "Continue with Google"
  • "Email me a link"
  • "Continue without an account"
  • "Your data stays in this browser until you sign in."
  • "Check your inbox"
  • "Use a different email"
  • "Sign in to keep your tasks, projects, time and billing in sync on every device. No account yet? Signing in creates one — free." — No serial comma, as on the storage line.
  • "A sign-in link is on its way to {email}. Open it on this device to come straight back here." — The app never says "we".

Values in braces are filled in by the app.

HeyGoal design system 0.6.0 · generated from tokens.json and the component CSS in design-system\HeyGoal design system · works offline, open any page in a browser.