Design system guidelines

Colour palette and accessibility

Standardised colors:
- Teal (#00B7B7): Use with dark text (#000000 or #333333) for 4.5:1 contrast ratio.
- Dark Purple (#4B0082): Use with white (#FFFFFF) or light text (#E6E6E6) for 4.5:1 contrast.
- Magenta (#C71585): Adjust to accessible shade or restrict from buttons/backgrounds unless meeting 4.5:1 (normal text) or 3:1 (large text) contrast.
Logo: Retain original house style colours (no text, no accessibility impact).
Consistency: Use defined text/background pairings across all UI elements (buttons, text fields, links).
Documentation: Update style guide with accessible colour combinations and usage rules.

Use US English consistently across all content.
Max sentence length: 20 words for readability.
Naming conventions:
- CamelCase for variables/functions (e.g., primaryButtonColour).
- Singular nouns for components (e.g., Button, not Buttons).
- Active verbs (e.g., submitForm, not formSubmitted).

Typography:
- Headings: 24px, bold (H1), 20px (H2), 18px (H3).
- Body text: 16px.
- Captions: 12px.
Buttons:
- Primary: #007BFF, 8px border-radius, white text (#FFFFFF).
- Hover: Darken to #0056B3.
Navigation: Top bar (desktop) or hamburger menu (top-left, mobile).
Icons: Universal symbols (e.g., magnifying glass for search, trash can for delete).
Feedback: Button color change on click, loading spinner for submissions.
Forms:
- Real-time validation (e.g., email format).
- Error messages in red below input (e.g., “Please enter a valid email address”).
Links: Underlined, dotted line for tooltips.
Responsive Design: 3-column layout (desktop, >768px), single-column (mobile, ≤768px).
White Space: 16px padding between elements, 32px section margins.
Alt Text: Descriptive, concise (e.g., “Search icon for website navigation”).