Prototype – fictitious dataBranded in AUTAL’s colours exclusively for the presentation to AUTAL. Confidential – do not distribute. Do not enter any personal information.

Confidentiality notice

This prototype is branded in AUTAL’s colours exclusively for the presentation to AUTAL. Confidential – do not distribute. Fictitious data.

It belongs to Adssys: do not share it or distribute screenshots without permission. Do not enter any real personal information.

AUTALLongueuil paratransit users’ association
Français

Sophie TremblayCoordinator · Administrator

My account (FR)Sign out

Branding

Adapt the name, logo and colours to your organization. Colour combinations with too little contrast are refused so the application stays readable for everyone.

Without JavaScript this form is for illustration: the preview and contrast check show AUTAL’s defaults. In the real application, settings are saved on the server for the whole organization and checked again before saving.

Identity
Shown large in the header. 12 characters maximum.
Logo
Optional. SVG or PNG, 300 KB maximum, ideally square. Without a file, the AUTAL logo is used.
Required if you upload a logo. Describe the logo in a few words, for example “AUTAL logo”. In the header the organization name is already written next to the logo, so the logo is treated as decorative there to avoid reading it twice; this text is used where the logo appears alone (preview, emails, receipts, annual report).
Colours

Hex format, for example #0B4F6C. You can paste a value.

Buttons, links, current menu item.
Logo, banner, avatar.
Text on it is white.
Contrast check (WCAG 2.2 AA)Recalculated on every change. A “Fail” result blocks saving.
CombinationUsed forRatioMinimumResult
White text on primary colourButtons8.94:14.5:1 (text)Pass
Primary colour on page backgroundLinks, table headings8.18:14.5:1 (text)Pass
Primary colour on its light tintMenu: current page, hover7.33:14.5:1 (text)Pass
Dark text on accent colourPrototype banner, avatar11.36:14.5:1 (text)Pass
White text on header and footerName, header and footer links14.07:14.5:1 (text)Pass
Accent on headerLogo, graphics (1.4.11)9.75:13:1 (graphic)Pass
Focus halo on header and footerFocus indicator (1.4.11, 2.4.7)8.57:13:1 (graphic)Pass

Preview

The preview changes as you edit; the rest of the site changes only after you save.

Prototype – fictitious data
AUTALLongueuil paratransit users’ associationFocus

Sample link

Primary button

Menu: current page

Footer · Site map

Logo alternative text in the preview and documents: (no logo uploaded: default AUTAL logo)

Prototype note: with JavaScript, branding is kept in this browser only (localStorage) and applied to every page through CSS variables. The default AUTAL theme uses the same variables.