Variant: Style Guide

Learn more about us on our homepage and in our open handbook.

Huge illustration with people, computers, car, ants, leafs, rocket etc, illustrating Variant
variant
Illustration by Sandra Blikås. Copyrighted.

Visual expression as an illustration. Use crops of the entire image as illustration based on context and what you want to communicate. E.g. is it an programming event? Use someone sitting at the computer. Is it a social event? Use people shaking hands.

Colors

Color scheme of Variant, ordered by priority.

  1. #03dac6
  2. #ff0166
  3. #ffc4bc
  4. #ede8d7
  5. #6200ee
  6. #33333d

Illustrations

We currently use Undraw for illustrations. Remember to set a color from the color scheme above. You can be playful in choosing illustration and position in view frame.

Demo illustration Demo illustration Demo illustration

Typhography

IBM Plex Serif

IBM Plex Serif

IBM Plex Serif

IBM Plex Serif
IBM Plex Serif

IBM Plex Sans

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem assumenda fuga non nobis, molestias, culpa perferendis reprehenderit nostrum aliquid itaque nisi cumque amet magnam magni accusantium, officiis sequi cum eveniet.

  • Lorem ipsum dolor
  • sit amet consectetur adipisicing
  • Voluptatem
  • fuga non nobis, molestias
  1. Lorem ipsum dolor
  2. sit amet consectetur adipisicing
  3. Voluptatem
  4. fuga non nobis, molestias