Layout & Surfaces

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

---

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, 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