Drawer

States

State	Visual change	Tokens
Opening	The panel slides its full width from the edge and fades in	motion-drawer-enter-duration, motion-drawer-distance
Open	Raised panel with a 1 px overlay hairline and the shadow-panel shadow; the free corners are round and the edge against the screen is square; lightly dimmed backdrop blurred by 4 px	color-surface-raised, color-border-overlay, shadow-panel, color-surface-scrim, blur-surface-scrim
Nested	The drawer behind shrinks by 5 % per nested drawer, peeks out by 16 px and dims slightly	drawer-stack-step, drawer-stack-peek
Swiping	The panel follows the pointer, the backdrop clears, no transition	None
Closing	The panel slides out to its edge	motion-drawer-exit-duration, motion-drawer-exit-easing
Bottom sheet	Full width, rounded top corners, header centred below 768 px; a handle by default when the sheet has snap points (snaps), or with handle	drawer-handle-width, drawer-handle-height
Snap points (snapPoints)	The bottom sheet rests at the given heights; the backdrop keeps at least half its opacity	None

Measurements

Property	Value	Token
Width (end)	360 / 480 / 640 px	drawer-width-sm, drawer-width-md, drawer-width-lg
Bottom and top sheet max height	sm 320 px, md 560 px, lg viewport − 96 px	drawer-sheet-height-sm, drawer-sheet-height-md, drawer-sheet-offset
Padding	16 px; 24 px from 640 px up	dialog-padding-sm, dialog-padding-md
Gap between title and description	2 px	space-xxs
Title style	label-lg (16 px medium)	text.label-lg
Actions	Stacked, full width, 8 px apart, no divider	space-md
Corner radius	14 px on the inner corners of a side drawer, the top corners of a bottom sheet and the bottom corners of a top sheet; 0 on the edge against the screen	radius-xl
Handle (handle)	96 × 4 px, surface-layer-2	drawer-handle-width, drawer-handle-height, color-surface-layer-2

A start drawer mirrors an end drawer: the same widths, the same overlay hairline and shadow-panel shadow, and 14 px inner corners. A top sheet mirrors a bottom sheet: it spans the viewport and grows with its content up to 320 px at sm and 560 px at md (drawer-sheet-height-sm, drawer-sheet-height-md); lg reaches the viewport − 96 px (drawer-sheet-offset). Its bottom corners are 14 px.

Tokens

Values follow the selected brand; change the brand in the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-drawer-width-sm		360px360px360px	360px360px360px
--bigbang-drawer-width-md		480px480px480px	480px480px480px
--bigbang-drawer-width-lg		640px640px640px	640px640px640px
--bigbang-drawer-handle-width		96px96px96px	96px96px96px
--bigbang-drawer-handle-height		4px4px4px	4px4px4px
--bigbang-drawer-sheet-offset		96px96px96px	96px96px96px
--bigbang-drawer-sheet-height-sm		320px320px320px	320px320px320px
--bigbang-drawer-sheet-height-md		560px560px560px	560px560px560px
--bigbang-drawer-stack-peek		16px16px16px	16px16px16px
--bigbang-drawer-stack-step		0.050.050.05	0.050.050.05
--bigbang-dialog-padding-sm		16px16px16px	16px16px16px
--bigbang-dialog-padding-md		24px24px24px	24px24px24px
--bigbang-dialog-radius		14px14px14px	14px14px14px
--bigbang-dialog-backdrop-blur		4px4px4px	4px4px4px
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-scrim		rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)	rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)
--bigbang-color-surface-layer-2		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-shadow-panel		0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)	0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)
--bigbang-motion-drawer-enter-duration		0.4s0.4s0.4s	0.4s0.4s0.4s
--bigbang-motion-drawer-exit-duration		0.24s0.24s0.24s	0.24s0.24s0.24s
--bigbang-motion-drawer-exit-easing		cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)	cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)
--bigbang-motion-drawer-distance		100%100%100%	100%100%100%

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
End panel enter (motion.drawer)	translate 100 % → 0 (by text direction), opacity	motion-drawer-enter-duration	easing-spring-productive-slow	Distance becomes 0; the panel only fades in.
Bottom sheet enter (motion.sheet)	Vertical translate 100 % → 0, opacity	motion-drawer-enter-duration	easing-spring-productive-slow	Fades in only.
Exit	Slide to the edge, opacity; after a fast swipe the duration shortens with the swipe strength (--drawer-swipe-strength), clamped between 0.5 and 1 so the exit takes at least half its time	motion-drawer-exit-duration × swipe strength	motion-drawer-exit-easing	Fades out only.
Nested drawer	scale and translate on the drawer behind	motion-drawer-enter-duration	easing-spring-productive-slow	Unchanged.
Swipe	The panel follows the pointer (--drawer-swipe-movement-*), the backdrop clears	No transition	None	Unchanged; it is direct manipulation.

See Motion for the values.