# UX4G Tokens — Layout This page lists every primitive and semantic token for the **Layout** family. - Primitive token source: `src/tokens/layout.tokens.css` ## Primitive tokens ```css :root { /* ========================================= UX4G BREAKPOINT TOKENS ========================================= */ --ux4g-bp-sm: 36rem; /* 576px */ --ux4g-bp-md: 48rem; /* 768px */ --ux4g-bp-lg: 62rem; /* 992px */ --ux4g-bp-xl: 75rem; /* 1200px */ --ux4g-bp-2xl: 87.5rem; /* 1400px */ /* Container Sizes */ --ux4g-container-sm: 540px; --ux4g-container-md: 720px; --ux4g-container-lg: 960px; --ux4g-container-xl: 1140px; --ux4g-container-2xl: 1320px; /* Grid & Layout */ --ux4g-gutter-x: var(--ux4g-space-5, 12px); --ux4g-gutter-y: var(--ux4g-space-5, 12px); /* Grid defaults */ --ux4g-grid-gap: var(--ux4g-space-5, 12px); --ux4g-grid-column-gap: var(--ux4g-grid-gap); --ux4g-grid-row-gap: var(--ux4g-grid-gap); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.