VEXiON cards brand guidelines

VEXiON cards replaces paper loyalty cards with digital passes in Apple Wallet and Google Wallet. Cafes, salons, restaurants and shops use it to bring customers back, with no app to download and no plastic to print.

The logo sets VEXiON in capitals with a lowercase i in VEXiON Blue, followed by cards in the same blue. The X on its own is the symbol, used wherever the full name does not fit.

The identity is light and calm: off-white pages, white cards, Ink text and one strong blue. The horizon gradient adds depth where a page, a slide or a post needs atmosphere.

The logo holds together from large headers down to 18 pixels high. Keep its proportions and the blue i at every size. Below 18 pixels, use the symbol on its own.

Leave empty space around the logo equal to the height of its capital X. Keep text, edges and other logos out of that area.

The X is the VEXiON symbol. Use it for app icons, profile pictures and favicons, where the full logo would be too small to read. Center it in a square, white on Ink or Ink on white.

VEXiON is always capitals with a lowercase i, and cards is always lowercase, even in titles.

VEXiON Blue is the brand color. It marks buttons, links and highlights, and the i in the logo. Use it as an accent on light surfaces rather than as a large background.

Text grey carries supporting text, from subtitles to captions, and Off-white is the page behind everything. Ink and White cover the rest: main text, dark surfaces and the cards that sit on the page.

Ink reads well on every light color, including VEXiON Blue. White on VEXiON Blue and VEXiON Blue on White are approved for buttons, links and highlights, and Text grey on White for supporting text such as subtitles and captions. At 2.2:1 and 2.6:1 all three sit below the WCAG AA minimum of 4.5:1, so keep them away from long paragraphs. AAA means 7:1 or more, AA means 4.5:1 or more.

We turn on Geist's stylistic set 3 (ss03), which swaps the curved lowercase l for a straight one. Turn it on in Figma, Keynote and any other tool that supports OpenType features.

Every size comes from one base and one ratio. The default, 16 pixels on a major third (1.25), is the scale the site uses. Headings stay Semibold with slightly tight letter spacing, and nothing meant for reading goes below 12 pixels.

The VEXiON gradient is a horizon. Ink at the top falls through deep navy and VEXiON Blue into pale cyan at the bottom, along a soft wave and under a fine grain. Every gradient is a variation of that one recipe, so the four here are examples, not a fixed set.

Move the horizon up or down and let it wave more or less, but keep to the palette, keep the dark at the top and the edges soft. The light logo and white text go on the dark part, never on the bright cyan.

Pick a format and shuffle until one fits. Every result follows the recipe above, and the download is a full-size PNG.

Every asset on this page, ready to use. Pick SVG for anything that scales, PNG for documents and slides, and WebP or PNG for the images.