.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-warning{background:#FFFBEB;border-left:4px solid #F59E0B}
.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}
.spec-table code{background:#F3F4F6;padding:1px 5px;border-radius:3px;font-size:12px}
.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}

# Spacing

Consistent spacing creates visual rhythm and makes layouts easier to scan. Petrel uses a base-4 spacing scale expressed in device-independent pixels (DIPs).
Draft page
The spacing token names and values are being finalised. The scale below is representative.
## Core principles

- All spacing values are multiples of 4px (the base unit).
- Spacing is expressed in WPF device-independent units. At 100% scaling, 1 DIP = 1 physical pixel. At 150% scaling, 1 DIP = 1.5 physical pixels.
- Do not use arbitrary spacing values — choose the nearest token from the scale.
- Increase spacing in high-density data interfaces (property panels, well logs) to improve scannability.


## Spacing scale

Prototype values. Confirm with the Petrel design and development team.
Token
Value (DIP)
Use
space.1
4px
Minimum gap between inline elements
space.2
8px
Icon-to-label gap, tight row spacing
space.3
12px
Inner card padding, label-to-field spacing
space.4
16px
Standard component padding, section gap
space.5
20px
Card outer padding
space.6
24px
Section heading margin bottom
space.8
32px
Major section separation
space.12
48px
Page-level padding
## Do and Don't

DO
Use the spacing tokens defined here when writing WPF XAML. Set Margin and Padding using the token values. This makes layout adjustments consistent and supports DPI scaling correctly.
DON'T
Don't use spacing values that are not on the scale (for example, 5px, 7px, 13px). These break the visual rhythm and suggest layouts that were adjusted visually rather than designed systematically.
## Accessibility considerations

Touch targets (for touchscreen use of Petrel) must be at least 44×44 DIPs. Ensure that sufficient spacing between interactive controls prevents accidental activation. See [Scaling and DPI](/solutions/ocean-petrel/petrel-guideline/accessibility/scaling-and-dpi) for how spacing behaves at higher DPI settings.

### Related pages

Responsive design
Typography
— Text spacing values
Scaling and DPI