Deep Petrol System Light-mode palette preview
Minimal vs. full system

# Light mode with deep petrol and a complementary accent.

This layout is the same in both files, so you can focus purely on how the two palette strategies feel: a minimal system with one primary and one accent, and a fuller design-system-style palette with secondary and support colours.

### Colour roles in this view

Primary
Main brand and key actions.
Secondary
Supporting emphasis and sub-actions.
Accent
Warm complementary highlight.
Support
Charts, tags, or tertiary emphasis.

## Palette tokens

Background Page base
Surface Cards and panels
Surface 2 Inputs and nested areas
Primary Deep petrol anchor
Secondary Support petrol tone
Accent Warm complementary tone
Support Additional chromatic role

## Typography and links

This paragraph uses the muted text token so body copy stays soft but readable. Links are separated into their own 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
Secondary button | Supporting action | Neutral surface with clear border
Accent button | High emphasis | Warm complement to break monotony
Support button | Tertiary emphasis | Additional chromatic role for chips/tags