Skip to main content

Spacing & Radius

trust-ui v2 has a dual-density spacing scale — slightly tighter on desktop, more generous on touch devices. The shift happens automatically via @media (pointer: coarse).

Spacing scale

Desktop (default)

TokenValueUsage
--tui-spacing-xs4pxIcon ↔ label gap
--tui-spacing-sm8pxTight padding
--tui-spacing-md12pxDefault control padding
--tui-spacing-lg16pxCard padding
--tui-spacing-xl24pxSection padding
--tui-spacing-2xl32pxLarge section
--tui-spacing-3xl48pxHero / page margins

Mobile (@media (pointer: coarse))

TokenValueΔ
--tui-spacing-md16px+4
--tui-spacing-lg20px+4
--tui-spacing-xl28px+4

xs/sm/2xl/3xl stay the same — they're already mobile-appropriate at the edges.

Border radius

TokenDesktopMobileUsage
--tui-radius-xs4px4pxTiny pills
--tui-radius-sm6px6pxChips, badges
--tui-radius-md8px12pxButtons, inputs (more pillowy on touch)
--tui-radius-lg10px14pxCards
--tui-radius-xl14px20pxDialogs, popovers
--tui-radius-2xl20px20pxBottom-sheet top corners
--tui-radius-full9999pxPills, dots

Touch targets & safe area

TokenValueUsage
--tui-touch-target-min44pxiOS HIG minimum hit area
--tui-touch-target-comfortable48pxAndroid Material baseline
--tui-safe-topenv(safe-area-inset-top, 0px)iOS notch
--tui-safe-rightenv(safe-area-inset-right, 0px)
--tui-safe-bottomenv(safe-area-inset-bottom, 0px)iOS home indicator
--tui-safe-leftenv(safe-area-inset-left, 0px)
--tui-thumb-zone-height65vhSuggested thumb-reach zone
--tui-thumb-safe-bottommax(env(safe-area-inset-bottom, 0px), 16px)Bottom padding for thumb-zone CTAs

Use the <SafeAreaView> and <StickyFooter> layout primitives to apply these without custom CSS.

Z-index scale

TokenValueUsage
--tui-z-dropdown1000Select dropdowns
--tui-z-sticky1010Sticky headers / footers
--tui-z-popover1020Popovers
--tui-z-modal1050Dialogs
--tui-z-bottom-sheet1055BottomSheet, ActionSheet
--tui-z-tooltip1060Tooltips
--tui-z-toast1070Toasts