# 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.