Visual language
Iconography
Our iconography can be used to tell stories and provide functionality in both digital and physical spaces.
Iconography in context
Our expressive icons use varying stroke weights, with the thinnest parts at half the stroke width and the thickest at double. To customize live paths for this effect, the Width Tool in Adobe Illustrator is ideal.
Our icons should only be used in small sizes. They’re meant to be supporting elements, not the main visual.
Iconography library
Our icons are available in six colors. To download these icons, please contact the Brand team.
Illustration
Our illustrations are a supporting element of our brand system. They should feel intentional and add variety and richness to layouts. They can be used alongside our brand mascot, in type-only layouts, or with our graphic language textures.
Illustration style
Our unique illustration style consists of multiple elements. Here are some examples.
1. Thick stroke: used for illustration outlines.
2. Thin stroke: used for additional details. Thin strokes are half the thickness of thick strokes.
3. Grain texture: Used to give more dimension to the illustration. When creating new illustrations in Adobe Illustrator, we embed the grain image and set the opacity to 30%.
Environment illustration
Natural environmental illustration pieces, such as grass and rocks, are part of ilma's habitat. Using them alongside her in layouts creates a wide variety of scenes and scenarios—they can feel prominent and help convey a message, or be used subtly as structural detailing in layouts.
Spot illustration
A spot illustration is an abstract concept that pairs objects with our environmental elements to explain an idea. It can serve as the main graphic in creative materials.
To download sample illustrations, please contact the Brand team.
Fur crop
Our unique graphic language is expressed through the "fur crop." The combination of this crop with our colors and typography allows for a broad range of brand expression.
Fur crop usage
The fur crop is a unique shape that creates a bold and recognizable visual style. It can be used to subdivide layouts or contain imagery. The fur crop is available in multiple colorways, but one of its colors must always be white, Vanta white, or dark purple.
Using a fur crop as a graphic element is a great way to strengthen Vanta’s brand recognition. It should be used minimally or more subtly for upmarket audiences to avoid being too bold and playful.
Animating our fur crop can bring it to life in digital applications—here's an example.
.gif)
To download the fur crop, please contact the Brand team.
Rules to follow
And here are some examples to avoid when using fur crop as design element.
Avoid mixing secondary colors together in our textures.
Avoid awkward crops with an imbalance of space.
Avoid using effects or finishes on our textures.
Textures
Textures offer us a variety of building blocks to make our designs unique while staying on brand. We use them sparingly to elevate and add depth, like subtle touches on product screenshots or specific campaign elements for mid-market audiences.
Types of texture
We use three types of textures: magic lines, bokeh, and pixels. These textures can include additional tints and shades from our color palette, as well as shapes inspired by data visualization, such as graph lines, boxes, and circles.
Here are interchangeable textures templates for quick reference. To download the textures, please contact the Brand team.
Rules to follow
Here are some things to keep in mind when using the textures:
Use 1 and 2 shades lighter or darker than the background color. Make sure the texture is subtle yet visible.
Texture can interact with other graphic elements in moderation.
Texture must be in the tints and shades of background color.
When used as background accent, use only one texture per asset.
Texture should be a subtle additional element. Avoid blowing it up too big.
Don’t put any texture behind text and logo.
