Johann Chan's profile

Vogue Style Guide

One of my responsibilities for Condé Nast was to compile and design the Vogue Brand Guidelines for digital product.

This included;
• A logo library featuring international market logos, partnerships logos, and guidance on correct usage.
• Brand Colours, primary accents, secondary accents. Hex codes, corresponding CMYK and RGB values.
• Typography; font styles, font sizes, weights, letter spacing, line spacing, with guidance on styling e.g display, body, captions, pull quotes... 
• Layout guidance for responsive layouts, including Grid, padding, margin, column, spacing and breaking point settings. Including additional information on summary collages, and summary rivers. 

An Global alignment of all the international Vogue websites served as an additional catalyst for a single source of truth for all elements of Vogue digital design. 
The style guide was instrumental in re-styling Vogue AMP sites for all the global markets
Vogue US, Vogue France, Vogue Germany, Vogue Italy, Vogue Japan, Vogue Taiwan and Vogue India. 
Detailed annotated mock ups were discussed and shared with engineering teams to ensure accuracy.
Further design exploration passed onto marketing, Interbrand and Vogue China
As well as serving internal teams, Vogue Brand Guidelines also served as guidance for third parties and partnerships without access to internal design system. 
• Vogue Licensee products which required font and grid information.
• Business partners requiring new partnership logos
• Owned and operated markets requiring new branded material  
• Third party designers requiring typographic, spacing and design guidance   
Vogue Style Guide

Vogue Style Guide