Foundations
Sizes and motion
Control heights, icon sizes, borders and focus rings, and how things move.
Sizes
Spectrum t-shirt sizes at the desktop scale. The mobile scale is about 1.25 times larger (component-height-100 becomes 40px).
component-height-5020pxExtra-small controls.
component-height-7524pxSmall controls and badges (S).
component-height-10032pxMedium controls (M), the default on desktop.
component-height-20040pxLarge controls (L); the default on phones.
component-height-30048pxExtra-large controls (XL); phone primary actions.
icon-size-xs14pxIcons in small badges.
icon-size-s16pxIcons in small controls and meta lines.
icon-size-m20pxWorkflow icons at M: buttons, nav, rows.
icon-size-l22pxIcons in large controls.
icon-size-xl26pxIcons in XL controls and the phone tab bar.
border-width-1001pxTable row dividers.
border-width-2002pxField, outline button and in-line alert borders.
focus-indicator-thickness2pxFocus outline width.
focus-indicator-gap2pxFocus outline offset.
side-nav-width240pxDesktop side navigation (Spectrum's maximum).
side-nav-width-collapsed72pxThe side navigation as an icon rail, on narrower desktops.
Motion
Short and calm: things ease in, nothing bounces. Pages rise a few pixels as they fade in, the selected thumb slides between tabs and segments, buttons press in a little, menus and drawers ease in. Everything is skipped under prefers-reduced-motion.
motion-duration-100120msPresses, hovers, color and shadow changes.
motion-duration-200160msMenus opening, the selected thumb sliding.
motion-duration-300220msA page entering, a drawer sliding in.
motion-duration-400320msBig moves across the screen: a phone sheet sliding up from the bottom and back down.
motion-ease-outcubic-bezier(0.2, 0.8, 0.2, 1)Things arriving: pages, menus, drawers.
motion-ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Things moving from one place to another: the selected thumb.
motion-press-scale0.97How far a button presses in.
motion-rise6pxHow far a page or menu rises as it fades in.