Content

SetupChecklist

The short list of things that make Makado yours, on Home for someone's first few visits.

Preview

Props

Guidelines

The short list of things that make Makado yours, on Home for someone's first few visits. Each step links to where it is done and checks itself off from real data, progress reads "3 of 7 done", and once every required step is done the card celebrates briefly with an illustration and then goes away.

Provide: steps: a list of { key, label, description, href, action, done, optional, icon } (action is the text link under the step, such as "Add a brand"; it goes away once the step is done), title (default "Get set up"), description, onDismiss (adds a quiet close button, "Hide setup"), onSelect(key, event) for steps that check off by visiting them, completeTitle and completeMessage for the celebration, illustration (default caught-up), headingLevel, id (so a welcome tip can point at it).

• Steps check themselves off from what is really there (a name on the profile, a first brand, a first project). Only where keeping the default is a fine choice (the color theme, the work week) does opening the step count as done; use onSelect for those.
• Optional steps say "Optional" and never hold back completion. Order steps from the most personal (name, theme) to the bigger ones (brand, project), with optional ones last.
• Copy is warm and plain: "Add your first brand", not "You haven't added a brand". No counts of what is missing beyond "3 of 7 done".
• The celebration is the caught-up illustration and one line. Say thanks and get out of the way: the app hides the card on the next visit (or after a few seconds) and remembers it on the profile, so it never comes back on another device.
• Hiding it is always allowed and remembered the same way.
• Solid surface, like WinsCard: it is content, not navigation. One per screen, near the top of Home.

Accessibility: the card is a labelled region; each step has one text link under it (named with the step, "Add a brand: Add your first brand") and the done state in words for screen readers (", done" or ", not done yet") and a shaped mark (an empty circle or a filled check), never color alone. The progress line is a polite status, so checking a step off is announced. The celebration's pop is skipped with reduced motion.

• onDismissStep(key) adds a small quiet close button to every step, done or not, ("Dismiss Add your first brand"), for a step someone doesn't need. The app remembers it and leaves the step out; dismissed steps don't count toward "x of y done".

• Each step sits in its own inset container inside the card (background-layer-1 with a surface-edge hairline), so the steps read as separate items.