Patterns · HeyGoal design system

Twelve rules for how components come together on a page. Follow them on every screen; the phone rules cut across all of them.

Page anatomy — kicker, title, tools on the right; filters under the title; the add form before the list; the list or table last.
Add form row — one row of 44 px boxes aligned by the bottom, the primary button last; a disabled placeholder option where a choice is expected (Priority); wraps to two lines at 1240 px.
Inline edit — a row turns into a one-line form in place; Save and Cancel; Escape cancels; another device's change closes it.
Filters — pills with counts for a closed set (Open, Done, All); chips for a toggle set (projects on the calendar); the choice is remembered in settings.
Destructive actions — act at once, toast with Undo. Two clicks only for erasing a cloud copy or all data. Load demo and Restore also get Undo.
Empty and first run — the Getting started card leads Home until the five steps are done; demo content is marked and never counts; empty lists say what to do, in one line.
Where your data lives — the storage line reads from the real setup (browser only, cloud available, signed out, synced) and names the image limitation wherever a cloud exists.
Money — one vocabulary; a ? bubble defines each number where it appears; totals stack per currency, default currency first; a currency sign is never a reason to change layout.
Wayfinding by color — Billing's four zones on tiles, jump pills, panel strips and heading chips; a project keeps its color everywhere; a zone hue is never used as a status.
Calendar — own items as chips, external calendars as tinted chips; ranges as span bars in up to 4 lanes; a day panel for the selected day; filters hide, never delete.
Arrange mode — Customize turns the thing itself into the editor (the menu reorders in the menu, cards reorder on Home): dashed accent frame, grips, pinned items locked, arrow keys as the keyboard path, Reset once an order exists. Cards say their position: "Projects, 2 of 6".
Print and PDF — the invoice sheet and the report are paper-white in both themes; print styles hide the shell; the PDF twin draws the same rows in Helvetica.

Phone rules cut across all of them: one column at 860 px and under, the drawer, the floating timer above the safe area, the toast above the timer, and nothing wider than 390 px.