# Layout & Surfaces

Layout & Surfaces define the foundational look of the interface—backgrounds, boxes, separators, and box shadows.

<figure><img src="https://3302412606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPzuLy4HwYJtL2cvBab9d%2Fuploads%2FA7T9HfhCpyXkOPAS91x1%2FScreenshot%202026-03-19%20at%2014.50.14.png?alt=media&#x26;token=e37c8011-2141-4a21-8e32-8132daf9d446" alt=""><figcaption></figcaption></figure>

***

#### What you can customize

**Backgrounds**

* Light mode background color
* Dark mode background color
* When you define a custom background color, we do a [WCAG color contrast check](https://accessibleweb.com/color-contrast-checker/), and you're only able to save the color if contrast is higher than 3:1.

**Boxes**

* Box (card) color
* Dark mode box color
* When you define a custom box color, we only allow light colors to be selected, and you're only able to save the color if it passes a test.
* Customize box shadows (via “Edit Box Shadows”), which let you edit aspects such as:
  * Blur
  * Spread
  * X/Y offset
  * Color - using less than 100% opactiy is recommended

**Separators**

* Divider / separator color
* Dark mode separator color

***

#### How it works

* Background = overall canvas
* Box color = cards, containers, panels
* Shadows add depth and hierarchy between elements
* Dark mode settings operate independently

***

#### Tips

* Use **subtle shadows** to create depth without clutter
* Keep strong contrast between background and boxes
* Avoid overly saturated backgrounds—let content stand out