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.
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.
Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.
| 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 |