CINXE.COM

<!DOCTYPE html><html lang="en" class="scroll-pt-[76px] plain-background"><head><meta charSet="utf-8"/><link rel="preconnect" href="https://api.gitbook.com"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" imageSrcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=1&quality=100&sign=ca0eedd3&sv=1 32w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=2&quality=100&sign=ca0eedd3&sv=1 64w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=3&quality=100&sign=ca0eedd3&sv=1 96w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=4&quality=100&sign=ca0eedd3&sv=1 128w" imageSizes="32px" fetchPriority="high"/><link rel="stylesheet" href="/_next/static/css/2d00a2f28ca4dc5d.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/99f50cfb598d2941.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/d42d805b938873da.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/0673bb6e29c473c8.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/c311d6484335995a.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/5a687dea857dc6f5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7235fa9d119901d4.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/86d6274f3e6d760c.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/a91fbeec63857000.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/2d0986519abf0323.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/0f891de5863d7182.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw" href="/_next/static/chunks/webpack-21fb00c223e55731.js"/><script src="/_next/static/chunks/1dd3208c-b11c3db6cd7d86b2.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/9978-293e379e3e1468f4.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/main-app-9ebfecd6c4e0cf57.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/app/global-error-19768e91f18f21d9.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/b5d5b83b-3d9186fb60556c53.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/7609-ae1015bd89577747.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/1281-411df876b32e19c2.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/4012-d5519c7c19347ff0.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/app/(site)/layout-512d7fc9258aa558.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/app/(site)/error-aabf7054fe6497a1.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/9505-a8f112b566ef7f41.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/4531-b39a0af8c700f9ea.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/4746-fcf448a964a3d7bb.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/1285-2b0f91300e0c0b9a.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/3902-19c217a299034164.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script async="" src="https://integrations.gitbook.com/v1/integrations/googleanalytics/installations/fed41e98e4e98569ea0efc948ee7657ce979e3d13301ed5374b8494b6ffe0f81/sites/site_JKoxZ/script.js?version=149.0" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/6150-57a79db9099e4be8.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/8510-2f41b25832a6d317.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/8843-dcccd4a8528a4d7f.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/9028-bdf215f649fe02e9.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><script src="/_next/static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js" async="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script><meta name="color-scheme" content="light"/><title>Spacing | UX UI Guidelines</title><meta name="generator" content="GitBook (fc8065b)"/><meta name="robots" content="index, follow"/><link rel="canonical" href="https://bamtech.gitbook.io/ux-ui-standards/ui-standards/margins"/><meta property="og:title" content="Spacing | UX UI Guidelines"/><meta property="og:image" content="https://bamtech.gitbook.io/ux-ui-standards/~gitbook/ogimage/-L3SF2SzLI73cix3KvkI"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Spacing | UX UI Guidelines"/><meta name="twitter:image" content="https://bamtech.gitbook.io/ux-ui-standards/~gitbook/ogimage/-L3SF2SzLI73cix3KvkI"/><link rel="icon" href="https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/spaces%2F-L3Ckj9RuJ2qwWPoNJTG%2Favatar.png?generation=1516354338170876&alt=media" type="image/png" media="(prefers-color-scheme: light)"/><link rel="icon" href="https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/spaces%2F-L3Ckj9RuJ2qwWPoNJTG%2Favatar.png?generation=1516354338170876&alt=media" type="image/png" media="(prefers-color-scheme: dark)"/><meta name="next-size-adjust"/><style> :root { --primary-color-50: 234 242 255; --primary-color-100: 212 229 255; --primary-color-200: 170 204 255; --primary-color-300: 127 178 255; --primary-color-400: 85 153 255; --primary-color-500: 42 127 255; --primary-color-600: 34 102 204; --primary-color-700: 25 76 153; --primary-color-800: 17 51 102; --primary-color-900: 8 25 51; --contrast-primary-50: 0 0 0; --contrast-primary-100: 0 0 0; --contrast-primary-200: 0 0 0; --contrast-primary-300: 0 0 0; --contrast-primary-400: 0 0 0; --contrast-primary-500: 0 0 0; --contrast-primary-600: 255 255 255; --contrast-primary-700: 255 255 255; --contrast-primary-800: 255 255 255; --contrast-primary-900: 255 255 255; --primary-base-50: 234 242 255; --primary-base-100: 212 229 255; --primary-base-200: 170 204 255; --primary-base-300: 127 178 255; --primary-base-400: 85 153 255; --primary-base-500: 42 127 255; --primary-base-600: 34 102 204; --primary-base-700: 25 76 153; --primary-base-800: 17 51 102; --primary-base-900: 8 25 51; --header-background-50: 255 255 255; --header-background-100: 255 255 255; --header-background-200: 255 255 255; --header-background-300: 255 255 255; --header-background-400: 255 255 255; --header-background-500: 255 255 255; --header-background-600: 204 204 204; --header-background-700: 153 153 153; --header-background-800: 102 102 102; --header-background-900: 51 51 51; --header-link-50: 234 242 255; --header-link-100: 212 229 255; --header-link-200: 170 204 255; --header-link-300: 127 178 255; --header-link-400: 85 153 255; --header-link-500: 42 127 255; --header-link-600: 34 102 204; --header-link-700: 25 76 153; --header-link-800: 17 51 102; --header-link-900: 8 25 51; --header-button-text-50: 230 230 230; --header-button-text-100: 204 204 204; --header-button-text-200: 153 153 153; --header-button-text-300: 102 102 102; --header-button-text-400: 51 51 51; --header-button-text-500: 0 0 0; --header-button-text-600: 0 0 0; --header-button-text-700: 0 0 0; --header-button-text-800: 0 0 0; --header-button-text-900: 0 0 0; } .dark { --primary-color-50: 234 242 255; --primary-color-100: 212 229 255; --primary-color-200: 170 204 255; --primary-color-300: 127 178 255; --primary-color-400: 85 153 255; --primary-color-500: 42 127 255; --primary-color-600: 34 102 204; --primary-color-700: 25 76 153; --primary-color-800: 17 51 102; --primary-color-900: 8 25 51; --primary-base-50: 234 242 255; --primary-base-100: 212 229 255; --primary-base-200: 170 204 255; --primary-base-300: 127 178 255; --primary-base-400: 85 153 255; --primary-base-500: 42 127 255; --primary-base-600: 34 102 204; --primary-base-700: 25 76 153; --primary-base-800: 17 51 102; --primary-base-900: 8 25 51; --contrast-primary-50: 0 0 0; --contrast-primary-100: 0 0 0; --contrast-primary-200: 0 0 0; --contrast-primary-300: 0 0 0; --contrast-primary-400: 0 0 0; --contrast-primary-500: 0 0 0; --contrast-primary-600: 255 255 255; --contrast-primary-700: 255 255 255; --contrast-primary-800: 255 255 255; --contrast-primary-900: 255 255 255; --header-background-50: 230 230 230; --header-background-100: 204 204 204; --header-background-200: 153 153 153; --header-background-300: 102 102 102; --header-background-400: 51 51 51; --header-background-500: 0 0 0; --header-background-600: 0 0 0; --header-background-700: 0 0 0; --header-background-800: 0 0 0; --header-background-900: 0 0 0; --header-link-50: 234 242 255; --header-link-100: 212 229 255; --header-link-200: 170 204 255; --header-link-300: 127 178 255; --header-link-400: 85 153 255; --header-link-500: 42 127 255; --header-link-600: 34 102 204; --header-link-700: 25 76 153; --header-link-800: 17 51 102; --header-link-900: 8 25 51; --header-button-text-50: 230 230 230; --header-button-text-100: 204 204 204; --header-button-text-200: 153 153 153; --header-button-text-300: 102 102 102; --header-button-text-400: 51 51 51; --header-button-text-500: 0 0 0; --header-button-text-600: 0 0 0; --header-button-text-700: 0 0 0; --header-button-text-800: 0 0 0; --header-button-text-900: 0 0 0; } </style><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule="" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw"></script></head><body class="__variable_274faa __variable_a7f53a __variable_e782a9 __className_053b0a __variable_0e9704 bg-light dark:bg-dark"><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">!function(){var d=document.documentElement,c=d.classList;c.remove('light','dark');d.style.colorScheme = 'light';c.add('light')}()</script><header class="flex flex-col h-[64px] sticky top-0 z-10 w-full flex-none shadow-thinbottom lg:z-10 dark:shadow-light/1 bg-light dark:bg-dark"><div class="scroll-nojump"><div class="gap-4 grid grid-flow-col auto-cols-[auto_auto_1fr_auto] h-16 items-center align-center justify-between w-full px-4 sm:px-6 md:px-8 max-w-screen-2xl mx-auto page-full-width:max-w-full"><div class="flex flex-row gap-2"><button class="flex flex-row items-center hover:bg-dark/3 py-1 px-2 dark:hover:bg-light/2 rounded straight-corners:rounded-sm page-no-toc:hidden lg:hidden text-dark dark:text-light" aria-label="Open table of contents"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/bars.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-4 text-inherit"></svg></button><a class="group/headerlogo flex-1 flex flex-row items-center shrink-0" href="/ux-ui-standards"><img alt="" style="aspect-ratio:1" fetchPriority="high" class="block dark:hidden object-contain size-8" src="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=4&quality=100&sign=ca0eedd3&sv=1" srcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=1&quality=100&sign=ca0eedd3&sv=1 32w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=2&quality=100&sign=ca0eedd3&sv=1 64w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=3&quality=100&sign=ca0eedd3&sv=1 96w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=4&quality=100&sign=ca0eedd3&sv=1 128w" sizes="32px" width="256" height="256"/><img alt="" style="aspect-ratio:1" loading="lazy" fetchPriority="high" class="hidden dark:block object-contain size-8" src="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=4&quality=100&sign=ca0eedd3&sv=1" srcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=1&quality=100&sign=ca0eedd3&sv=1 32w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=2&quality=100&sign=ca0eedd3&sv=1 64w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=3&quality=100&sign=ca0eedd3&sv=1 96w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia&width=32&dpr=4&quality=100&sign=ca0eedd3&sv=1 128w" sizes="32px" width="256" height="256"/><div class="text-pretty line-clamp-3 leading-[1.1] tracking-tight max-w-[18ch] lg:max-w-[24ch] lg:text-lg/tight font-semibold ms-3 text-dark dark:text-light">UX UI Guidelines</div></a></div><div class="z-20"></div><div class="headerLinks_containerHeaderlinks__GUgiv flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56 z-20"><div class="headerLinks_linkEllipsis__Z01IN items-center z-20"><div class="group/dropdown relative flex"><button class="px-1 text-dark/8 dark:text-light/8 dark:hover:text-light hover:text-header-link-400"><span class="sr-only">More</span><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/ellipsis.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon opacity-6 size-3 ms-1"></svg></button><div tabindex="-1" role="menu" aria-orientation="vertical" aria-labelledby=":S1:" class="w-52 max-h-56 flex absolute top-full left-0 z-20 origin-top-left invisible transition-opacity duration-1000 group-hover/dropdown:visible group-focus-within/dropdown:visible -translate-x-48 md:translate-x-0"><div class="mt-2 w-full bg-light rounded-lg straight-corners:rounded-sm p-2 shadow-1xs overflow-auto ring-1 ring-dark/1 ring-opacity-8 focus:outline-none dark:bg-dark dark:ring-light/2"><div class="flex flex-col gap-1"></div></div></div></div></div></div><div class="flex md:w-56 grow-0 shrink-0 justify-self-end"><button aria-label="Search" class="flex flex-1 flex-row justify-center items-center px-2 gap-3 text-dark/7 min-h-[2.5rem] w-[2.5rem] rounded-lg straight-corners:rounded-none bg-dark/2 transition-opacity ease-out hover:opacity-8 ring-1 ring-inset ring-dark/1 contrast-more:ring-dark contrast-more:bg-light contrast-more:text-dark dark:bg-light/1 dark:ring-light/1 dark:text-light/7 contrast-more:dark:ring-light contrast-more:dark:bg-dark contrast-more:dark:text-light [&>p]:hidden [&>span]:hidden md:justify-start md:[&>p]:flex md:[&>span]:flex md:w-full md:px-3.5 text-base"><div class="text-dark/7 pt-1.5 pb-2 dark:text-light/7"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/magnifying-glass.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon shrink-0 size-4"></svg></div><span class="flex-1">Search</span><span class="hidden md:inline justify-end text-xs text-dark/5 contrast-more:text-dark dark:text-light/5 contrast-more:dark:text-light [font-feature-settings:"calt",_"case"]">Ctrl + K</span></button></div></div></div></header><div class="scroll-nojump"><div class="flex flex-col lg:flex-row px-4 sm:px-6 md:px-8 max-w-screen-2xl mx-auto page-full-width:max-w-full min-h-[calc(100vh-64px)]"><aside class="relative group flex flex-col basis-full bg-light grow-0 shrink-0 shadow-thinbottom navigation-open:shadow-dark/2 z-[1] top-0 h-[100vh] lg:basis-72 lg:navigation-open:border-b-0 lg:sticky dark:bg-dark dark:navigation-open:shadow-light/2 page-no-toc:hidden lg:top-16 lg:h-[calc(100vh_-_4rem)]"><div class="pt-4 hidden lg:flex flex-grow flex-col overflow-y-auto lg:gutter-stable lg:pr-2 group-hover:[&::-webkit-scrollbar]:bg-dark/1 group-hover:[&::-webkit-scrollbar-thumb]:bg-dark/3 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent dark:[&::-webkit-scrollbar]:bg-transparent dark:[&::-webkit-scrollbar-thumb]:bg-transparent dark:group-hover:[&::-webkit-scrollbar]:bg-light/1 dark:group-hover:[&::-webkit-scrollbar-thumb]:bg-light/3 navigation-open:flex lg:-ml-5 lg:pb-20"><ul class="flex flex-1 flex-col gap-y-0.5"><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards">BAM UX/UI Standards</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards">UX Guidelines<span class="group relative rounded-full straight-corners:rounded-sm w-5 h-5 after:grid-area-1-1 after:absolute after:-top-1 after:grid after:-left-1 after:w-7 after:h-7 hover:bg-dark/2 hover:text-current dark:hover:bg-light/2 dark:hover:text-current"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon grid flex-shrink-0 size-3 m-1 text-current transition-transform [opacity:0.40] group-hover:[opacity:1] rotate-0"></svg></span></a><div class="[&_ul>li]:opacity-1" style="opacity:0;height:0px;display:none"><ul class="flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2"><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/chat-bot">Chat Bot - Messenger</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/geoloc-carte-et-permissions">Geoloc & permissions</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/parrainage">Parrainage</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/payment">Payment</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/medical-apointment-booking">Medical apointment booking</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ux-standards/splashscreen">Splashscreen</a></div></li></ul></div></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/prise-de-rdv">[Template]</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ui-components">UI Components<span class="group relative rounded-full straight-corners:rounded-sm w-5 h-5 after:grid-area-1-1 after:absolute after:-top-1 after:grid after:-left-1 after:w-7 after:h-7 hover:bg-dark/2 hover:text-current dark:hover:bg-light/2 dark:hover:text-current"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon grid flex-shrink-0 size-3 m-1 text-current transition-transform [opacity:0.40] group-hover:[opacity:1] rotate-0"></svg></span></a><div class="[&_ul>li]:opacity-1" style="opacity:0;height:0px;display:none"><ul class="flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2"><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ui-components/template">[Component Template]</a></div></li></ul></div></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ui-standards">UI Principles<span class="group relative rounded-full straight-corners:rounded-sm w-5 h-5 after:grid-area-1-1 after:absolute after:-top-1 after:grid after:-left-1 after:w-7 after:h-7 hover:bg-dark/2 hover:text-current dark:hover:bg-light/2 dark:hover:text-current"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon grid flex-shrink-0 size-3 m-1 text-current transition-transform [opacity:0.40] group-hover:[opacity:1] rotate-90"></svg></span></a><div class="" style="opacity:1;height:auto;display:block"><ul class="flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2"><li class="flex flex-col"><div><a aria-current="page" class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-primary-500 font-semibold text-primary hover:bg-primary/3 dark:before:border-primary-400 dark:text-primary-400 hover:before:border-primary dark:hover:bg-primary-500/3 dark:hover:before:border-primary" href="/ux-ui-standards/ui-standards/margins">Spacing</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/ui-standards/colors">Colors</a></div></li></ul></div></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips">Sketch Tips<span class="group relative rounded-full straight-corners:rounded-sm w-5 h-5 after:grid-area-1-1 after:absolute after:-top-1 after:grid after:-left-1 after:w-7 after:h-7 hover:bg-dark/2 hover:text-current dark:hover:bg-light/2 dark:hover:text-current"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon grid flex-shrink-0 size-3 m-1 text-current transition-transform [opacity:0.40] group-hover:[opacity:1] rotate-0"></svg></span></a><div class="[&_ul>li]:opacity-1" style="opacity:0;height:0px;display:none"><ul class="flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2"><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips/document-organisation">Organiser son document</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips/manipulating-elements">Manipuler les objets</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips/making-icons">Making Icons</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips/symbols">Symbols</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/sketch-tips/sketch-plugins">Sketch Plugins</a></div></li></ul></div></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/gestes">Gestes UI/UX<span class="group relative rounded-full straight-corners:rounded-sm w-5 h-5 after:grid-area-1-1 after:absolute after:-top-1 after:grid after:-left-1 after:w-7 after:h-7 hover:bg-dark/2 hover:text-current dark:hover:bg-light/2 dark:hover:text-current"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon grid flex-shrink-0 size-3 m-1 text-current transition-transform [opacity:0.40] group-hover:[opacity:1] rotate-0"></svg></span></a><div class="[&_ul>li]:opacity-1" style="opacity:0;height:0px;display:none"><ul class="flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2"><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/gestes/bench-ui">Bench UI</a></div></li><li class="flex flex-col"><div><a class="group/toclink flex flex-row justify-between pl-5 pr-1.5 py-1.5 text-sm transition-colors relative text-balance before:border-l before:absolute before:left-[-1px] before:top-0 before:h-full rounded-md straight-corners:rounded-none [&+div_a]:rounded-l-none before:border-transparent font-normal text-dark/8 hover:bg-dark/1 hover:text-dark/9 hover:before:border-dark/3 dark:text-light/8 dark:hover:bg-light/2 dark:hover:before:border-light/3 dark:hover:text-light/9" href="/ux-ui-standards/gestes/bench-ux">Bench UX - userflow</a></div></li></ul></div></div></li></ul><div class="relative z-[2] lg:absolute bottom-0 right-0 left-0 flex flex-col pointer-events-none lg:-left-5"><div class="text-sm text-dark/8 pr-0 pt-2 pb-2 mt-4 mb-4 bg-[size:250%_125%] bg-[position:50%_35%] bg-[radial-gradient(farthest-side_at_50%_-70%,_var(--tw-gradient-stops))] from-transparent from-60% to-light to-80% lg:pr-2 lg:mt-0 lg:mb-0 lg:mr-2 lg:pt-16 dark:text-light/6 dark:dark:to-dark"><a target="_blank" href="https://www.gitbook.com/?utm_source=content&utm_medium=trademark&utm_campaign=-L3Ckj9RuJ2qwWPoNJTG" class="font-semibold ring-1 ring-inset ring-dark/2 pointer-events-auto transition-colors flex flex-row items-center hover:bg-dark/1 bg-light dark:bg-dark px-4 py-4 rounded-lg straight-corners:rounded-none hover:backdrop-blur-sm lg:ring-0 tracking-[-0.016em] dark:hover:bg-light/1 dark:ring-light/1 border border-dark/2 dark:border-light/2"><svg style="mask-image:url(/~gitbook/static/icons/svgs/custom-icons/gitbook.svg?v=2);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-5 mr-3"></svg>Powered by GitBook</a></div></div></div></aside><div class="flex-1 flex flex-col"><div class="flex flex-row-reverse justify-end"><aside class="group/aside hidden xl:flex flex-col basis-56 grow-0 shrink-0 sticky py-8 break-anywhere lg:h-full h-[100vh] page-api-block:xl:max-2xl:z-[1] page-api-block:xl:max-2xl:backdrop-blur-md page-api-block:xl:max-2xl:fixed page-api-block:xl:max-2xl:right-8 page-api-block:xl:max-2xl:w-56 page-api-block:xl:max-2xl:bg-light-2/9 page-api-block:xl:max-2xl:rounded page-api-block:xl:max-2xl:h-auto page-api-block:xl:max-2xl:py-0 page-api-block:xl:max-2xl:mt-3 dark:page-api-block:xl:max-2xl:bg-dark-2/8 lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16"><div class="hidden page-api-block:xl:max-2xl:flex flex-row items-center gap-3 text-sm font-semibold px-2 py-2"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/bars.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-3"></svg>On this page</div><div class="overflow-auto flex-1 flex flex-col gap-4 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent page-api-block:xl:max-2xl:hidden page-api-block:xl:max-2xl:group-hover/aside:flex"><ul class="border-l border-dark/2 dark:border-light/1 pl-1"><li class="flex flex-row relative h-fit"><a href="#definitions" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 ps-3 pe-2 transition-all duration-200 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Definitions</a></li><li class="flex flex-row relative h-fit"><a href="#i-am-using-spacing-correctly-if" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 ps-3 pe-2 transition-all duration-200 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">I am using spacing correctly if :</a></li><li class="flex flex-row relative h-fit"><a href="#standard-use-a-spacing-grid" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 ps-3 pe-2 transition-all duration-200 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Standard : Use a spacing grid</a></li><li class="flex flex-row relative h-fit"><a href="#how-to-define-a-grid" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 pe-2 transition-all duration-200 ps-6 opacity-8 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">How to define a grid</a></li><li class="flex flex-row relative h-fit"><a href="#using-a-grid-brings-consistency-and-ease-of-mind" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 pe-2 transition-all duration-200 ps-6 opacity-8 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Using a grid brings consistency and ease of mind</a></li><li class="flex flex-row relative h-fit"><a href="#good-practices" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 pe-2 transition-all duration-200 ps-6 opacity-8 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Good practices</a></li><li class="flex flex-row relative h-fit"><a href="#sketch-tips" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 ps-3 pe-2 transition-all duration-200 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Sketch tips</a></li><li class="flex flex-row relative h-fit"><a href="#helpful-articles" class="flex flex-row z-10 w-full items-baseline left-[-1px] relative text-sm py-1 ps-3 pe-2 transition-all duration-200 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100">Helpful articles</a></li></ul><div class="flex flex-col gap-3 page-api-block:xl:max-2xl:px-3"></div></div><div class="mt-4" data-visual-test="removed"></div></aside><main class="flex-1 relative py-8 lg:px-12 break-anywhere page-api-block:xl:max-2xl:pr-0 page-api-block:max-w-[1654px] page-api-block:mx-auto"><header class="max-w-3xl mx-auto mb-6 space-y-3 page-api-block:ml-0"><h1 class="text-4xl font-bold flex items-center gap-4">Spacing</h1></header><template id="B:0"></template><div class="flex flex-col gap-4"><div id="definitions" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="i-am-using-spacing-correctly-if" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="standard-use-a-spacing-grid" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="how-to-define-a-grid" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="using-a-grid-brings-consistency-and-ease-of-mind" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="good-practices" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="sketch-tips" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div role="status" aria-busy="true" class="skeleton-paragraph"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><div id="helpful-articles" role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div></div><div class="flex flex-col md:flex-row mt-6 gap-2 max-w-3xl mx-auto page-api-block:ml-0"><a class="group text-sm p-2.5 flex gap-4 flex-1 flex-row-reverse items-center pl-4 border border-dark/3 rounded straight-corners:rounded-none hover:border-primary/6 dark:border-light/2 text-pretty dark:hover:border-primary-300/4 md:p-4 md:text-base" href="/ux-ui-standards/ui-standards"><span class="flex flex-col flex-1 text-right"><span class="text-xs">Previous</span><span class="text-dark dark:text-light/6 group-hover:text-primary line-clamp-2">UI Principles</span></span><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-left.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon hidden size-4 text-dark/5 group-hover:text-primary dark:text-light/4 md:block"></svg></a><a class="group text-sm p-2.5 flex gap-4 flex-1 flex-row items-center pr-4 border border-dark/3 rounded straight-corners:rounded-none hover:border-primary/6 dark:border-light/2 text-pretty dark:hover:border-primary-300/4 md:p-4 md:text-base" href="/ux-ui-standards/ui-standards/colors"><span class="flex flex-col flex-1"><span class="text-xs">Next</span><span class="text-dark dark:text-light/6 group-hover:text-primary line-clamp-2">Colors</span></span><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-right.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon hidden size-4 text-dark/5 group-hover:text-primary dark:text-light/4 md:block"></svg></a></div><div class="flex flex-row items-center mt-6 max-w-3xl mx-auto page-api-block:ml-0"><p class="flex-1 text-sm text-dark/6 dark:text-light/5">Last updated <time data-visual-test="transparent" dateTime="2018-01-22T09:43:23.263Z" title="1/22/2018, 9:43:23 AM">6 years ago</time></p></div></main></div></div></div></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw" data-cfasync="false"> document.addEventListener("DOMContentLoaded", () => { if (Array.from(document.scripts).find(script => script.src.includes('rocket-loader.min.js'))) { const alert = document.createElement('div'); alert.className = 'p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 mt-8 mx-8'; alert.innerHTML = ` <strong>Error in site configuration:</strong> It looks like ${window.location.hostname} has been incorrectly configured in Cloudflare. This may lead to unexpected behavior or issues with the page loading. If you are the owner of this site, please refer to <a href="https://docs.gitbook.com/published-documentation/custom-domain/configure-dns#are-you-using-cloudflare" class="underline">GitBook's documentation</a> for steps to fix the problem. `; document.body.prepend(alert); } });</script><script src="/_next/static/chunks/webpack-21fb00c223e55731.js" nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw" async=""></script><div hidden id="S:0"><div class="[&>*+*]:mt-5 grid whitespace-pre-wrap"><h2 id="definitions" class="text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]"><a href="#definitions" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[1em]">Definitions</div></h2><p class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><strong class="font-bold">Margin : </strong>External spacing between an element and the ones on the same level</p><p class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><strong class="font-bold">Padding : </strong>Internal spacing between element and its child elements</p><div class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0 flex flex-row gap-3 justify-center"><template id="P:1"></template></div><h2 id="i-am-using-spacing-correctly-if" class="text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]"><a href="#i-am-using-spacing-correctly-if" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[1em]">I am using spacing correctly if :</div></h2><ul class="space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">the spacing used helps me understand the hierarchy and grouping of elements on the page</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">developers can place elements on the page without input from a designer</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">designers can place elements on the page in less than 30 seconds</p></div></li></ul><h2 id="standard-use-a-spacing-grid" class="text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]"><a href="#standard-use-a-spacing-grid" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[1em]">Standard : Use a spacing grid</div></h2><h3 id="how-to-define-a-grid" class="text-2xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]"><a href="#how-to-define-a-grid" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[0.75em]">How to define a grid</div></h3><div class="hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-green-500/2 border-green-500/4 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="flex flex-row"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/circle-check.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-5 mr-4 mt-0.5 leading-normal text-green-500 dark:text-green-400"></svg><div class="flex-1 space-y-4 [&_.hint]:border [&_pre]:border"><ul class="space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl [&_a]:text-green-800 [&_a:hover]:text-green-900 dark:[&_a]:text-green-400 dark:[&_a:hover]:text-green-300 [&_.can-override-bg]:bg-green-500/3 [&_.can-override-text]:text-green-800 dark:[&_.can-override-text]:text-green-400 flip-heading-hash"><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Define a basic spacing value (5pt, 8pt ...)</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Use only multiples of that value to place elements on the page</p></div></li></ul></div></div></div><div class="hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-dark-1/1 border-dark/3 dark:bg-light/1 dark:border-light/3 [&_.can-override-bg]:bg-dark-1/2 [&_.can-override-text]:text-dark dark:[&_.can-override-bg]:bg-light/2 dark:[&_.can-override-text]:text-light w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="flex flex-row"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/circle-info.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-5 mr-4 mt-0.5 leading-normal text-primary-500 dark:text-primary-400"></svg><div class="flex-1 space-y-4 [&_.hint]:border [&_pre]:border"><p class="w-full mx-auto decoration-primary/6 max-w-3xl [&_a]:text-primary-500 [&_a:hover]:text-primary-600 dark:[&_a]:text-primary-400 dark:[&_a:hover]:text-primary-300 flip-heading-hash"><strong class="font-bold">Pro-tip : </strong>Material Design uses an 8pt-grid</p></div></div></div><h3 id="using-a-grid-brings-consistency-and-ease-of-mind" class="text-2xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]"><a href="#using-a-grid-brings-consistency-and-ease-of-mind" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[0.75em]">Using a grid brings consistency and ease of mind</div></h3><ul class="space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">It reduces the amount of time needed to position elements by reducing choice</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">It ensures a visual harmony of the positioning and sizing of elements by using only multiples of a basic value</p></div></li></ul><div class="hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-dark-1/1 border-dark/3 dark:bg-light/1 dark:border-light/3 [&_.can-override-bg]:bg-dark-1/2 [&_.can-override-text]:text-dark dark:[&_.can-override-bg]:bg-light/2 dark:[&_.can-override-text]:text-light w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="flex flex-row"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/circle-info.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon size-5 mr-4 mt-0.5 leading-normal text-primary-500 dark:text-primary-400"></svg><div class="flex-1 space-y-4 [&_.hint]:border [&_pre]:border"><p class="w-full mx-auto decoration-primary/6 max-w-3xl [&_a]:text-primary-500 [&_a:hover]:text-primary-600 dark:[&_a]:text-primary-400 dark:[&_a:hover]:text-primary-300 flip-heading-hash">For elements with fixed width or height, fix that dimension using multiples of the spacing value as well, for maximum consistency</p></div></div></div><h3 id="good-practices" class="text-2xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]"><a href="#good-practices" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[0.75em]">Good practices</div></h3><template id="B:2"></template><div role="status" aria-busy="true" class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]"><div class="w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]"><div class="aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6"></div></div></div></div><ul class="space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Add your grid basic value and some commonly used spacing dimensions on your styleguide</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Define elements by margin instead of by size.</p></div></li></ul><h2 id="sketch-tips" class="text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]"><a href="#sketch-tips" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[1em]">Sketch tips</div></h2><ul class="space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Décaler les éléments de 10pts dans une direction : shift + flèche</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">Mesurer la marge entre deux éléments : sélectionner un élément + alt sur l’autre élément</p></div></li><li class="leading-normal flex items-start"><div class="text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5"><div class="before:font-var before:content-[--pseudoBefore--content]" style="--pseudoBefore--content:'•';--font-family:Arial;font-size:min(1.5em, 24px);line-height:1"></div></div><div class="space-y-2 flex flex-col flex-1"><p class="w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [&:is(h2)>div]:mt-0 [&:is(h3)>div]:mt-0 [&:is(h4)>div]:mt-0">On peut faire des calculs simples (+, -, *, /) dans l’inspecteur de Sketch</p></div></li></ul><h2 id="helpful-articles" class="text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0"><div class="grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]"><a href="#helpful-articles" aria-label="Direct link to heading" class="inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight"><svg style="mask-image:url(https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/hashtag.svg?v=2&token=a463935e93);mask-repeat:no-repeat;mask-position:center" class="gb-icon w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4"></svg></a></div><div class="grid-area-1-1 z-[1] mt-[1em]">Helpful articles</div></h2></div></div><div hidden id="S:2"><div class="w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0 flex flex-row gap-3 justify-center"><template id="P:3"></template></div></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"1:HC[\"/\",\"\"]\n2:HL[\"/_next/static/css/2d00a2f28ca4dc5d.css\",\"style\"]\n3:HL[\"/_next/static/css/99f50cfb598d2941.css\",\"style\"]\n4:HL[\"/_next/static/css/d42d805b938873da.css\",\"style\"]\n5:HL[\"/_next/static/css/0673bb6e29c473c8.css\",\"style\"]\n6:HL[\"/_next/static/css/c311d6484335995a.css\",\"style\"]\n7:HL[\"/_next/static/css/5a687dea857dc6f5.css\",\"style\"]\n8:HL[\"/_next/static/css/7235fa9d119901d4.css\",\"style\"]\n9:HL[\"/_next/static/css/86d6274f3e6d760c.css\",\"style\"]\na:HL[\"/_next/static/css/a91fbeec63857000.css\",\"style\"]\nb:HL[\"/_next/static/css/2d0986519abf0323.css\",\"style\"]\nc:HL[\"/_next/static/css/0f891de5863d7182.css\",\"style\"]\nd:I[11815,[],\"default\"]\n10:I[55092,[],\"default\"]\n12:I[82023,[],\"default\"]\n17:I[44622,[\"6470\",\"static/chunks/app/global-error-19768e91f18f21d9.js\"],\"default\"]\n11:[\"pathname\",\"ui-standards/margins\",\"oc\"]\n18:[]\n0:[\"$\",\"$Ld\",null,{\"buildId\":\"6YnOxlQa6DuDEkBdh389I\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"ux-ui-standards\",\"ui-standards\",\"margins\"],\"initialTree\":[\"\",{\"children\":[\"(site)\",{\"children\":[\"(content)\",{\"children\":[[\"pathname\",\"ui-standards/margins\",\"oc\"],{\"children\":[\"__PAGE__?{\\\"pathname\\\":[\\\"ui-standards\\\",\\\"margins\\\"]}\",{}]}]}]},\"$undefined\",\"$undefined\",true]}],\"initialSeedData\":[\"\",{\"children\":[\"(site)\",{\"children\":[\"(content)\",{\"children\":[[\"pathname\",\"ui-standards/margins\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$Le\",\"$Lf\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7235fa9d119901d4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/86d6274f3e6d760c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a91fbeec63857000.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2d0986519abf0323.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0f891de5863d7182.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(site)\",\"children\",\"(content)\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$L13\",\"notFoundStyles\":[]}]],[[\"$\",\"div\",null,{\"className\":\"flex flex-row flex-1 relative py-8 lg:px-16 xl:mr-56 items-center lg:items-start\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex-1 max-w-3xl mx-auto page-full-width:mx-0\",\"children\":[[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"mb-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] mb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}]]}]}],[],[]]]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5a687dea857dc6f5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"$L14\"],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2d00a2f28ca4dc5d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/99f50cfb598d2941.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d42d805b938873da.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0673bb6e29c473c8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c311d6484335995a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"$L15\"],null],null]},[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L16\"],\"globalErrorComponent\":\"$17\",\"missingSlots\":\"$W18\"}]\n13:[\"$\",\"div\",null,{\"className\":\"flex-1 flex flex-row items-center justify-center py-9\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-80\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-2\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"text-base mb-4\",\"children\":\"The page you are looking for doesn't exist.\"}]]}]}]\n1a:I[5145,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"4012\",\"static/chunks/4012-d5519c7c19347ff0.js\",\"7457\",\"static/chunks/app/(site)/layout-512d7fc9258aa558.js\"],\"IconsProvider\"]\n1b:I[75489,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"4012\",\"static/chunks/4012-d5519c7c19347ff0.js\",\"7457\",\"static/chunks/app/(site)/layout-512d7fc9258aa558.js\"],\"ClientContexts\"]\n1c:I[51169,[\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"3638\",\"static/chunks/app/(site)/error-aabf7054fe6497a1.js\"],\"default\"]\n19:T113e,\n :root {\n --primary-color-50: 234 242 255;\n--primary-color-100: 212 229 255;\n--primary-color-200: 170 204 255;\n--primary-color-300: 127 178 255;\n--primary-color-400: 85 153 255;\n--primary-color-500: 42 127 255;\n--primary-color-600: 34 102 204;\n--primary-color-700: 25 76 153;\n--primary-color-800: 17 51 102;\n--primary-color-900: 8 25 51;\n --contrast-p"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"rimary-50: 0 0 0;\n--contrast-primary-100: 0 0 0;\n--contrast-primary-200: 0 0 0;\n--contrast-primary-300: 0 0 0;\n--contrast-primary-400: 0 0 0;\n--contrast-primary-500: 0 0 0;\n--contrast-primary-600: 255 255 255;\n--contrast-primary-700: 255 255 255;\n--contrast-primary-800: 255 255 255;\n--contrast-primary-900: 255 255 255;\n\n --primary-base-50: 234 242 255;\n--primary-base-100: 212 229 255;\n--primary-base-200: 170 204 255;\n--primary-base-300: 127 178 255;\n--primary-base-400: 85 153 255;\n--primary-base-500: 42 127 255;\n--primary-base-600: 34 102 204;\n--primary-base-700: 25 76 153;\n--primary-base-800: 17 51 102;\n--primary-base-900: 8 25 51;\n --header-background-50: 255 255 255;\n--header-background-100: 255 255 255;\n--header-background-200: 255 255 255;\n--header-background-300: 255 255 255;\n--header-background-400: 255 255 255;\n--header-background-500: 255 255 255;\n--header-background-600: 204 204 204;\n--header-background-700: 153 153 153;\n--header-background-800: 102 102 102;\n--header-background-900: 51 51 51;\n --header-link-50: 234 242 255;\n--header-link-100: 212 229 255;\n--header-link-200: 170 204 255;\n--header-link-300: 127 178 255;\n--header-link-400: 85 153 255;\n--header-link-500: 42 127 255;\n--header-link-600: 34 102 204;\n--header-link-700: 25 76 153;\n--header-link-800: 17 51 102;\n--header-link-900: 8 25 51;\n --header-button-text-50: 230 230 230;\n--header-button-text-100: 204 204 204;\n--header-button-text-200: 153 153 153;\n--header-button-text-300: 102 102 102;\n--header-button-text-400: 51 51 51;\n--header-button-text-500: 0 0 0;\n--header-button-text-600: 0 0 0;\n--header-button-text-700: 0 0 0;\n--header-button-text-800: 0 0 0;\n--header-button-text-900: 0 0 0;\n }\n .dark {\n --primary-color-50: 234 242 255;\n--primary-color-100: 212 229 255;\n--primary-color-200: 170 204 255;\n--primary-color-300: 127 178 255;\n--primary-color-400: 85 153 255;\n--primary-color-500: 42 127 255;\n--primary-color-600: 34 102 204;\n--primary-color-700: 25 76 153;\n--primary-color-800: 17 51 102;\n--primary-color-900: 8 25 51;\n --primary-base-50: 234 242 255;\n--primary-base-100: 212 229 255;\n--primary-base-200: 170 204 255;\n--primary-base-300: 127 178 255;\n--primary-base-400: 85 153 255;\n--primary-base-500: 42 127 255;\n--primary-base-600: 34 102 204;\n--primary-base-700: 25 76 153;\n--primary-base-800: 17 51 102;\n--primary-base-900: 8 25 51;\n --contrast-primary-50: 0 0 0;\n--contrast-primary-100: 0 0 0;\n--contrast-primary-200: 0 0 0;\n--contrast-primary-300: 0 0 0;\n--contrast-primary-400: 0 0 0;\n--contrast-primary-500: 0 0 0;\n--contrast-primary-600: 255 255 255;\n--contrast-primary-700: 255 255 255;\n--contrast-primary-800: 255 255 255;\n--contrast-primary-900: 255 255 255;\n --header-background-50: 230 230 230;\n--header-background-100: 204 204 204;\n--header-background-200: 153 153 153;\n--header-background-300: 102 102 102;\n--header-background-400: 51 51 51;\n--header-background-500: 0 0 0;\n--header-background-600: 0 0 0;\n--header-background-700: 0 0 0;\n--header-background-800: 0 0 0;\n--header-background-900: 0 0 0;\n --header-link-50: 234 242 255;\n--header-link-100: 212 229 255;\n--header-link-200: 170 204 255;\n--header-link-300: 127 178 255;\n--header-link-400: 85 153 255;\n--header-link-500: 42 127 255;\n--header-link-600: 34 102 204;\n--header-link-700: 25 76 153;\n--header-link-800: 17 51 102;\n--header-link-900: 8 25 51;\n --header-button-text-50: 230 230 230;\n--header-button-text-100: 204 204 204;\n--header-button-text-200: 153 153 153;\n--header-button-text-300: 102 102 102;\n--header-button-text-400: 51 51 51;\n--header-button-text-500: 0 0 0;\n--header-button-text-600: 0 0 0;\n--header-button-text-700: 0 0 0;\n--header-button-text-800: 0 0 0;\n--header-button-text-900: 0 0 0;\n }\n 1d:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\""])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n1e:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n1f:{\"display\":\"inline-block\"}\n20:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n15:[\"$\",\"html\",null,{\"suppressHydrationWarning\":true,\"lang\":\"en\",\"className\":\"scroll-pt-[76px] plain-background\",\"children\":[[\"$\",\"head\",null,{\"children\":[null,[\"$\",\"style\",null,{\"nonce\":\"$undefined\",\"children\":\"$19\"}]]}],[\"$\",\"body\",null,{\"className\":\"__variable_274faa __variable_a7f53a __variable_e782a9 __className_053b0a __variable_0e9704 bg-light dark:bg-dark\",\"children\":[\"$\",\"$L1a\",null,{\"assetsURL\":\"https://ka-p.fontawesome.com/releases/v6.6.0/\",\"assetsURLToken\":\"a463935e93\",\"assetsByStyles\":{\"custom-icons\":{\"assetsURL\":\"/~gitbook/static/icons\"}},\"iconStyle\":\"regular\",\"children\":[\"$\",\"$L1b\",null,{\"language\":{\"locale\":\"en\",\"powered_by_gitbook\":\"Powered by GitBook\",\"sponsored_via_gitbook\":\"Sponsored via GitBook\",\"switch_to_dark_theme\":\"Switch to dark theme\",\"switch_to_light_theme\":\"Switch to light theme\",\"switch_to_system_theme\":\"Switch to system theme\",\"search\":\"Search\",\"search_or_ask\":\"Ask or Search\",\"search_input_placeholder\":\"Search content\",\"search_ask_input_placeholder\":\"Search content or ask a question\",\"search_no_results\":\"No results for \\\"${1}\\\".\",\"search_scope_space\":\"$${1}\",\"search_scope_all\":\"All content\",\"search_ask\":\"Ask \\\"${1}\\\"\",\"search_ask_sources\":\"Sources\",\"search_ask_sources_no_answer\":\"Related pages\",\"search_ask_no_answer\":\"An answer could not be found for your question. You could try rephrasing it, or be more specific.\",\"search_ask_error\":\"Something went wrong. Please try again later.\",\"on_this_page\":\"On this page\",\"next_page\":\"Next\",\"previous_page\":\"Previous\",\"page_last_modified\":\"Last updated ${1}\",\"was_this_helpful\":\"Was this helpful?\",\"was_this_helpful_positive\":\"Yes, it was!\",\"was_this_helpful_neutral\":\"Not sure\",\"was_this_helpful_negative\":\"No\",\"was_this_helpful_thank_you\":\"Thank you!\",\"annotation_button_label\":\"Open annotation\",\"code_copied\":\"Copied!\",\"code_copy\":\"Copy\",\"table_of_contents_button_label\":\"Open table of contents\",\"cookies_title\":\"Cookies\",\"cookies_prompt\":\"This site uses cookies to deliver its service and to analyse traffic. By browsing this site, you accept the ${1}.\",\"cookies_prompt_privacy\":\"privacy policy\",\"cookies_accept\":\"Accept\",\"cookies_reject\":\"Reject\",\"cookies_close\":\"Close\",\"edit_on_git\":\"Edit on ${1}\",\"notfound_title\":\"Page not found\",\"notfound\":\"The page you are looking for doesn't exist.\",\"unexpected_error_title\":\"An error occurred\",\"unexpected_error\":\"Sorry, an unexpected error has occurred. Please try again later.\",\"unexpected_error_retry\":\"Retry\",\"pdf_download\":\"Export as PDF\",\"pdf_goback\":\"Go back to content\",\"pdf_print\":\"Print or Save as PDF\",\"pdf_page_of\":\"$${1} of ${2}\",\"pdf_mode_only_page\":\"Only this page\",\"pdf_mode_all\":\"All pages\",\"pdf_limit_reached\":\"Couldn't generate the PDF for ${1} pages, generation stopped at ${2}.\",\"pdf_limit_reached_continue\":\"Extend with ${1} more pages.\",\"more\":\"More\"},\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(site)\",\"children\"],\"error\":\"$1c\",\"errorStyles\":[],\"errorScripts\":[],\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$1d\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$1e\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$1f\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$20\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"not"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"FoundStyles\":[]}]}]}]}]]}]\n21:HC\"https://api.gitbook.com\"\n22:HL[\"https://integrations.gitbook.com/v1/integrations/googleanalytics/installations/fed41e98e4e98569ea0efc948ee7657ce979e3d13301ed5374b8494b6ffe0f81/sites/site_JKoxZ/script.js?version=149.0\",\"script\",{\"nonce\":\"ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw\"}]\n23:I[17760,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"ClientContexts\"]\n24:I[72020,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"HeaderMobileMenu\"]\n25:I[22833,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"4012\",\"static/chunks/4012-d5519c7c19347ff0.js\",\"7457\",\"static/chunks/app/(site)/layout-512d7fc9258aa558.js\"],\"Link\"]\n29:\"$Sreact.suspense\"\n2a:I[86604,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"SearchButton\"]\n2b:I[19656,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"TOCScrollContainer\"]\n2c:I[66185,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"ToggleableLinkItem\"]\n2d:I[22563,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"4012\",\"static/chunks/4012-d5519c7c19347ff0.js\",\"7457\",\"static/chunks/app/(site)/layout-512d7fc9258aa558.js\"],\"Icon\"]\n2e:I[59814,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"SearchModal\"]\n2f:I[49780,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,".js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"LoadIntegrations\"]\n30:I[35489,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"CookiesToast\"]\n14:[\"$\",\"$L23\",null,{\"nonce\":\"ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw\",\"forcedTheme\":\"light\",\"children\":[[[\"$\",\"header\",null,{\"className\":\"flex flex-col h-[64px] sticky top-0 z-10 w-full flex-none shadow-thinbottom lg:z-10 dark:shadow-light/1 bg-light dark:bg-dark\",\"children\":[[\"$\",\"div\",null,{\"className\":\"scroll-nojump\",\"children\":[\"$\",\"div\",null,{\"className\":\"gap-4 grid grid-flow-col auto-cols-[auto_auto_1fr_auto] h-16 items-center align-center justify-between w-full px-4 sm:px-6 md:px-8 max-w-screen-2xl mx-auto page-full-width:max-w-full\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-2\",\"children\":[[\"$\",\"$L24\",null,{\"className\":\"lg:hidden text-dark dark:text-light\"}],[\"$\",\"$L25\",null,{\"href\":\"/ux-ui-standards/\",\"className\":\"group/headerlogo flex-1 flex flex-row items-center shrink-0\",\"children\":[[\"$L26\",\"$L27\"],[\"$\",\"div\",null,{\"className\":\"text-pretty line-clamp-3 leading-[1.1] tracking-tight max-w-[18ch] lg:max-w-[24ch] lg:text-lg/tight font-semibold ms-3 text-dark dark:text-light\",\"children\":\"UX UI Guidelines\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"z-20\",\"children\":null}],\"$L28\",[\"$\",\"div\",null,{\"className\":\"flex md:w-56 grow-0 shrink-0 justify-self-end\",\"children\":[\"$\",\"$29\",null,{\"fallback\":null,\"children\":[\"$\",\"$L2a\",null,{\"style\":null,\"children\":[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Search\"}]}]}]}]]}]}],null]}],[\"$\",\"div\",null,{\"className\":\"scroll-nojump\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col lg:flex-row px-4 sm:px-6 md:px-8 max-w-screen-2xl mx-auto page-full-width:max-w-full min-h-[calc(100vh-64px)]\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"relative group flex flex-col basis-full bg-light grow-0 shrink-0 shadow-thinbottom navigation-open:shadow-dark/2 z-[1] top-0 h-[100vh] lg:basis-72 lg:navigation-open:border-b-0 lg:sticky dark:bg-dark dark:navigation-open:shadow-light/2 page-no-toc:hidden lg:top-16 lg:h-[calc(100vh_-_4rem)]\",\"children\":[null,[\"$\",\"$L2b\",null,{\"className\":\"pt-4 hidden lg:flex flex-grow flex-col overflow-y-auto lg:gutter-stable lg:pr-2 group-hover:[\u0026::-webkit-scrollbar]:bg-dark/1 group-hover:[\u0026::-webkit-scrollbar-thumb]:bg-dark/3 [\u0026::-webkit-scrollbar]:bg-transparent [\u0026::-webkit-scrollbar-thumb]:bg-transparent dark:[\u0026::-webkit-scrollbar]:bg-transparent dark:[\u0026::-webkit-scrollbar-thumb]:bg-transparent dark:group-hover:[\u0026::-webkit-scrollbar]:bg-light/1 dark:group-hover:[\u0026::-webkit-scrollbar-thumb]:bg-light/3 navigation-open:flex lg:-ml-5 lg:pb-20\",\"children\":[null,[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/\",\"pathname\":\"\",\"descendants\":null,\"children\":\"BAM UX/UI Standards\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards\",\"pathname\":\"ux-standards\",\"descendants\":[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/chat-bot\",\"pathname\":\"ux-standards/chat-bot\",\"descendants\":null,\"children\":\"Chat Bot - Messenger\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/geoloc-carte-et-permissions\",\"path"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"name\":\"ux-standards/geoloc-carte-et-permissions\",\"descendants\":null,\"children\":\"Geoloc \u0026 permissions\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/parrainage\",\"pathname\":\"ux-standards/parrainage\",\"descendants\":null,\"children\":\"Parrainage\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/payment\",\"pathname\":\"ux-standards/payment\",\"descendants\":null,\"children\":\"Payment\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/medical-apointment-booking\",\"pathname\":\"ux-standards/medical-apointment-booking\",\"descendants\":null,\"children\":\"Medical apointment booking\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ux-standards/splashscreen\",\"pathname\":\"ux-standards/splashscreen\",\"descendants\":null,\"children\":\"Splashscreen\"}]}]]}],\"children\":\"UX Guidelines\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/prise-de-rdv\",\"pathname\":\"prise-de-rdv\",\"descendants\":null,\"children\":\"[Template]\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ui-components\",\"pathname\":\"ui-components\",\"descendants\":[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ui-components/template\",\"pathname\":\"ui-components/template\",\"descendants\":null,\"children\":\"[Component Template]\"}]}]]}],\"children\":\"UI Components\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ui-standards\",\"pathname\":\"ui-standards\",\"descendants\":[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ui-standards/margins\",\"pathname\":\"ui-standards/margins\",\"descendants\":null,\"children\":\"Spacing\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/ui-standards/colors\",\"pathname\":\"ui-standards/colors\",\"descendants\":null,\"children\":\"Colors\"}]}]]}],\"children\":\"UI Principles\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips\",\"pathname\":\"sketch-tips\",\"descendants\":[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips/document-organisation\",\"pathname\":\"sketch-tips/document-organisation\",\"descendants\":null,\"children\":\"Organiser son document\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips/manipulating-elements\",\"pathname\":\"sketch-tips/manipulating-elements\",\"descendants\":null,\"children\":\"Manipuler les objets\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips/making-icons\",\"pathname\":\"sketch-tips/making-icons\",\"descendants\":null,\"children\":\"Making Icons\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips/symbols\",\"pathname\":\"sketch-tips/symbols\",\"descendants\":null,\"children\":\"Symbols\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/sketch-tips/sketch-plugins\",\"pathname\":\"sketch-tips/sketch-plugins\",\"descendants\":null,\"children\":\"Sketch Plugins\"}]}]]}],\"children\":\"Sketch Tips\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/gestes\",\"pathname\":\"gestes\",\"descendants\":[\"$\",\"ul\",null,{\"className\":\"flex flex-1 flex-col gap-y-0.5 ms-5 my-2 border-l border-dark/3 dark:border-light/2\",\"c"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"hildren\":[[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/gestes/bench-ui\",\"pathname\":\"gestes/bench-ui\",\"descendants\":null,\"children\":\"Bench UI\"}]}],[\"$\",\"li\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"$L2c\",null,{\"href\":\"/ux-ui-standards/gestes/bench-ux\",\"pathname\":\"gestes/bench-ux\",\"descendants\":null,\"children\":\"Bench UX - userflow\"}]}]]}],\"children\":\"Gestes UI/UX\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative z-[2] lg:absolute bottom-0 right-0 left-0 flex flex-col pointer-events-none lg:-left-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-sm text-dark/8 pr-0 pt-2 pb-2 mt-4 mb-4 bg-[size:250%_125%] bg-[position:50%_35%] bg-[radial-gradient(farthest-side_at_50%_-70%,_var(--tw-gradient-stops))] from-transparent from-60% to-light to-80% lg:pr-2 lg:mt-0 lg:mb-0 lg:mr-2 lg:pt-16 dark:text-light/6 dark:dark:to-dark\",\"children\":[\"$\",\"a\",null,{\"target\":\"_blank\",\"href\":\"https://www.gitbook.com/?utm_source=content\u0026utm_medium=trademark\u0026utm_campaign=-L3Ckj9RuJ2qwWPoNJTG\",\"className\":\"font-semibold ring-1 ring-inset ring-dark/2 pointer-events-auto transition-colors flex flex-row items-center hover:bg-dark/1 bg-light dark:bg-dark px-4 py-4 rounded-lg straight-corners:rounded-none hover:backdrop-blur-sm lg:ring-0 tracking-[-0.016em] dark:hover:bg-light/1 dark:ring-light/1 border border-dark/2 dark:border-light/2\",\"children\":[[\"$\",\"$L2d\",null,{\"icon\":\"gitbook\",\"className\":\"size-5 mr-3\"}],\"Powered by GitBook\"]}]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1 flex flex-col\",\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(site)\",\"children\",\"(content)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]}]]}]}],null,[\"$\",\"$29\",null,{\"fallback\":null,\"children\":[\"$\",\"$L2e\",null,{\"spaceId\":\"-L3Ckj9RuJ2qwWPoNJTG\",\"revisionId\":\"-L8rcmnccEGE5UNpFdCH\",\"spaceTitle\":\"UX UI Guidelines\",\"withAsk\":false,\"isMultiVariants\":false,\"pointer\":{\"siteId\":\"site_JKoxZ\",\"spaceId\":\"-L3Ckj9RuJ2qwWPoNJTG\",\"siteSectionId\":\"$undefined\",\"siteSpaceId\":\"sitesp_ygVeY\",\"siteShareKey\":\"$undefined\",\"organizationId\":\"-L3Ci_0_aIuZ9zYoRiSf\",\"revisionId\":\"$undefined\",\"changeRequestId\":\"$undefined\"}}]}]],[[\"$\",\"$L2f\",null,{}],[[\"$\",\"script\",\"https://integrations.gitbook.com/v1/integrations/googleanalytics/installations/fed41e98e4e98569ea0efc948ee7657ce979e3d13301ed5374b8494b6ffe0f81/sites/site_JKoxZ/script.js?version=149.0\",{\"async\":true,\"src\":\"https://integrations.gitbook.com/v1/integrations/googleanalytics/installations/fed41e98e4e98569ea0efc948ee7657ce979e3d13301ed5374b8494b6ffe0f81/sites/site_JKoxZ/script.js?version=149.0\",\"nonce\":\"ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw\"}]]],[\"$\",\"$29\",null,{\"fallback\":null,\"children\":[\"$\",\"$L30\",null,{\"privacyPolicy\":\"$undefined\"}]}],[\"$\",\"script\",null,{\"nonce\":\"ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw\",\"suppressHydrationWarning\":true,\"data-cfasync\":\"false\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n document.addEventListener(\\\"DOMContentLoaded\\\", () =\u003e {\\n if (Array.from(document.scripts).find(script =\u003e script.src.includes('rocket-loader.min.js'))) {\\n const alert = document.createElement('div');\\n alert.className = 'p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 mt-8 mx-8';\\n alert.innerHTML = `\\n \u003cstrong\u003eError in site configuration:\u003c/strong\u003e\\n It looks like ${window.location.hostname} has been incorrectly configured in Cloudflare. This may lead to unexpected behavior or issues with the page loading. If you are the owner of this site, please refer to \u003ca href=\\\"https://docs.gitbook.com/published-documentation/custom-domain/configure-dns#are-you-using-cloudflare\\\" class=\\\"underline\\\"\u003eGitBook's documentation\u003c/a\u003e for steps to fix the problem.\\n `;\\n\\n document.body.prepend(alert);\\n }\\n });\"}}],n"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"ull]}]\n28:[\"$\",\"div\",null,{\"className\":\"headerLinks_containerHeaderlinks__GUgiv flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56 z-20\",\"children\":[[],[\"$\",\"div\",null,{\"className\":\"headerLinks_linkEllipsis__Z01IN items-center z-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"group/dropdown relative flex\",\"children\":[[\"$\",\"button\",null,{\"className\":\"px-1 text-dark/8 dark:text-light/8 dark:hover:text-light hover:text-header-link-400\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"More\"}],[\"$\",\"$L2d\",null,{\"icon\":\"ellipsis\",\"className\":\"opacity-6 size-3 ms-1\"}]]}],[\"$\",\"div\",null,{\"tabIndex\":-1,\"role\":\"menu\",\"aria-orientation\":\"vertical\",\"aria-labelledby\":\":S1:\",\"className\":\"w-52 max-h-56 flex absolute top-full left-0 z-20 origin-top-left invisible transition-opacity duration-1000 group-hover/dropdown:visible group-focus-within/dropdown:visible -translate-x-48 md:translate-x-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"mt-2 w-full bg-light rounded-lg straight-corners:rounded-sm p-2 shadow-1xs overflow-auto ring-1 ring-dark/1 ring-opacity-8 focus:outline-none dark:bg-dark dark:ring-light/2\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-1\",\"children\":[]}]}]}]]}]}]]}]\n31:T46f,https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=1\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 32w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=2\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 64w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=3\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 96w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=4\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 128w26:[\"$\",\"img\",null,{\"alt\":\"\",\"style\":{\"aspectRatio\":\"1\"},\"loading\":\"$undefined\",\"fetchPriority\":\"high\",\"className\":\"block dark:hidden object-contain size-8\",\"src\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=4\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1\",\"srcSet\":\"$31\",\"sizes\":\"32px\",\"width\":256,\"height\":256}]\n32:T46f,https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=1\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 32w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=2\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 64w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=3\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 96w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=4\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1 128w27:[\"$\",\"img\",null,{\"alt\":\"\",\"style\":{\"aspectRatio\":\"1\"},\"loading\":\"lazy\""])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,",\"fetchPriority\":\"high\",\"className\":\"hidden dark:block object-contain size-8\",\"src\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fspaces%252F-L3Ckj9RuJ2qwWPoNJTG%252Favatar.png%3Fgeneration%3D1516354338170876%26alt%3Dmedia\u0026width=32\u0026dpr=4\u0026quality=100\u0026sign=ca0eedd3\u0026sv=1\",\"srcSet\":\"$32\",\"sizes\":\"32px\",\"width\":256,\"height\":256}]\n34:I[2554,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"6150\",\"static/chunks/6150-57a79db9099e4be8.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"8510\",\"static/chunks/8510-2f41b25832a6d317.js\",\"8843\",\"static/chunks/8843-dcccd4a8528a4d7f.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"9028\",\"static/chunks/9028-bdf215f649fe02e9.js\",\"4848\",\"static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js\"],\"Ad\"]\n35:I[46451,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"6150\",\"static/chunks/6150-57a79db9099e4be8.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"8510\",\"static/chunks/8510-2f41b25832a6d317.js\",\"8843\",\"static/chunks/8843-dcccd4a8528a4d7f.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"9028\",\"static/chunks/9028-bdf215f649fe02e9.js\",\"4848\",\"static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js\"],\"PreservePageLayout\"]\n36:\"$Sreact.fragment\"\n39:I[66819,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"4012\",\"static/chunks/4012-d5519c7c19347ff0.js\",\"7457\",\"static/chunks/app/(site)/layout-512d7fc9258aa558.js\"],\"DateRelative\"]\n3a:I[70155,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"6150\",\"static/chunks/6150-57a79db9099e4be8.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"8510\",\"static/chunks/8510-2f41b25832a6d317.js\",\"8843\",\"static/chunks/8843-dcccd4a8528a4d7f.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"9028\",\"static/chunks/9028-bdf215f649fe02e9.js\",\"4848\",\"static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js\"],\"TrackPageView\"]\n3b:I[50004,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"6150\",\"static/chunks/6150-57a79db9099e4be8.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"8510\",\"static/chunks/8510-2f41b25832a6d317.js\",\"8843\",\"static/chunks/8843-dcccd4a8528a4d7f.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"9028\",\"static/chunks/9028-bdf215f649fe02e9.js\",\"4848\",\"static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js\"],\"PageClientLayout\"]\nf:[null,[\"$\",\"div\",null,{\"className\":\"flex flex-row-reverse justify-end\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"group/aside hidden xl:flex flex-col basis-56 grow-0 shrink-0 sticky py-8 break-anywhere lg:h-full h-[100vh] page-api-block:xl:max-2xl:z-[1] page-api-block:xl:max-2xl:backdrop-blur-md page-api-block:xl:max-2xl:fixed page-api-block:xl:max-2xl:right-8 page-api-block:xl:max-2xl:w-56 page-api-block:xl:max-2xl:bg-light-2/9 page-api-block:xl:max-2xl:rounded page-api-block:xl:max-2xl:h-auto page-api-block:xl:max-2xl:py-0 page-api-block:xl:max-2xl:mt-3 dark:page-api-block:xl:max-2xl:bg-dark-2/8 lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"hidden page-api-block:xl:max-2xl:flex flex-row items-center gap-3 text-sm font-semibold px-2 py-2\",\"children\":[[\"$\",\"$L2d\",null,{\"icon\":\"bars\",\"className\":\"size-3\"}],\"On this page\"]}],[\"$\",\"div\",null,{\"className\":\"overflo"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"w-auto flex-1 flex flex-col gap-4 [\u0026::-webkit-scrollbar]:bg-transparent [\u0026::-webkit-scrollbar-thumb]:bg-transparent page-api-block:xl:max-2xl:hidden page-api-block:xl:max-2xl:group-hover/aside:flex\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":null,\"children\":\"$L33\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 page-api-block:xl:max-2xl:px-3\",\"children\":[null,null,null]}]]}],[\"$\",\"$L34\",null,{\"zoneId\":null,\"placement\":\"page.aside\",\"spaceId\":\"-L3Ckj9RuJ2qwWPoNJTG\",\"siteAdsStatus\":\"$undefined\",\"ignore\":false,\"style\":\"mt-4\"}]]}],[[\"$\",\"main\",null,{\"className\":\"flex-1 relative py-8 lg:px-12 break-anywhere page-api-block:xl:max-2xl:pr-0 page-api-block:max-w-[1654px] page-api-block:mx-auto\",\"children\":[[\"$\",\"$L35\",null,{\"asFullWidth\":false}],null,[\"$\",\"header\",null,{\"className\":\"max-w-3xl mx-auto mb-6 space-y-3 page-api-block:ml-0\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold flex items-center gap-4\",\"children\":[\"$undefined\",\"Spacing\"]}],null]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"div\",null,{\"id\":\"definitions\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dar"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"k:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"i-am-using-spacing-correctly-if\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"standard-use-a-spacing-grid\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"how-to-define-a-grid\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"using-a-grid-brings-consistency-and-ease-of-mind\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] "])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"[background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"good-practices\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"sketch-tips\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decorat"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"ion-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],[\"$\",\"div\",null,{\"id\":\"helpful-articles\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}]]}],\"children\":[\"$\",\"div\",null,{\"className\":\"[\u0026\u003e*+*]:mt-5 grid whitespace-pre-wrap\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"definitions\",\"className\":\"text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#definitions\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[1em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Definitions\"}]]]}]]}],[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":[\"$\",\"strong\",null,{\"className\":\"font-bold\",\"children\":\"Margin : \"}]}],[\"$\",\"$36\",\"1\",{\"children\":\"External spacing between an element and the ones on the same level\"}]]]}],[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\""])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"children\":[[[\"$\",\"$36\",\"0\",{\"children\":[\"$\",\"strong\",null,{\"className\":\"font-bold\",\"children\":\"Padding : \"}]}],[\"$\",\"$36\",\"1\",{\"children\":\"Internal spacing between element and its child elements\"}]]]}],[\"$\",\"div\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0 flex flex-row gap-3 justify-center\",\"children\":[\"$L37\"]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"i-am-using-spacing-correctly-if\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h2\",null,{\"id\":\"i-am-using-spacing-correctly-if\",\"className\":\"text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#i-am-using-spacing-correctly-if\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[1em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"I am using spacing correctly if :\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"ul\",null,{\"className\":\"space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-["])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"the spacing used helps me understand the hierarchy and grouping of elements on the page\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-d"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"ark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"developers can place elements on the page without input from a designer\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"designers can place elements on the page in less than 30 seconds\"}]]]}]}]]}]]}]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"standard-use-a-spacing-grid\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h2\",null,{\"id\":\"standard-use-a-spacing-grid\",\"className\":\"text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#standard-use-a-spacing-grid\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[1em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Standard : Use a spacing grid\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"how-to-define-a-grid\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h3\",null,{\"id\":\"how-to-define-a-grid\",\"className\":\"text-2xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#how-to-define-a-grid\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[0.75em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"How to define a grid\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"div\",null,{\"className\":\"hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-green-500/2 border-green-500/4 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-row\",\"children\":[[\"$\",\"$L2d\",null,{\"icon\":\"circle-check\",\"className\":\"size-5 mr-4 mt-0.5 leading-normal text-green-500 dark:text-green-400\"}],[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4 [\u0026_.hint]:border [\u0026_pre]:border\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-green-800 [\u0026_a:hover]:text-green-900 dark:[\u0026_a]:text-green-400 dark:[\u0026_a:hover]:text-green-300 [\u0026_.can-override-bg]:bg-green-500/3 [\u0026_.can-override-text]:text-green-800 dark:[\u0026_.can-override-text]:text-green-400 flip-heading-hash\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"ul\",null,{\"className\":\"space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-green-800 [\u0026_a:hover]:text-green-900 dark:[\u0026_a]:text-green-400 dark:[\u0026_a:hover]:text-green-300 [\u0026_.can-override-bg]:bg-green-500/3 [\u0026_.can-override-text]:text-green-800 dark:[\u0026_.can-override-text]:text-green-400 flip-heading-hash\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"chi"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"ldren\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Define a basic spacing value (5pt, 8pt ...)\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Use only multiples of that value to place elements on the page\"}]]]}]}]]}]]}]}]]}]}]]}]]}]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden "])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"div\",null,{\"className\":\"hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-dark-1/1 border-dark/3 dark:bg-light/1 dark:border-light/3 [\u0026_.can-override-bg]:bg-dark-1/2 [\u0026_.can-override-text]:text-dark dark:[\u0026_.can-override-bg]:bg-light/2 dark:[\u0026_.can-override-text]:text-light w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-row\",\"children\":[[\"$\",\"$L2d\",null,{\"icon\":\"circle-info\",\"className\":\"size-5 mr-4 mt-0.5 leading-normal text-primary-500 dark:text-primary-400\"}],[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4 [\u0026_.hint]:border [\u0026_pre]:border\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-primary-500 [\u0026_a:hover]:text-primary-600 dark:[\u0026_a]:text-primary-400 dark:[\u0026_a:hover]:text-primary-300 flip-heading-hash\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-primary-500 [\u0026_a:hover]:text-primary-600 dark:[\u0026_a]:text-primary-400 dark:[\u0026_a:hover]:text-primary-300 flip-heading-hash\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":[\"$\",\"strong\",null,{\"className\":\"font-bold\",\"children\":\"Pro-tip : \"}]}],[\"$\",\"$36\",\"1\",{\"children\":\"Material Design uses an 8pt-grid\"}]]]}]}]]}]]}]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"using-a-grid-brings-consistency-and-ease-of-mind\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h3\",null,{\"id\":\"using-a-grid-brings-consistency-and-ease-of-mind\",\"className\":\"text-2xl font-semibold group relative grid w-full mx-auto decorat"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"ion-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#using-a-grid-brings-consistency-and-ease-of-mind\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[0.75em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Using a grid brings consistency and ease of mind\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"ul\",null,{\"className\":\"space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\","])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"It reduces the amount of time needed to position elements by reducing choice\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"It ensures a visual harmony of the positioning and sizing of elements by using only multiples of a basic value\"}]]]}]}]]}]]}]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"div\",null,{\"className\":\"hint p-4 transition-colors rounded-md straight-corners:rounded-none bg-dark-1/1 border-dark/3 dark:bg-light/1 dark:border-light/3 [\u0026_.can-override-bg]:bg-dark-1/2 [\u0026_.can-override-text]:text-dark dark:[\u0026_.can-override-bg]:bg-light/2 dark:[\u0026_.can-override-text]:text-light w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-row\",\"children\":[[\"$\",\"$L2d\",null,{\"icon\":\"circle-info\",\"className\":\"size-5 mr-4 mt-0.5 leading-normal text-primary-500 dark:text-primary-400\"}],[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4 [\u0026_.hint]:border [\u0026_pre]:border\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-primary-500 [\u0026_a:hover]:text-primary-600 dark:[\u0026_a]:text-primary-400 dark:[\u0026_a:hover]:text-primary-300 flip-heading-hash\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl [\u0026_a]:text-primary-500 [\u0026_a:hover]:text-primary-600 dark:[\u0026_a]:text-primary-400 dark:[\u0026_a:hover]:text-primary-300 flip-heading-hash\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"For elements with fixed width or height, fix that dimension using multiples of the spacing value as well, for maximum consistency\"}]]]}]}]]}]]}]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"good-practices\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h3\",null,{\"id\":\"good-practices\",\"className\":\"text-2xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[0.75em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#good-practices\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-sta"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"rt dark:text-light/3 dark:shadow-none dark:ring-0 leading-snug\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[0.75em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Good practices\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-full aspect-video [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_96px_96px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"div\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0 flex flex-row gap-3 justify-center\",\"children\":[\"$L38\"]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"ul\",null,{\"className\":\"space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex f"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"lex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Add your grid basic value and some commonly used spacing dimensions on your styleguide\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"36\",\"0\",{\"children\":\"Define elements by margin instead of by size.\"}]]]}]}]]}]]}]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"sketch-tips\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h2\",null,{\"id\":\"sketch-tips\",\"className\":\"text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#sketch-tips\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[1em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Sketch tips\"}]]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"ul\",null,{\"className\":\"space-y-2 w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Décaler les éléments de 10pts dans une direction : shift + flèche\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateL"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"oop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Mesurer la marge entre deux éléments : sélectionner un élément + alt sur l’autre élément\"}]]]}]}]]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"skeleton-paragraph\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md [height:calc(15rem-1px)] [max-width:calc(48rem-1px)] w-full mx-auto decoration-primary/6 max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_48px_48px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"li\",null,{\"className\":\"leading-normal flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base leading-normal flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"before:font-var before:content-[--pseudoBefore--content]\",\"style\":{\"--pseudoBefore--content\":\"'•'\",\"--font-family\":\"Arial\",\"fontSize\":\"min(1.5em, 24px)\",\"lineHeight\":1}}]}],[\"$\",\"div\",null,{\"className\":\"space-y-2 flex flex-col flex-1\",\"children\":[[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"$undefined\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[35px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"p\",null,{\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl min-h-[1lh] flip-heading-hash [\u0026:is(h2)\u003ediv]:mt-0 [\u0026:is(h3)\u003ediv]:mt-0 [\u0026:is(h4)\u003ediv]:mt-0\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"On peut faire des calculs simples (+, -, *, /) dans l’inspecteur de Sketch\"}]]]}]}]]}]]}]}]]}]}],[\"$\",\"$29\",null,{\"fallback\":[\"$\",\"div\",null,{\"id\":\"helpful-articles\",\"role\":\"status\",\"aria-busy\":true,\"className\":\"w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"ring-1 ring-dark/2 overflow-hidden relative grid dark:ring-light/1 rounded-md h-[47px] [max-width:calc(48rem-1px)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-dark-4/4 dark:bg-light-3/1 grid grid-area-1-1 overflow-hidden [mask:conic-gradient(from_90deg_at_1px_1px,_#0000_90deg,_#0003_0)_calc(50%+1px)_calc(0%+47px)_/_12px_12px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-square from-dark-4 to-transparent grid-area-1-1 relative origin-[50%_50%] top-[50%] self-stretch bg-transparent"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1," will-change-transform animate-[rotateLoop_2s_linear_infinite] [background-image:conic-gradient(from_-90deg_at_50%_50%,_var(--tw-gradient-stops)_0deg,_var(--tw-gradient-stops)_90deg,_var(--tw-gradient-stops)_280deg)] dark:from-light-4/6\"}]}]}]}],\"children\":[\"$\",\"h2\",null,{\"id\":\"helpful-articles\",\"className\":\"text-3xl font-semibold group relative grid w-full mx-auto decoration-primary/6 max-w-3xl page-api-block:ml-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-area-1-1 relative -ml-6 w-7 border-0 opacity-0 group-hover:opacity-[0] group-focus:opacity-[0] md:group-hover:md:opacity-[1] md:group-focus:md:opacity-[1] mt-[1em]\",\"children\":[\"$\",\"a\",null,{\"href\":\"#helpful-articles\",\"aria-label\":\"Direct link to heading\",\"className\":\"inline-flex h-full items-start dark:text-light/3 dark:shadow-none dark:ring-0 leading-tight\",\"children\":[\"$\",\"$L2d\",null,{\"icon\":\"hashtag\",\"className\":\"w-3.5 h-[1lh] transition-colors text-transparent group-hover:text-dark/6 dark:group-hover:text-light/5 lg:w-4\"}]}]}],[\"$\",\"div\",null,{\"className\":\"grid-area-1-1 z-[1] mt-[1em]\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Helpful articles\"}]]]}]]}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col md:flex-row mt-6 gap-2 max-w-3xl mx-auto page-api-block:ml-0\",\"children\":[[\"$\",\"$L25\",null,{\"href\":\"/ux-ui-standards/ui-standards\",\"className\":\"group text-sm p-2.5 flex gap-4 flex-1 flex-row-reverse items-center pl-4 border border-dark/3 rounded straight-corners:rounded-none hover:border-primary/6 dark:border-light/2 text-pretty dark:hover:border-primary-300/4 md:p-4 md:text-base\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex flex-col flex-1 text-right\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs\",\"children\":\"Previous\"}],[\"$\",\"span\",null,{\"className\":\"text-dark dark:text-light/6 group-hover:text-primary line-clamp-2\",\"children\":\"UI Principles\"}]]}],[\"$\",\"$L2d\",null,{\"icon\":\"chevron-left\",\"className\":\"hidden size-4 text-dark/5 group-hover:text-primary dark:text-light/4 md:block\"}]]}],[\"$\",\"$L25\",null,{\"href\":\"/ux-ui-standards/ui-standards/colors\",\"className\":\"group text-sm p-2.5 flex gap-4 flex-1 flex-row items-center pr-4 border border-dark/3 rounded straight-corners:rounded-none hover:border-primary/6 dark:border-light/2 text-pretty dark:hover:border-primary-300/4 md:p-4 md:text-base\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex flex-col flex-1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs\",\"children\":\"Next\"}],[\"$\",\"span\",null,{\"className\":\"text-dark dark:text-light/6 group-hover:text-primary line-clamp-2\",\"children\":\"Colors\"}]]}],[\"$\",\"$L2d\",null,{\"icon\":\"chevron-right\",\"className\":\"hidden size-4 text-dark/5 group-hover:text-primary dark:text-light/4 md:block\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-row items-center mt-6 max-w-3xl mx-auto page-api-block:ml-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm text-dark/6 dark:text-light/5\",\"children\":[[[\"$\",\"$36\",\"string-0\",{\"children\":\"Last updated \"}],[\"$\",\"$36\",\"arg-0\",{\"children\":[\"$\",\"$L39\",null,{\"value\":\"2018-01-22T09:43:23.263Z\"}]}]],\"\"]}],null]}]]}],[\"$\",\"$L3a\",null,{\"sitePointer\":{\"siteId\":\"site_JKoxZ\",\"spaceId\":\"-L3Ckj9RuJ2qwWPoNJTG\",\"siteSectionId\":\"$undefined\",\"siteSpaceId\":\"sitesp_ygVeY\",\"siteShareKey\":\"$undefined\",\"organizationId\":\"-L3Ci_0_aIuZ9zYoRiSf\",\"revisionId\":\"$undefined\",\"changeRequestId\":\"$undefined\"},\"spaceId\":\"-L3Ckj9RuJ2qwWPoNJTG\",\"pageId\":\"-L3SF2SzLI73cix3KvkI\",\"apiHost\":\"https://api.gitbook.com\"}]]]}],[\"$\",\"$29\",null,{\"fallback\":null,\"children\":[\"$\",\"$L3b\",null,{\"withSections\":false}]}]]\n16:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"name\":\"color-scheme\",\"content\":\"light\"}],[\"$\",\"meta\",\"2\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"3\",{\"children\":\"Spacing | UX UI Guidelines\"}],[\"$\",\"meta\",\"4\",{\"name\":\"generator\",\"content\":\"GitBook (fc8065b)\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://bamtech.gitbook.io/ux-ui-standards/ui-standards/margins\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Spacing | UX UI Guidelines\"}],[\"$\","])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://bamtech.gitbook.io/ux-ui-standards/~gitbook/ogimage/-L3SF2SzLI73cix3KvkI\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:title\",\"content\":\"Spacing | UX UI Guidelines\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:image\",\"content\":\"https://bamtech.gitbook.io/ux-ui-standards/~gitbook/ogimage/-L3SF2SzLI73cix3KvkI\"}],[\"$\",\"link\",\"12\",{\"rel\":\"icon\",\"href\":\"https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/spaces%2F-L3Ckj9RuJ2qwWPoNJTG%2Favatar.png?generation=1516354338170876\u0026alt=media\",\"type\":\"image/png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/spaces%2F-L3Ckj9RuJ2qwWPoNJTG%2Favatar.png?generation=1516354338170876\u0026alt=media\",\"type\":\"image/png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"meta\",\"14\",{\"name\":\"next-size-adjust\"}]]\ne:null\n3c:I[64355,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"6150\",\"static/chunks/6150-57a79db9099e4be8.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"8510\",\"static/chunks/8510-2f41b25832a6d317.js\",\"8843\",\"static/chunks/8843-dcccd4a8528a4d7f.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"9028\",\"static/chunks/9028-bdf215f649fe02e9.js\",\"4848\",\"static/chunks/app/(site)/(content)/%5B%5B...pathname%5D%5D/page-39aa8160fcfd8035.js\"],\"ScrollSectionsList\"]\n33:[\"$\",\"$L3c\",null,{\"sections\":[{\"id\":\"definitions\",\"title\":\"Definitions\",\"depth\":1},{\"id\":\"i-am-using-spacing-correctly-if\",\"title\":\"I am using spacing correctly if :\",\"depth\":1},{\"id\":\"standard-use-a-spacing-grid\",\"title\":\"Standard : Use a spacing grid\",\"depth\":1},{\"id\":\"how-to-define-a-grid\",\"title\":\"How to define a grid\",\"depth\":2},{\"id\":\"using-a-grid-brings-consistency-and-ease-of-mind\",\"title\":\"Using a grid brings consistency and ease of mind\",\"depth\":2},{\"id\":\"good-practices\",\"title\":\"Good practices\",\"depth\":2},{\"id\":\"sketch-tips\",\"title\":\"Sketch tips\",\"depth\":1},{\"id\":\"helpful-articles\",\"title\":\"Helpful articles\",\"depth\":1}]}]\n"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"37:[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden rounded straight-corners:rounded-none after:block after:absolute after:-inset-[0] after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none w-fit\",\"children\":[\"$L3d\",null]}]\n38:[\"$\",\"picture\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden rounded straight-corners:rounded-none after:block after:absolute after:-inset-[0] after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none w-fit mx-auto\",\"children\":[\"$L3e\",null]}],[\"$\",\"figcaption\",null,{\"className\":\"text-sm text-center mt-2 text-dark/7 dark:text-light/7\",\"children\":[[[\"$\",\"$36\",\"0\",{\"children\":\"Add your grid values on you Styleguide\"}]]]}]]}]\n"])</script><div hidden id="S:1"><div class="relative overflow-hidden rounded straight-corners:rounded-none after:block after:absolute after:-inset-[0] after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none w-fit"><template id="P:4"></template></div></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:1","P:1")</script><div hidden id="S:3"><picture class="relative"><div class="relative overflow-hidden rounded straight-corners:rounded-none after:block after:absolute after:-inset-[0] after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none w-fit mx-auto"><template id="P:5"></template></div><figcaption class="text-sm text-center mt-2 text-dark/7 dark:text-light/7">Add your grid values on you Styleguide</figcaption></picture></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RS("S:3","P:3")</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"40:I[45343,[\"2634\",\"static/chunks/b5d5b83b-3d9186fb60556c53.js\",\"7609\",\"static/chunks/7609-ae1015bd89577747.js\",\"1281\",\"static/chunks/1281-411df876b32e19c2.js\",\"9505\",\"static/chunks/9505-a8f112b566ef7f41.js\",\"4531\",\"static/chunks/4531-b39a0af8c700f9ea.js\",\"4746\",\"static/chunks/4746-fcf448a964a3d7bb.js\",\"1285\",\"static/chunks/1285-2b0f91300e0c0b9a.js\",\"3902\",\"static/chunks/3902-19c217a299034164.js\",\"8280\",\"static/chunks/app/(site)/(content)/layout-3d05fe3e83300d41.js\"],\"ZoomImage\"]\n"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"3f:HL[\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1\",\"image\",{\"fetchPriority\":\"high\",\"imageSrcSet\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=1\u0026quality=100\u0026sign=8db82e20\u0026sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=2\u0026quality=100\u0026sign=8db82e20\u0026sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=3\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=1\u0026quality=100\u0026sign=8db82e20\u0026sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=2\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=3\u0026quality=100\u0026sign=8db82e20\u0026sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1 3072w\",\"imageSizes\":\"(max-width: 640px) 400px, 768px\"}]\n41:Taf3,https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=1\u0026quality=100\u0026sign=8db82e20\u0026sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=2\u0026quality=100\u0026sign=8db82e20\u0026sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=3\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=400\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=1\u0026quality=100\u0026sign=8db82e20\u0026sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=2\u0026quality=100\u0026sign=8db82e20\u0026sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=3\u0026quality=100\u0026sign=8db82e20\u0026sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1 3072w3d:[\"$\",\"$L40\",null,{\"alt\":\"\",\"style\":{\"maxWidth\":\"100%\",\"width\":\"$undefined\",\"height\":\"auto\"},\"loading\":\"$undefined\",\"fetchPriority\":\"high\",\"className\":\"block\",\"src\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=8db82e20\u0026sv=1\",\"srcSet\":\"$41\",\"sizes\":\"(max-width: 640px) 400px, 768px\",\"width\":600,\"height\":300}]\n"])</script><link rel="preload" as="image" fetchPriority="high" imageSrcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=1&quality=100&sign=8db82e20&sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=2&quality=100&sign=8db82e20&sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=3&quality=100&sign=8db82e20&sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=4&quality=100&sign=8db82e20&sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=1&quality=100&sign=8db82e20&sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=2&quality=100&sign=8db82e20&sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=3&quality=100&sign=8db82e20&sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=4&quality=100&sign=8db82e20&sv=1 3072w" imageSizes="(max-width: 640px) 400px, 768px"/><div hidden id="S:4"><img alt="" style="max-width:100%;height:auto" fetchPriority="high" class="block" src="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=4&quality=100&sign=8db82e20&sv=1" srcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=1&quality=100&sign=8db82e20&sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=2&quality=100&sign=8db82e20&sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=3&quality=100&sign=8db82e20&sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=400&dpr=4&quality=100&sign=8db82e20&sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=1&quality=100&sign=8db82e20&sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=2&quality=100&sign=8db82e20&sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=3&quality=100&sign=8db82e20&sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5o0mJV-5uIElE1mhWH%252F-L5o3BV9vnqT4EIT5R7B%252Fimage.png%3Falt%3Dmedia%26token%3D2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6&width=768&dpr=4&quality=100&sign=8db82e20&sv=1 3072w" sizes="(max-width: 640px) 400px, 768px" width="600" height="300"/></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RS("S:4","P:4")</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"42:HL[\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1\",\"image\",{\"fetchPriority\":\"low\",\"imageSrcSet\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=1\u0026quality=100\u0026sign=cba377db\u0026sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=2\u0026quality=100\u0026sign=cba377db\u0026sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=3\u0026quality=100\u0026sign=cba377db\u0026sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=1\u0026quality=100\u0026sign=cba377db\u0026sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=2\u0026quality=100\u0026sign=cba377db\u0026sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=3\u0026quality=100\u0026sign=cba377db\u0026sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1 3072w\",\"imageSizes\":\"(max-width: 640px) 400px, 768px\"}]\n"])</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">self.__next_f.push([1,"43:Taf3,https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=1\u0026quality=100\u0026sign=cba377db\u0026sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=2\u0026quality=100\u0026sign=cba377db\u0026sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=3\u0026quality=100\u0026sign=cba377db\u0026sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=400\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=1\u0026quality=100\u0026sign=cba377db\u0026sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=2\u0026quality=100\u0026sign=cba377db\u0026sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=3\u0026quality=100\u0026sign=cba377db\u0026sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1 3072w3e:[\"$\",\"$L40\",null,{\"alt\":\"\",\"style\":{\"maxWidth\":\"100%\",\"width\":\"$undefined\",\"height\":\"auto\"},\"loading\":\"lazy\",\"fetchPriority\":\"low\",\"className\":\"block\",\"src\":\"https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb\u0026width=768\u0026dpr=4\u0026quality=100\u0026sign=cba377db\u0026sv=1\",\"srcSet\":\"$43\",\"sizes\":\"(max-width: 640px) 400px, 768px\",\"width\":706,\"height\":676}]\n"])</script><link rel="preload" as="image" fetchPriority="low" imageSrcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=1&quality=100&sign=cba377db&sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=2&quality=100&sign=cba377db&sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=3&quality=100&sign=cba377db&sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=4&quality=100&sign=cba377db&sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=1&quality=100&sign=cba377db&sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=2&quality=100&sign=cba377db&sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=3&quality=100&sign=cba377db&sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=4&quality=100&sign=cba377db&sv=1 3072w" imageSizes="(max-width: 640px) 400px, 768px"/><div hidden id="S:5"><img alt="" style="max-width:100%;height:auto" loading="lazy" fetchPriority="low" class="block" src="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=4&quality=100&sign=cba377db&sv=1" srcSet="https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=1&quality=100&sign=cba377db&sv=1 400w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=2&quality=100&sign=cba377db&sv=1 800w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=3&quality=100&sign=cba377db&sv=1 1200w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=400&dpr=4&quality=100&sign=cba377db&sv=1 1600w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=1&quality=100&sign=cba377db&sv=1 768w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=2&quality=100&sign=cba377db&sv=1 1536w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=3&quality=100&sign=cba377db&sv=1 2304w, https://bamtech.gitbook.io/~gitbook/image?url=https%3A%2F%2F2839192808-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-L3Ckj9RuJ2qwWPoNJTG%252F-L5oAGbtLLLUcHc_huTZ%252F-L5oAkhdIOrOXE-OR8Zz%252Fimage.png%3Falt%3Dmedia%26token%3D46c9b58c-56f9-4010-84e4-1f8b7ab234fb&width=768&dpr=4&quality=100&sign=cba377db&sv=1 3072w" sizes="(max-width: 640px) 400px, 768px" width="706" height="676"/></div><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RS("S:5","P:5")</script><script nonce="ZWFhZjNmMjItZGU2Mi00YzQ3LTljZTYtZGE0ZDgzNDJiYjQw">$RC("B:2","S:2")</script></body></html>