Design System

A lean, ground-up design system created for Virgin Australia and Velocity Frequent Flyer. The system aligned more than seven teams across multiple brands, platforms, and technology stacks.

The type system is based on a gradually increasing type scale, keeping fidelity in smaller font sizes and uniformity for larger headings.

A 16px label size ensures no auto-zooming on iOS browsers. Line-height values are rounded to align with a 4px baseline grid. The type scale is reduced on smaller devices, shrinking larger headings. However, smaller font sizes remain consistent across all screen sizes to minimise component-level breakpoint changes.

The colour system builds on the Virgin and Velocity brand colours, plus sets of semantic and neutral colours.

The neutral set aligns various legacy colours into a single hue. The neutral colour stops follow an eased progression from light to dark. Like the type system, this provides fidelity at the ends of the spectrum and uniformity in middle-greys.

A tokenisation and aliasing system was created, initially targeting the Virgin Australia app.

The icon system is based on the guidelines created for the Material Symbols set. A set of custom icons was created for unique airline-specific uses. The alignment with Material Symbols allows their set to also be used, greatly speeding up delivery times and ensuring consistency.

Multiple sets of conflicting icons were replaced with this single new system. Icons across all digital teams are now consistent.

The spacing system also follows a progressive increase between steps. Like type and colour, this ensures consistency while retaining fidelity at finer spacing values. Values are based on a 4px baseline.

A content area layout system was created to align various pages and teams. The new system switched many pages from a padding-based to a max-width-based layout. The 'narrow' and 'text' widths align to 10/12 and 8/12 columns of the 'default' width, respectively.

The design system is used by all digital teams at Virgin Australia and Velocity Frequent Flyer. The system has helped to align many previously disconnected products.