Tokens
Space and size tokens
The 45 space and size tokens with their values in the current look.
| Token | Value in this look | Varies by | In code | Description |
|---|---|---|---|---|
--mk-space-0 | 0 | nothing |
| Space step 0: 0 px. |
--mk-space-1 | 0.25rem | nothing |
| Space step 1: 4 px. |
--mk-space-2 | 0.5rem | nothing |
| Space step 2: 8 px. |
--mk-space-3 | 0.75rem | nothing |
| Space step 3: 12 px. |
--mk-space-4 | 1rem | nothing |
| Space step 4: 16 px. |
--mk-space-5 | 1.25rem | nothing |
| Space step 5: 20 px. |
--mk-space-6 | 1.5rem | nothing |
| Space step 6: 24 px. |
--mk-space-7 | 1.75rem | nothing |
| Space step 7: 28 px. |
--mk-space-8 | 2rem | nothing |
| Space step 8: 32 px. |
--mk-space-9 | 2.25rem | nothing |
| Space step 9: 36 px. |
--mk-space-10 | 2.5rem | nothing |
| Space step 10: 40 px. |
--mk-space-11 | 2.75rem | nothing |
| Space step 11: 44 px. |
--mk-space-12 | 3rem | nothing |
| Space step 12: 48 px. |
--mk-space-13 | 3.25rem | nothing |
| Space step 13: 52 px. |
--mk-space-14 | 3.5rem | nothing |
| Space step 14: 56 px. |
--mk-space-15 | 3.75rem | nothing |
| Space step 15: 60 px. |
--mk-space-16 | 4rem | nothing |
| Space step 16: 64 px. |
--mk-space-20 | 5rem | nothing |
| Space step 20: 80 px. |
--mk-space-24 | 6rem | nothing |
| Space step 24: 96 px. |
--mk-space-32 | 8rem | nothing |
| Space step 32: 128 px. |
--mk-space-40 | 10rem | nothing |
| Space step 40: 160 px. |
--mk-section-sm | clamp(1.5rem, 1.3143rem + 0.762vw, 2rem) | nothing |
| Small section padding, 24 to 32 px. |
--mk-section-md | clamp(3rem, 2.6286rem + 1.5238vw, 4rem) | nothing |
| Section padding, 48 to 64 px. |
--mk-section-lg | clamp(4rem, 3.2571rem + 3.0476vw, 6rem) | nothing |
| Large section padding, 64 to 96 px. |
--mk-gap-group | clamp(2rem, 1.6286rem + 1.524vw, 3rem) | nothing |
| The gap between groups, 32 to 48 px. |
--mk-gap-stack | clamp(0.75rem, 0.6571rem + 0.381vw, 1rem) | nothing |
| The gap inside a group, 12 to 16 px. |
--mk-margin | clamp(1rem, -0.1143rem + 4.571vw, 4rem) | nothing |
| The page margin, 16 to 64 px. |
--mk-gutter-grid | clamp(1rem, 0.6286rem + 1.524vw, 2rem) | nothing |
| The grid gutter, 16 to 32 px. |
--mk-bp-tablet | 48rem | nothing |
| The tablet breakpoint, for media queries. |
--mk-bp-laptop | 64rem | nothing |
| The laptop breakpoint, for media queries. |
--mk-bp-desktop | 90rem | nothing |
| The desktop breakpoint, for media queries. |
--mk-bp-wide | 120rem | nothing |
| The wide breakpoint, for media queries. |
--mk-container-sm | 30rem | nothing |
| The sm container width, for container queries. |
--mk-container-md | 48rem | nothing |
| The md container width, for container queries. |
--mk-container-lg | 64rem | nothing |
| The lg container width, for container queries. |
--mk-container-xl | 80rem | nothing |
| The xl container width, for container queries. |
--mk-width-prose | 70ch | nothing |
| The prose measure, a Section width. |
--mk-width-content | 72rem | nothing |
| The content measure, a Section width. |
--mk-width-wide | 90rem | nothing |
| The wide measure, a Section width. |
--mk-sheet-max | 90rem | nothing |
| The widest content sheet. |
--mk-target-min | 24px | nothing |
| The smallest target, everywhere. |
--mk-target-touch | 44px | nothing |
| The target size of primary controls on touch screens. |
--mk-control-h-sm | 40px | nothing |
| The height of sm keys and inputs. |
--mk-control-h-md | 48px | nothing |
| The height of md keys and inputs. |
--mk-control-h-lg | 56px | nothing |
| The height of lg keys and inputs. |