.section-intro{font-size:14px;line-height:1.7;color:#374151;margin:0 0 16px}
.page-header{margin-bottom:0}
.info-note{display:flex;align-items:flex-start;gap:16px;margin:16px 0 24px;padding:16px 20px 16px 16px;background:#eff6ff;border:1px solid #3b82f6;border-left:4px solid #3b82f6;border-radius:6px}
.info-note__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;min-width:32px;height:32px;font-size:20px;line-height:1;margin:2px 0 0}
.info-note__content{flex:1;min-width:0}
.info-note__title{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4;color:#0d1117}
.info-note__body{margin:0;font-size:13px;line-height:1.8;color:#57606a}
.info-note__body p{margin:0 0 8px}
.info-note__body p:last-child{margin-bottom:0}
.info-note__body a{color:#004578;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.info-note__body a:hover{color:#003052}
.visual-example{margin:0 0 32px}
.visual-example__title{font-size:14px;font-weight:700;color:#0d1117;margin:0 0 16px}
.visual-example__figure{margin:0 0 12px}
.visual-example__figure img{display:block;width:100%;max-width:100%;height:auto;border-radius:6px;border:1px solid #e5e7eb}
.visual-example__description{margin:0;font-size:13px;line-height:1.55;color:#374151}
.visual-example__description a{color:#004578;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.visual-example__description a:hover{color:#003052}
.contrast-ratios{margin:24px 0 0}
.contrast-ratios__title{font-size:14px;font-weight:700;color:#0d1117;margin:0 0 12px}
.contrast-ratios__intro{margin:0 0 12px;font-size:13px;line-height:1.55;color:#374151}
.contrast-ratios__list{margin:0 0 24px;padding-left:20px;font-size:13px;line-height:1.8;color:#374151}
.contrast-ratios__list li{margin-bottom:4px}
.contrast-test-link{margin:0 0 24px;font-size:13px;line-height:1.55;color:#0d1117}
.contrast-test-link__anchor{color:#004578;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.contrast-test-link__anchor:hover{text-decoration:underline;text-underline-offset:2px}
.contrast-test-link__icon{display:inline-flex;line-height:0;color:#004578}
.contrast-test-link__icon svg{display:block}
.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;font-family:Consolas,'Courier New',monospace;color:#9d174d;white-space:nowrap}
.type-scale-table{overflow:visible}
.type-scale-table th:nth-child(3),.type-scale-table td:nth-child(3){min-width:96px;white-space:nowrap}
.type-scale-table th:nth-child(2),.type-scale-table td:nth-child(2){min-width:120px;white-space:nowrap}
.type-scale-table td{vertical-align:middle;overflow:visible}
.type-scale-table td:first-child{min-width:200px;width:30%}
.type-scale-style{display:inline-block;margin:0;font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#0d1117;vertical-align:middle}
.type-scale-style--page-title{font-size:22px;font-weight:700;line-height:28px;min-height:28px}
.type-scale-style--h1{font-size:16px;font-weight:700;line-height:20px;min-height:20px}
.type-scale-style--h2{font-size:14px;font-weight:700;line-height:18px;min-height:18px}
.type-scale-style--subheading{font-size:12px;font-weight:700;line-height:16px;min-height:16px}
.type-scale-style--body{font-size:12px;font-weight:400;line-height:16px;min-height:16px}
.type-scale-style--label{font-size:12px;font-weight:400;line-height:16px;min-height:16px}
.type-scale-style--label-bold{font-size:12px;font-weight:700;line-height:16px;min-height:16px}
.type-scale-style--caption{font-size:11px;font-weight:400;line-height:14px;min-height:14px}
.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}

# Typography

Segoe UI type scale, WPF font sizes, weights, line heights, and DynamicResource patterns for Petrel.
## Font Family

Segoe UI
is the prescribed font family for all Petrel Classic UI. It is the Windows system font and ensures native appearance and optimal legibility across all Windows themes and DPI settings.
ℹ️
Segoe UI — availability and download
Windows 10 and 11:
Segoe UI ships pre-installed — no download needed. If it is missing or corrupted, it can be restored via 
Settings → Time 
&
language → Language 
&
region → Add a language
or by reinstalling the Windows font pack.
Not on Windows?
Download Segoe UI directly from 
Microsoft
.
ℹ️
For designers working in Figma
Use 
Inter
as a Figma placeholder — maintain the same sizes and weights. Swap to Segoe UI when running on Windows Figma Desktop for final review. The two typefaces share very similar metrics, so layouts transfer cleanly.
## Type scale

All values are in device-independent pixels (DIPs). Every style maps to a named 
DynamicResource
key — use the key, not hardcoded values, so text inherits the correct theme color and scales correctly at high DPI.
Style
Size / line height
Weight
Use
XAML key (WPF)
Page title
22px / 28px
Bold
700
Dialog and pane titles
PetrelPageTitleStyle
Section heading H1
16px / 20px
Bold
700
Major section headings in panes
PetrelH1Style
Heading H2
14px / 18px
Bold
700
Group headings, card titles
PetrelH2Style
Subheading
12px / 16px
Bold
700
Sub-group labels, column headers
PetrelSubheadingStyle
Body
12px / 16px
Regular 400
Descriptions, body content
PetrelBodyStyle
Label
12px / 16px
Regular 400
Form labels, metadata
PetrelLabelStyle
Label Bold
12px / 16px
Bold
700
Emphasis within labels, key-value pair keys
PetrelLabelBoldStyle
Caption
11px / 14px
Regular 400
Helper text, status labels, tooltips
PetrelCaptionStyle
ℹ️
Points vs pixels — cross-team note
Designers sometimes work in 
points (pt)
instead of pixels. For reference: 
1 pt = 4/3 px
— so 9pt ≈ 12px and 12pt ≈ 16px. WPF uses device-independent pixels; always specify sizes in px (DIPs), not pt, in XAML.
## Visual Example

### Text contrast

Text must meet WCAG 2.1 AA contrast against its background — minimum 4.5:1 for body text (12px Regular) and 3:1 for large text. High-contrast pairs remain readable on both light and dark surfaces, in grayscale and color. Low-contrast pairs fail accessibility requirements and make content difficult or impossible to read. See 
Color 
&
Contrast
for approved text color tokens.
### Contrast ratios

Petrel on-prem text must meet WCAG 2.1 AA contrast requirements against its background. Use sufficient contrast to keep labels, instructions, values, and other interface text readable across standard Petrel themes and High Contrast mode.
Normal text:
minimum 4.5:1 contrast ratio
Large text:
minimum 3:1 contrast ratio
In Petrel, 12px Regular and 14px Regular require 4.5:1
16px Bold still requires 4.5:1
Treat text as large only from approximately 19px Bold or 24px Regular
Do not rely on text color alone to communicate meaning or state
Test text against the actual background where it appears in Petrel
Avoid hardcoded text colors. Use Petrel theme resources so contrast remains valid across supported themes
Test 
contrast ratios
ℹ️
Test with real users
Contrast ratios and automated checks are a starting point, not a substitute for validation. Always test typography and readability with real users — including people who use High Contrast mode, screen magnification, or work in varied lighting conditions.
### Related pages

Color & Contrast
— Text colour tokens
Spacing
— Space between text elements
Colour and contrast
— Text contrast requirements