Components

RadioCard

A large choice with a title, description and icon, used inside a RadioGroup; the whole card is clickable.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Default	Thin border	`color-border-subtle`
Hover	Darker border	`color-border-strong`
Selected	2 px primary border, selected surface, filled circle	`color-action-primary-default`, `color-surface-selected`
Keyboard focus	2 px outer ring	`color-focus-ring`
Invalid	Danger border	`color-border-danger`
Disabled	Faded surface and text	`color-surface-disabled`, `color-text-disabled`

Measurements

Property	Value	Token
Padding	12 px	`space-lg`
Gap between parts	8 px	`space-md`
Corner radius	8 px	`radius-lg`
Minimum width (horizontal)	224 px	—
Radio circle	16 px	`radio-size`

Tokens

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

Token	Sample	Light mode	Dark mode
`--bigbang-radius-lg`		`10px10px10px`	`10px10px10px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-radio-size`		`16px16px16px`	`16px16px16px`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-border-strong`		`#8c8c8c#8c8c8c#8c8c8c`	`#8c8c8c#8c8c8c#8c8c8c`
`--bigbang-color-action-primary-default`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-surface-selected`		`#edf5f8#ededed#ededed`	`#092932#404040#404040`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Hover	Border colour	`motion-hover-duration`	`motion-hover-easing`	Unchanged.
Selection	Border, surface and icon colour	`motion-hover-duration`	`motion-hover-easing`	Unchanged.
Selection dot	The dot scales in (`motion.selectionMark`)	`motion-selection-duration`	`motion-selection-easing`	Scale 1; it only appears.