Design

Research and rationale

Our callout design is based on the Australian Government Design system pattern where a thick lefthand border, background colours, and padding are used enhance the visual weight of the callouts. The research conducted by the Digital Transformation agency indicated that this was done to address WCAG2.0 Criterion 1.4.1.

Colour

The callout component has been designed so that it will automatically use the appropriate colours depending on the background colour the container it's placed within. A darker shade of the existing background colour is used to differentiate the callout from its background in a way that isn't too overwhelming. This is done so that callouts still call attention to themselves but are always subordinate to other notification style components such as in-page alerts which convey more important information.