background-tone-variations

name	background-tone-variations
description	Use when creating visual hierarchy between sections. Background variations (cream, cream-dim, cream-hint) define sections without color.

Background Tone Variations

Section hierarchy via background tone variation (e.g., cream → cream-dim → cream-darker). All within 5-10% lightness range; never cross to different hue.

Tone variation system

From base cream (#fbf6ec):

• base: #fbf6ec (90% of surfaces)
• dim: #f5f0e3 (subtle section break)
• dimmer: #ede7d5 (CTA section, sidebar)
• darker: #e3dcc4 (footer, deep section)

All within the same hue — no shifts to grey or yellow.

Section-break with backgrounds

Use bg variations for:

1. Featured callout box
2. Sidebar / aside
3. Footer
4. Pricing tier card (dim bg)
5. Testimonial section
6. CTA section

Don't overuse — 3-4 bg shifts per page maximum.

Dark mode equivalent

In dark mode:

• base: #0d0807
• dim: #14100e
• dimmer: #1c1815
• darker: #28221d

Same proportional shifts, same hue logic.

Where this fits in the X3 empire

Used in CardPrepAI section design.