# Native design policy

## Required behavior

- Build with Divi's native modules and native settings.
- Select modules by semantics and editing experience, not merely by visual similarity.
- Keep headings, copy, icons, images, links, and answers editable in their expected module controls.
- Use Divi responsive values instead of custom media queries.
- Prefer native Design Variables or presets when the target site supplies confirmed IDs.
- Preserve Divi's default Row width unless the design specifically requires a deliberate full-width or constrained-width composition.
- Inherit the destination site's font families and ordinary heading/body colors by default.
- Keep explicit colors only when they carry component meaning: icon palettes, states, intentional light/dark surfaces, borders, or required contrast.

## Prohibited by default

- Page-level custom CSS.
- Module custom CSS.
- Inline `style` attributes in module content.
- `divi/code` modules.
- `<style>` or `<script>` elements.
- Custom HTML used to imitate a Toggle, Blurb, Icon, Button, Accordion, Tabs, or another native component.
- Unverified preset or global-variable IDs.

## Module selection examples

| Design intent | Native module |
| --- | --- |
| Question with expandable answer | Toggle |
| Icon, title, and description card | Blurb |
| Standalone pictogram | Icon |
| Primary or secondary action | Button |
| Rich paragraph copy | Text |
| Image with native framing | Image |

## Divi Powers visual direction

- Favor clean, light product-UI layouts unless the user requests a more colorful variant.
- Use pale outer canvases, white content surfaces, restrained borders, rounded corners, generous spacing, dark headings, and muted body copy.
- Use color intentionally for icons, icon backgrounds, actions, states, and small accents.
- Maintain adequate contrast and mobile touch targets.