Obsidian uses a 4-pixel grid to structure UI elements. By using multiples of 4 for padding and margin, the grid provides convenient ratios for layouts and allows the interface to scale up and down across high and low DPI screens. To align with the 4-pixel grid, all elements should use the predefined `--size` CSS variables for spacing and dimensions properties. Each size variable contains two numbers which represent the base and the multiple. - `--size-4-1` represents `4px` (4x1) - `--size-4-2` represents `8px` (4x2) - `--size-4-4` represents `16px` (4x4) In addition to the 4-pixel grid, Obsidan also provides a set of variables that uses a 2-pixel grid. Use these sparingly and only when you need more fine-grained spacing. | Variable | Default value | | ------------- | ------------- | | `--size-2-1` | `2px` | | `--size-2-2` | `4px` | | `--size-2-3` | `6px` | | `--size-4-1` | `4px` | | `--size-4-2` | `8px` | | `--size-4-3` | `12px` | | `--size-4-4` | `16px` | | `--size-4-5` | `20px` | | `--size-4-6` | `24px` | | `--size-4-8` | `32px` | | `--size-4-9` | `36px` | | `--size-4-12` | `48px` | | `--size-4-16` | `64px` | | `--size-4-18` | `72px` |