Visual style

Shapes

• Semi-squircle: for call-outs, inserts, and content highlighting. Use sparingly. 
• Lozenge: for call-outs, inserts, and content highlighting. Use sparingly.
• Soft polygon: for cards, tiles, and other containers.
• Circle: for special accent buttons (e.g. search)
• Leaf: for primary CTA, and large single-instance cards. Not for use on objects in an array.

Corners

• To soften containers, and mirror various graphic forms, the corners of objects are rounded.
• There are four base corner variations:
  • small (form elements)
  • medium and large (cards and containers),
  • X-large (buttons and CTAs),
  • XX-large (leafs and lozenge shapes).
• In an array of shapes (such as an image gallery grid), corners may apply to each individual item in the array, or to the array as a single object.
• Depending on the effect required, not all corners of an object are required to be rounded.

Graphics and textures

• Waipapa graphic: common uses; alignment; no modifications; scaling.
• Graphic 2: TBC
• Textures are primarily created using the graphic patterns, in particular the Waipapa graphic (which is a primary repeating motif, that can be subtle or bold, depending on the context)
• Other graphics: comprehensive set, see One UoA Brand.
• Graphics are used as supporting elements in the website designs. With the exception of the footer, and modals, they are treated as background identity elements, and are used purposefully, but with restraint. More assertive use of the graphic system is brought into the website through hero imagery, and campaign treatments. Take care when overlaying imagery containing graphic elements on components that contain graphic elements as backgrounds. The interplay of motifs can create a less visual positive effect.

Shadows

• TBC

Animation

There are two types of animation available to web products:

• Front-end component behaviours, which are usually left at the library defaults (e.g. sliders, drawers, drop downs)
• Bespoke behaviours that are designed to increase discovery or engagement with a particular function, often a function that is new. This type of animation design is considered on a case by case basis.

Animation should always be carefully considered and implemented in a informed way, that improves the user experience, rather than providing novelty. Animations can quickly become distracting and annoying to users. Implement with intent and care. Use sparingly.