.section-intro{font-size:14px;line-height:1.7;color:#374151;margin:0 0 16px}
.page-header{margin-bottom:0}
.page-principles{margin:12px 0 24px;padding-left:20px;font-size:13px;line-height:1.8;color:#57606a}
.page-principles li{margin-bottom:4px}
.do-dont-example-title{font-size:14px;font-weight:700;color:#0d1117;margin:0 0 16px}
.do-dont-example-title--spaced{margin-top:32px}
.do-dont-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 16px;align-items:stretch}
@media(max-width:900px){.do-dont-grid{grid-template-columns:1fr}}
.do-dont-card{border-radius:8px;overflow:hidden;border:1px solid;display:flex;flex-direction:column;min-width:0;background:#fff;height:100%}
.do-card{border-color:#90D4B3}
.dont-card{border-color:#F0A898}
.do-dont-card__header{padding:12px 16px;border-bottom:1px solid}
.do-card .do-dont-card__header{background:#F0FAF6;border-color:#90D4B3}
.dont-card .do-dont-card__header{background:#FFF5F4;border-color:#F0A898}
.do-dont-card__badge{display:flex;align-items:center;gap:8px}
.do-dont-card__icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 22px}
.do-card .do-dont-card__icon{background:#1A7F5A;box-shadow:0 0 0 1px rgba(26,127,90,.15)}
.dont-card .do-dont-card__icon{background:#B91C1C;box-shadow:0 0 0 1px rgba(185,28,28,.15)}
.do-dont-card__icon svg{display:block}
.do-dont-card__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.do-card .do-dont-card__label{color:#1A7F5A}
.dont-card .do-dont-card__label{color:#B91C1C}
.do-dont-card__body{padding:16px;background:#fff;display:flex;flex-direction:column;gap:16px;flex:1}
.do-dont-card__explanation{margin:0;font-size:13px;line-height:1.55;color:#374151}
.do-dont-code{margin:0;padding:10px 12px;background:#f6f8fa;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;font-family:Consolas,'Courier New',monospace;color:#0d1117;line-height:1.5;word-break:break-word;white-space:nowrap;overflow-x:auto}
.do-dont-grid--theme-tokens .do-dont-card__body{display:grid;grid-template-rows:auto 1fr auto;flex:1;min-height:0}
.do-dont-grid--theme-tokens .do-dont-theme-row{min-height:72px;align-items:center}
.do-dont-grid--theme-tokens .do-dont-card__explanation{align-self:start}
.do-dont-grid--theme-tokens .do-dont-code{align-self:end}
.do-dont-grid--icon-color-label .do-dont-card__body{display:grid;grid-template-rows:auto 1fr auto;flex:1;min-height:0}
.do-dont-grid--icon-color-label .do-dont-card{overflow:visible}
.do-dont-grid--icon-color-label .do-dont-card__body{overflow:visible}
.do-dont-grid--icon-color-label .do-dont-validation{min-height:108px}
.do-dont-grid--icon-color-label .do-dont-card__explanation{align-self:start}
.do-dont-grid--icon-color-label .do-dont-code{align-self:end}
.do-dont-field{margin:0}
.do-dont-field__label{display:block;font-size:12px;font-weight:600;color:#0d1117;margin:0 0 6px;line-height:1.3}
.do-dont-field__input{display:block;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #d0d7de;border-radius:6px;background:#fff;font-size:13px;line-height:1.4}
.do-dont-field__input--placeholder-do{color:#AFBAC3;font-style:italic}
.do-dont-field__input--placeholder-dont{color:#57606A;font-style:normal}
.do-dont-theme-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
.do-dont-petrel-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;height:22px;padding:3px 4px;width:max-content;max-width:100%;overflow:hidden;background:#0078d4;color:#fff;border:1px solid #005a9e;border-radius:2px;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;font-weight:400;line-height:16px;flex-shrink:0;vertical-align:middle}
.do-dont-petrel-btn__label{display:block;white-space:nowrap}
.do-dont-petrel-btn__caret{display:flex;align-items:center;justify-content:center;width:10px;height:10px;flex-shrink:0;line-height:0}
.do-dont-petrel-btn__caret svg{display:block;width:8px;height:8px}
.do-dont-theme-connector{flex:1 1 24px;min-width:20px;max-width:40px;height:0;border-top:2px dashed #9ca3af}
.do-dont-callout{flex:1 1 160px;min-width:0;border:2px dashed;border-radius:6px;padding:10px 12px}
.do-dont-callout--do{border-color:#90D4B3;background:#F0FAF6}
.do-dont-callout--dont{border-color:#F0A898;background:#FFF5F4}
.do-dont-callout__label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;margin:0 0 4px;line-height:1.3}
.do-dont-callout__value{display:block;font-size:11px;font-family:Consolas,'Courier New',monospace;line-height:1.45;word-break:break-word}
.do-dont-callout--do .do-dont-callout__value{color:#1A7F5A}
.do-dont-callout--dont .do-dont-callout__value{color:#B91C1C}
.do-dont-validation{display:flex;align-items:flex-start;gap:12px;width:100%}
.do-dont-validation__field{flex:1;min-width:0}
.do-dont-validation__input-row{display:flex;align-items:center;gap:6px}
.do-dont-validation__input{flex:1;min-width:0;box-sizing:border-box;padding:4px 8px;border:1px solid #d0d7de;border-radius:2px;background:#fff;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;line-height:16px;color:#0d1117}
.do-dont-validation__input--error{border-color:#B91C1C}
.do-dont-validation__error-icon{width:18px;height:18px;border-radius:50%;background:#B91C1C;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
.do-dont-validation__error-icon svg{display:block;width:10px;height:10px}
.do-dont-validation__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:#B91C1C;font-family:'Segoe UI',system-ui,sans-serif}
.do-dont-validation__legend{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding-left:12px;border-left:1px solid #e5e7eb;min-width:72px}
.do-dont-validation__legend-item{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;line-height:1.3;color:#B91C1C;font-family:'Segoe UI',system-ui,sans-serif}
.do-dont-validation__legend-mark{width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
.do-dont-validation__legend-dot{width:8px;height:8px;border-radius:50%;background:#B91C1C;display:block}
.do-dont-visual-info{position:relative;display:flex;flex-direction:column;gap:12px;cursor:help}
.do-dont-visual-info:focus-visible{outline:2px solid #0078d4;outline-offset:4px;border-radius:4px}
.do-dont-visual-info__popover{position:absolute;z-index:50;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 48px));padding:14px 16px;background:#fff;border:1px solid #d0d7de;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;text-align:left}
.do-dont-visual-info__popover::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-bottom-color:#d0d7de}
.do-dont-visual-info__popover::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:#fff;margin-bottom:-1px}
.do-dont-visual-info:hover .do-dont-visual-info__popover,.do-dont-visual-info:focus-within .do-dont-visual-info__popover{opacity:1;visibility:visible;pointer-events:auto}
.do-dont-visual-info__title{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4;color:#0d1117}
.do-dont-visual-info__intro{margin:0 0 10px;font-size:12px;line-height:1.55;color:#57606a}
.do-dont-visual-info__list{margin:0;padding-left:18px;font-size:12px;line-height:1.55;color:#57606a}
.do-dont-visual-info__list li{margin-bottom:6px}
.do-dont-visual-info__list li:last-child{margin-bottom:0}
.do-dont-visual-info__callout{margin-top:10px;padding:10px 12px;background:#FFFBEB;border:1px solid #FDE68A;border-left:3px solid #D97706;border-radius:4px;font-size:12px;line-height:1.55;color:#374151}
.do-dont-visual-info__callout strong{display:block;margin-bottom:4px;color:#0d1117;font-size:12px}
.do-dont-visual-info__callout p{margin:0}
.contrast-examples .do-dont-visual-info{display:block}
.do-dont-grid .do-dont-card{overflow:visible}
.do-dont-grid .do-dont-card__body{overflow:visible}
@media(max-width:900px){.do-dont-visual-info__popover{left:0;transform:none}.do-dont-visual-info__popover::before,.do-dont-visual-info__popover::after{left:24px;transform:none}}
.why-it-matters{margin:12px 0 32px;padding:0;font-size:13px;line-height:1.55;color:#57606a}
.why-it-matters__title{margin:0 0 4px;font-size:13px;font-weight:600;line-height:1.55;color:#0d1117}
.why-it-matters__text{margin:0;font-size:13px;line-height:1.55;color:#57606a}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 32px}
.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 tr.row-highlight td{background:#EFF6FF}
.spec-table .ratio{font-weight:700;color:#0d1117}
.palette-subheading{font-size:14px;font-weight:700;color:#0d1117;margin:24px 0 12px}
h3.palette-subheading{font-weight:700}
.color-swatch-list{display:flex;flex-direction:column;gap:4px;margin:0 0 16px}
.color-swatch-row{display:grid;grid-template-columns:140px 72px minmax(0,1fr);column-gap:24px;align-items:center;padding:6px 0}
.color-swatch-row__name{font-size:13px;font-weight:600;color:#0d1117;flex-shrink:0}
.color-swatch-row__hex{font-size:12px;color:#57606a;font-family:Consolas,'Courier New',monospace;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;justify-self:start}
.color-swatch-row__hex:hover{color:#0078d4}
.color-swatch-row__hex:focus-visible{outline:2px solid #0078d4;outline-offset:2px;border-radius:2px}
.color-swatch-row__sample{width:100%;max-width:650px;height:32px;border-radius:6px;border:1px solid #e5e7eb;flex-shrink:0}
.color-swatch-row__sample--bordered{border-color:#d0d7de}
.palette-neutral-color-cell{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:24px;align-items:center;min-width:200px}
.palette-neutral-color-cell .color-swatch-row__sample{width:100%;max-width:650px}
.spec-table td .palette-neutral-color-cell .color-swatch-row__hex{justify-self:start}
.contrast-examples{display:flex;flex-direction:column;gap:16px;margin:16px 0 24px}
.contrast-demo{border:1px solid #e5e7eb;border-radius:8px;overflow:visible;margin:0}
.contrast-demo-sample{padding:20px;display:flex;align-items:center;justify-content:center;min-height:80px;font-size:16px;font-weight:500;text-align:center}
.contrast-demo-info{padding:10px 14px;background:#f6f8fa;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#57606a;flex-wrap:wrap}
.contrast-demo-info__pair{flex:1;min-width:140px}
.contrast-ratio{font-family:Consolas,'Courier New',monospace;font-size:13px;font-weight:600;color:#0d1117}
.wcag-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;flex-shrink:0}
.wcag-aa{background:#EFF6FF;color:#0078d4;border:1px solid #BFDBFE}
.wcag-fail{background:#FFF5F5;color:#B91C1C;border:1px solid #FECACA}
.section-divider{border:none;border-top:1px solid #AFBAC3;margin:40px 0 32px}
.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}

# Color & Contrast

WCAG contrast ratios, brand colours, semantic colours, theme-aware color usage, and never-color-only guidance for Petrel.
Use semantic colour tokens, not raw hex values, in component specifications and code.
Every colour used for text or interactive elements must meet WCAG 2.2 AA contrast requirements.
Colour must never be the only means of communicating information.
The Petrel palette supports both light and dark themes — components must be validated in both.
## Contrast Requirements

All Petrel UI must meet 
WCAG 2.1 Level AA
contrast requirements. Use the following thresholds when selecting foreground/background color pairs.
Element type
Minimum contrast ratio
WCAG criterion
Notes
Normal text (
<
18pt / 14pt bold)
4.5:1
1.4.3 Contrast (Minimum)
Applies to body text, labels, tooltips
Large text (≥ 18pt / 14pt bold)
3:1
1.4.3 Contrast (Minimum)
Section headings, dialog titles
UI components 
&
graphical objects
3:1
1.4.11 Non-text Contrast
Button borders, input borders, focus rings, icons
Disabled elements
Exempt
1.4.3 exception
Must still be visually distinguishable from enabled state
Decorative elements
Exempt
1.4.3 exception
No informational value conveyed
## Petrel Color Palette

This palette defines Petrel-owned UI backgrounds and semantic backgrounds. Geoscience data colors follow separate rules.
### Neutral colors

Petrel uses white and gray surfaces to distinguish application backgrounds, content areas, and component sections. Use the documented color for each role.
Windows-managed elements retain Windows styling. This includes the Workflow editor title bar.
Usage
Color
Ribbon and content areas
#FFFFFF
Main application background
#EBECF2
Task Manager surface and some workflow fields
#F0F0F0
Tool Palette control rows
#F7F7F7
Tool Palette section headers
#D4D6D8
### Semantic backgrounds

Use the documented warning, error, and information backgrounds for their intended message types. Success is intentionally omitted from this palette — Petrel communicates positive outcomes through status bar text, toasts, and icons rather than a dedicated success fill, so teams do not introduce a second, unofficial green banner pattern.
Warning
#FFF1C5
Error
#FDC0C0
Info
#D3EBFF
Token
Where Petrel uses it
Warning
Non-blocking warning callouts, alert bars, and inline caution regions in dialogs, wizards, and property panes.
Error
Error callouts, validation summary areas, and destructive-action warnings before data loss.
Info
Informational banners and helper callouts that explain context without indicating failure.
(function () {
  document.querySelectorAll('[data-copy-hex]').forEach(function (button) {
    button.addEventListener('click', function () {
      var hex = button.getAttribute('data-copy-hex');
      if (!hex || !navigator.clipboard) return;
      navigator.clipboard.writeText(hex).then(function () {
        var original = button.textContent;
        button.textContent = 'Copied';
        window.setTimeout(function () {
          button.textContent = original;
        }, 1200);
      });
    });
  });
})();

## Do and Don't

### Example: Contrast

Normal text on main application background
      
High Contrast Mode
Windows High Contrast mode replaces all custom colors with a small system palette. Your UI must remain functional and readable in this mode.
Use SystemColors values where possible — WPF will automatically map these in High Contrast.
Test with both "High Contrast Black" and "High Contrast White" Windows themes.
Icons must still be visible — use outlines or solid fills, not semi-transparent fills that disappear in High Contrast.
Never rely on background color alone to indicate selection — High Contrast overrides it.
Custom brushes may be invisible in High Contrast
Custom WPF brushes that are not derived from SystemColors may render as transparent or with zero contrast in High Contrast mode. Always test your component in both High Contrast themes before shipping.
#262626 on #EBECF2
12.84:1
AA Pass
Placeholder text — insufficient contrast
      
High Contrast Mode
Windows High Contrast mode replaces all custom colors with a small system palette. Your UI must remain functional and readable in this mode.
Use SystemColors values where possible — WPF will automatically map these in High Contrast.
Test with both "High Contrast Black" and "High Contrast White" Windows themes.
Icons must still be visible — use outlines or solid fills, not semi-transparent fills that disappear in High Contrast.
Never rely on background color alone to indicate selection — High Contrast overrides it.
Custom brushes may be invisible in High Contrast
Custom WPF brushes that are not derived from SystemColors may render as transparent or with zero contrast in High Contrast mode. Always test your component in both High Contrast themes before shipping.
#B0B0B0 on #EBECF2
1.84:1
Fail
### Example: Placeholder text

Do
Search
Search by project name
Project name
Enter project name
Contrast Requirements
All Petrel UI must meet WCAG 2.1 Level AA contrast requirements. Use the following thresholds when selecting foreground/background color pairs.
Normal text (
<
18pt / 14pt bold): 4.5:1 minimum — applies to labels, placeholders, and body text.
Large text (≥ 18pt / 14pt bold): 3:1 minimum.
UI components and graphical objects: 3:1 minimum.
Placeholder text such as #AFBAC3 on #F6F8FA (1.82:1) fails WCAG — use a darker hint color and italic styling to distinguish it from entered content.
Use italic and a lighter color to distinguish placeholder text from entered content.
Don't
Search
Search by project name
Project name
Enter project name
Contrast Requirements
All Petrel UI must meet WCAG 2.1 Level AA contrast requirements. Use the following thresholds when selecting foreground/background color pairs.
Normal text (
<
18pt / 14pt bold): 4.5:1 minimum — applies to labels, placeholders, and body text.
Large text (≥ 18pt / 14pt bold): 3:1 minimum.
UI components and graphical objects: 3:1 minimum.
Placeholder text such as #AFBAC3 on #F6F8FA (1.82:1) fails WCAG — use a darker hint color and italic styling to distinguish it from entered content.
Don't use placeholder text that looks too similar to entered content.
Why it matters?
Placeholder text provides helpful hints, but if it looks like actual content, users may confuse it with what they've entered.
### Example: Theme tokens

Do
Apply
Theme token
{DynamicResource PetrelAccentBrush}
Theme-Aware Color Usage
Petrel ships with a Light theme and must support Windows High Contrast mode. All UI colors must be specified using WPF SystemColors or Petrel theme resources, never hardcoded values.
Use 
{DynamicResource PetrelAccentBrush}
and other Petrel theme tokens for interactive elements.
Use SystemColors with DynamicResource so WPF maps colors correctly in High Contrast.
Never hardcode hex values like 
#0078D4
— they break High Contrast and cannot be themed.
Avoid StaticResource for theme-dependent brushes — it will not pick up runtime theme changes.
Use 
{DynamicResource PetrelAccentBrush}
for interactive elements. This ensures correct rendering in the Petrel theme, High Contrast mode, and any future theme variants.
<
Button Background="{DynamicResource PetrelAccentBrush}" /
>
Don't
Apply
Hardcoded value
#0078D4
Theme-Aware Color Usage
Petrel ships with a Light theme and must support Windows High Contrast mode. All UI colors must be specified using WPF SystemColors or Petrel theme resources, never hardcoded values.
Use 
{DynamicResource PetrelAccentBrush}
and other Petrel theme tokens for interactive elements.
Use SystemColors with DynamicResource so WPF maps colors correctly in High Contrast.
Never hardcode hex values like 
#0078D4
— they break High Contrast and cannot be themed.
Avoid StaticResource for theme-dependent brushes — it will not pick up runtime theme changes.
Don't hardcode 
Background="#0078D4"
in XAML or use 
Brushes.Blue
in code. Hardcoded colors break in High Contrast mode and cannot be themed.
<
Button Background="#0078D4" /
>
### Example: icon, color, label

Do
Quantity
123
Invalid value. Enter a number.
Icon
          
Color
          
Label
          
Color Blindness Considerations
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Design for the most common forms: deuteranopia (red-green) and protanopia (red-blind).
Do not use red/green as the only distinguishing cue for status.
Use sufficient brightness contrast between status colors — not just hue difference.
Petrel semantic background fills are paired with distinct icons and labels so status is clear for deuteranopic users — not by hue alone.
Validate designs using 
Accessibility Insights for Windows
, which includes a color blindness simulator.
Pair color with a secondary cue for status. Use icon + color + label for error, warning, and success states so the meaning is clear to colorblind users.
<
TextBox ... /
>
<
TextBlock Text="Invalid value..." /
>
Don't
Quantity
123
Color Blindness Considerations
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Design for the most common forms: deuteranopia (red-green) and protanopia (red-blind).
Do not use red/green as the only distinguishing cue for status.
Use sufficient brightness contrast between status colors — not just hue difference.
Petrel semantic background fills are paired with distinct icons and labels so status is clear for deuteranopic users — not by hue alone.
Validate designs using 
Accessibility Insights for Windows
, which includes a color blindness simulator.
Don't use color as the only way to convey a validation error (e.g., red border only). It is hard to perceive for many users, including colorblind participants.
<
TextBox BorderBrush="Red" BorderThickness="1" /
>
## Testing Tools

Tool
Purpose
Platform
Accessibility Insights for Windows
Color contrast, accessible name, tree inspection
Windows
Windows High Contrast Mode
Live system-level color replacement testing
Windows
WebAIM Contrast Checker
Quick ratio calculation for any hex pair
Web (design-time)
Colour Contrast Analyser (TPGi)
Desktop eyedropper-based contrast testing
Windows / macOS
### Related pages

Colour and contrast
— Contrast requirements
Materials
— Surface and elevation colours
Typography
— Text colour usage