Skip to content

Foundations

Foundations are the non-negotiable design decisions that give Petrel its visual identity and ensure consistency across all screens and workflows. Every component, pattern, and page in Petrel must be built on top of these primitives.

If you are new to the guidelines, start with Colour and contrast and Typography — they have the highest impact on both quality and accessibility compliance.

Foundation pages

Color & Contrast

WCAG contrast ratios, Brand colours, semantic colours, theme-aware color usage, and never-color-only guidance.

Core - Accessibility - Critical

Typography

Segoe UI type scale, WPF font sizes, weights, line heights, and DynamicResource patterns.

Core

Numeric precision

Decimal places, rounding, and display rules for measurement values.

Core

Spacing

Grid, margins, padding, and component spacing tokens.

Core

Responsive design

Layout behaviour across screen sizes and DPI settings.

→ Layout & DPI

Materials

Surface colours, elevation, depth, and layering.

→ Surfaces

Icons

Icon library, naming, sizing, and usage rules.

→ Icon library

Design Principles

The foundations are built on three guiding principles for Petrel:

  • 1. Clarity over decoration. Every design element should serve a functional purpose. Avoid adding visual weight without communicating intent.
  • 2. System-aware defaults. Colors, fonts, and layout values should pull from WPF system resources and Petrel theme tokens — not hardcoded values. This ensures correct rendering in all themes including High Contrast.
  • 3. Accessible by construction. Foundations choices — contrast ratios, touch targets, font sizes — are made with WCAG 2.1 AA compliance as a baseline, not an afterthought.

Recently updated

Overview

Color & Contrast