# Petrol Commons

UI / UX Design Document

# Deep petrol design system

This document defines a calm, readable, community-oriented colour system. It uses deep petrol as the primary brand anchor, a warm accent for emphasis, a secondary support role for supporting actions, and a muted tertiary tone for tags and light expressive UI.

Primary: deep petrol
Accent: warm clay
Secondary: petrol-blue
Support: muted violet
Light + dark themes
Accessible focus states

## Colour system

Background
Surface
Primary
Accent

### Principles

- Use the neutral scale for most layout and content space.
- Reserve the primary colour for major brand anchors and key actions.
- Use the accent colour sparingly so it stays meaningful.
- Keep links, buttons, and statuses visually distinct.

### Accessibility

- Maintain strong text contrast in both light and dark modes.
- Keep borders visible on cards and inputs.
- Use visible focus rings for all interactive elements.
- Do not rely on colour alone to communicate state.

## Components

Buttons: Primary buttons use deep petrol, secondary buttons use neutral surfaces, accent buttons are reserved for high-emphasis moments, and support chips are used for tags or tertiary actions.

Forms: Inputs use a slightly tinted surface with visible borders. Placeholder text is deliberately subdued.

Letterhead: The printable layout uses a clean header, a small colour line, and balanced typography for formal communication.