Deep Petrol System Light and dark accessibility preview
Balanced palette

# Deep petrol with warm contrast, readable neutrals, and clearer hierarchy.

Instead of staying inside one narrow blue-green band, this version keeps petrol as the anchor and adds a warm complementary accent for calls to action and emphasis. That creates stronger visual rhythm and makes the interface easier to scan.

### Colour roles

Petrol primary
Brand anchor and main controls.
Warm accent
Counterweight for emphasis and focus.
Layered neutrals
Separate surfaces without tint overload.
Link colour
Distinct from buttons and body text.

## Palette tokens

Background Page base
Surface Cards and panels
Surface 2 Inputs and nested areas
Primary Deep petrol anchor
Accent Warm complementary tone
Link Readable interactive text

## Typography

### Readable contrast

This paragraph uses the muted text token so body copy stays soft but still readable. Links are separated into their own blue-cyan role instead of blending into the primary action colour.

Primary text is reserved for headings, labels, and short high-priority content.

## Form controls

Name
Topic
Notes

## Status colours

Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.

Success Warning Info Danger

## Table preview

Element | Purpose | Colour logic
--- | --- | ---
Primary button | Main action | Petrol background with high-contrast foreground
Accent button | Secondary emphasis | Warm complement to break monotony
Links | Inline interaction | Dedicated link token so they remain visible in copy
Inputs | Editable areas | Nested surface with visible border and focus ring