Components

SaveBar

A bar that rises from the bottom while a form has unsaved changes, with Save and Discard.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Closed	Below and invisible	—
Open	Raised surface, top border, shadow	`color-surface-raised`, `shadow-overlay`
Saving	Spinner on Save	—
Saved	Check on Save	—

Measurements

Property	Value	Token
Horizontal padding	16 px	`space-xl`
Vertical padding	8 px	`space-md`
Content width	Large container	`container-max-width-lg`
Below 640 px	Full-width buttons	—

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-shadow-overlay`		`0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`
`--bigbang-space-md`		`8px8px8px`	`8px8px8px`
`--bigbang-container-max-width-lg`		`1440px1440px1440px`	`1440px1440px1440px`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Opens	Rises its own height from below and fades	`motion-list-move-duration`, `motion-toast-enter-duration`	`easing-spring-productive-base`, `motion-toast-enter-easing`	No movement; it only fades.
Closes	Sinks and fades faster	`motion-toast-exit-duration`	`motion-toast-exit-easing`	It only fades.
Save	Spinner, then a check	Button	Button	As Button.