Petrol Design System

Brand direction

The visual direction uses deep petrol as the primary brand anchor. It is supported by a warm accent for emphasis, a cooler secondary role for navigation and support, and a muted violet tertiary role for tags and extended UI variety.

Palette principles

Primary: deep petrol.
Accent: warm clay/orange to counterbalance the cool base.
Secondary: cooler petrol-blue for support actions and links.
Support: muted violet for tertiary emphasis.
Neutrals: a layered surface system for background, cards, inputs, and dividers.

Why this structure works

A single brand colour plus a single accent can work for small interfaces, but larger systems need a secondary and a tertiary role so the UI can express hierarchy without overusing one hue. The neutral scale carries most of the layout so the colour accents remain meaningful.

Accessibility rules

Use strong contrast for body text and controls.
Keep focus rings visible in both themes.
Never rely on colour alone for status or action meaning.
Keep links visually distinct from primary buttons.

Components

Buttons

Primary: petrol fill, light text.
Secondary: neutral fill or outline.
Accent: warm highlight, limited use.
Support: tertiary chips or contextual actions.

Forms

Inputs use a lighter surface than cards.
Borders must stay visible in both light and dark themes.
Placeholder text should be quieter than entered text.

Cards

Cards use surface elevation rather than heavy shadows.
Borders and spacing create the hierarchy.

Letterhead

Header uses logo, brand name, and a subtle petrol accent line.
Footer uses contact details, address, and a privacy-friendly note.

Example usage

Use the system for community event pages, volunteer coordination tools, editorial pages, and internal documents that need a calm but confident identity.

1.9 KiB Raw Blame History