.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Materials

Materials define how surfaces layer over each other in the Petrel interface — background, panels, dialogs, tooltips, and overlays each sit at a defined elevation level.
## Elevation levels

Petrel uses a four-level elevation system. Higher elevation levels use slightly lighter backgrounds (in dark theme) to create visual separation without relying on shadows.

Prototype values. Confirm with the Petrel design and development team.
Level
Use
Dark theme bg
Light theme bg
Level 0 — Base
Main workspace, document area
#1A1A1A
#FFFFFF
Level 1 — Surface
Panels, sidebar, toolbars
#222222
#F5F7F9
Level 2 — Elevated
Dialogs, property sheets
#2A2A2A
#FFFFFF
Level 3 — Floating
Tooltips, context menus, dropdowns
#333333
#FFFFFF
## Do and Don't

DO
Use the correct elevation level for each UI layer. Dialogs at Level 2 are visually distinguished from the background content at Level 0, making the modal nature of the dialog immediately apparent.
DON'T
Don't create arbitrary surface colours for new panels or containers. Surfaces that don't match the elevation system create visual noise and undermine the spatial hierarchy of the interface.
### Related pages

Color & Contrast
Dialogs
Cards