# Savings goal

Savings goal: a free component, built on your design tokens, to use in a personal banking or budgeting app, for a pot people save toward. A savings pot with a cover photo: the goal, a ring of how much is saved, what is left and the date it is on track for, a round-ups switch, and quick amounts to add money that move the ring.

Prompt: Add the OpenDesigner component savings-goal to this project: https://opendesigner.dev/library/r/savings-goal.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: in progress, round-ups on, round-ups off, amount selected, money added, goal reached, hover, focus.

Accessibility: The ring is a progressbar that reads "£1,840 of £3,000, 61%"; round-ups is a whole-row switch, the amounts are a radio group, and each top-up is announced in a polite live region.

File: https://opendesigner.dev/library/r/savings-goal.html