Meta (Cross-Meta Design Systems) Illustration Guide

Brand Design
Art Direction
Visual Design

I supported the creation of Meta’s XMDS Illustration Style, collaborating closely with design and product partners to refine the principles, expressive range, and system rules that guide illustration across the Meta family of products. My contributions helped establish a cohesive, scalable framework for how illustration communicates within product, bringing clarity, consistency, and depth to the updated design system.

Art Direction Magdalena Long
Design Kirsten Townsend
Director, Product Creative Arianna Orland

Slide titled 'Meta Illustration Style Guide' with an illustration of a blue infinity symbol wrapped with icons of social media platforms Instagram, Facebook, and TikTok, on a light gradient background.
Table of contents page with a list of topics and page numbers.
A digital guide or presentation on Meta's illustration style and new features including Meta Accounts, VR, and broadcast channels, with multiple smartphone screens showing app interfaces and features.
Slide titled 'Spectrum of Expression' with a large '02' on top left, a small infinity symbol on top right, and colorful gradient background.
Gradient background with blue, pink, and pale yellow hues. Large black text reads '03 Color' at the top left. Small text on the left side says 'Meta Illustration 3.0'. Text on the bottom left states 'XMD8S | XMV8S'. A small blue infinity symbol is in the top right corner. A rectangular box with rounded corners contains instructions about global guidance for color use.
A digital design layout with a gradient color scheme featuring three sections discussing hierarchy and backgrounds in interface design, accompanied by three illustrative images of a purple book, a molecular structure with the Meta logo, and a futuristic landscape with a person, all with headings and descriptive text.
Abstract blue and purple gradient background with text '06 Avoidance' and smaller text 'Meta Illustration 3.0' and 'XMDS | XMVS'.
Three smartphone screens displaying the Meta Privacy Center and followers management interface, with descriptions of privacy settings and connected experiences.
Meta illustration featuring various digital icons and symbols such as shields with check marks, fingerprint scanners, hands with rings and bracelets, social media and messaging app icons like WhatsApp and Instagram, security locks, infinity symbol, and abstract geometric shapes set against colorful backgrounds.
Slide titled "01 Introduction" with a gradient background of pink to blue, and small text on the left side listing "XMD S | XMV S" and "Meta Illustration 3.0."
A presentation slide titled 'When to use illustration' explaining the role of illustration in product experience, accompanied by colorful digital illustrations of a person looking at an infinity symbol, a lock, a book, and various social media icons.
Digital guide titled 'XMVS Spectrum of Expression' includes illustrations categorized from 'dialed down' to 'dialed up' on a visual expressiveness range. The illustrations show icons of lock, shield, person, and various digital and abstract designs, with descriptive text explaining different levels of visual complexity and metaphor use.
A digital guide describing color palettes, gradients, and lighting guidance for Meta branding, with a color bar scale at the top and example color palettes beneath, annotated with color codes and descriptions for Meta Blue, white, black, purple, cyan, rose, yellow, pink, green, and gray.
Colorful gradient background with the text '05 Perspective' in large black font, along with smaller text indicating 'Meta Illustration 3.0' and 'XMDXS | XMVXS' on the left side.
Slide titled 'Some helpful tips on what to avoid in style and execution' featuring various graphic icons with red 'X' marks, including a phone screen with Meta Security Checkup, a cartoon character with pink skin, a Facebook interface, a colorful abstract figure, and illustrations representing art and design principles such as avoiding overly bright palettes and cluttered compositions.
Three iPhone screens showing social media and online interface examples, with a text section titled 'Heroes' that explains hero imagery and its usage in design.
Slide titled '04 Composition' with a pink and blue gradient background, black text, and a blue infinity symbol in the top right corner. Contains a guidance box with text about composition principles.
Digital infographic illustrating layered design elements, use of Z-axis for depth, perspective in UI design, and incorporation of 3D icons for social media and security.
Cover slide of a presentation titled '07 Sizing and assets classes' with colorful abstract background and small text on the left indicating 'Meta Illustrator 3.0' and on the bottom 'XMD5 | XMVS'.
Slide presentation about immersive imagery, showing two smartphone screens with abstract digital graphics, and text describing the features and usage of immersive imagery.