States
Section titled “States”| State | Support | Visual change | Tokens |
|---|---|---|---|
| Default | Yes | Surface, border or shadow by variant | color-surface-raised, color-surface-layer-1, color-border-subtle, shadow-raised |
| Hover | interactive only |
Rises 2 px, border darkens | motion-hover-lift, color-border-default |
| Pressed | interactive only |
The lift is undone; the card settles | - |
| Focus | interactive only |
When Card.Link has focus, a 2 px ring around the card, 2 px away |
color-focus-ring, border-width-focus |
| Disabled | No | The card has no disabled state; controls inside carry their own | - |
| Loading, empty, error | Composition | With Skeleton, EmptyState and inline alert components inside Card.Body |
- |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Corner radius | 14 px | card-radius |
| Border | A 1 px ring on outlined (takes no space; darkens on hover on an interactive card); none on elevated and filled |
border-width-default, color-border-subtle, color-border-default |
Padding, sm |
12 px | space-lg |
Padding, md |
16 px | space-xl |
Padding, lg |
24 px | space-3xl |
| Gap between parts | sm 12 px, md 16 px, lg 24 px |
space-lg, space-xl, space-3xl |
| Title to description | 2 px | space-xxs |
| Title to action | 8 px | space-md |
| Title style | 16 px / 24 px, semibold | heading-sm |
| Description style | 14 px / 20 px | body-md |
| Body style | 14 px / 20 px | body-md |
| Footer | Spans the card width with a 1 px top rule and a tinted surface; padding equals the card padding and the card has no bottom padding | color-border-subtle, color-surface-layer-1 |
| Leading or trailing image | A direct img child that comes first or last reaches the card edges; the card clips it to its corners |
None |
Tokens
Section titled “Tokens”Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-shadow-raised | 0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px | |
--bigbang-space-xl | 16px16px16px | 16px16px16px | |
--bigbang-space-3xl | 24px24px24px | 24px24px24px | |
--bigbang-motion-hover-lift | -2px-2px-2px | -2px-2px-2px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Motion | Reduced motion |
|---|---|---|
Hover (interactive) |
translate 0 → −2 px and border colour, motion-hover-duration (110 ms), motion-hover-easing (motion.lift) |
Lift is 0 px; only the border colour changes |
Press (interactive) |
The lift is undone at the same pace | No movement |
| Focus | The ring appears at once (0 ms) | Same |
| Static card | No motion | Nothing to reduce |
Values come from tokens; see Motion for details.