> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/additional/styling.md).

# Styling

<details>

<summary>padding, margin, border radius</summary>

Use some multiple of 4px [\[1\]](https://medium.com/@nishaznani/design-with-4px-grid-system-1676d1091f51)[\[2\]](https://tailwindcss.com/docs/customizing-spacing#:~:text=Use%20the%20spacing%20key%20in%20the%20theme%20section%20of%20your%20tailwind.config.js%20file%20to%20customize%20Tailwind%E2%80%99s%20default%20spacing/sizing%20scale.), which is just sort of a standard that has been around and that usually visually works well

**border radius**

* with MUI components, use integers (e.g. `borderRadius={4}`)
* MUI handles them as multipliers against 4px or 8px

</details>

<details>

<summary>border</summary>

Generally, stay away from using `border`.

Instead, aim for `backgroundColor` differences between the background and the "higher zIndex item" (and `boxShadow` as needed).

![](broken://files/GyJ2hygR7tOsORUZWR9e)

</details>