43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# 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.
|