Style Guide

This is the Style Guide of the Vidaura Design System which represents our brand in our marketing, website, products and communication materials.

Reminder to editors: changing styles on this page will automatically update our marketing website.

Assets

The following links are to our Vidaura brand assets in Figma. You will need to sign up for a free Figma account to export the assets you need.

When using a brand asset in your marketing or communication please keep in mind the following.

Tips

Do's

  • Grab the latest asset from Figma
  • Export and use vector formats (SVG) whenever possible
  • Go for transparent backgrounds when it makes sense
  • Check the dimensions and ask for a new asset if you can not find something appropriate

Don'ts

  • Avoid using screen grabs of our logos from our website
  • Converting formats should not be necessary (try using PNG instead of JPG, although some assets will allow jpeg export)
  • Don't resize or crop our logos or brand-marks or reduce the padding

Icons

Brandmarks

Typography

The different fonts, sizes and weights used throughout our websites and content.

Fonts are from Google Fonts and integrated into our editing tools or should be available to configure as plugins. They are also available for download from Google Fonts.

h1
Font DM Sans - WEIGHT Bold 700 - Size 45px - Height 1.4em

Your video aura looks great.

h2
Sulphur Point - Bold 700 - 38px - Height 1.3em

Your video aura looks great.

h3
DM Sans - Bold 700 - 26px - Height 1.4em
Black

Your video aura.

h4
DM Sans - Bold 700 - 22px - Height 1.4em
Black

Your video aura.

h5
Sulphur Point - Bold 700 - 14px - Height 1.5em - spacing 1PX
grey - ALL CAPS
Your video aura.
h6
Sulphur Point - Bold 700 - 13px - Height 1.5em - sPACING 1PX
Light Grey - All Caps
Your video aura.
Large Paragraph
DM Sans - Normal 400 - Size 20px - Height 1.5em
DARK GREY

Vidaura is your video aura. When you record a video of yourself, it is an expression of you. You are who you are. There is no denying it.

Paragraph
DM Sans - Normal 400 - Size 16px - Height 1.5em
DARK GREY

Vidaura is your video aura. When you record a video of yourself, it is an expression of you. You are who you are. There is no denying it.

Small Paragraph
DM Sans - Normal 400 - Size 14px - Height 1.4em
GREY

Vidaura is your video aura. When you record a video of yourself, it is an expression of you. You are who you are. There is no denying it. You may think that you don't have an aura, perhaps because you can't see it, but when when your webcam captures those frames be confident that Vidaura will make it shine.

Quote
Sulphur Point - Normal 400 - Size 18px - Height 1.4em
DARK GREY - border left 5px lemon
You may think that you don't have an aura, perhaps because you can't see it, but when your webcam captures those frames be confident that Vidaura will make it shine.
List
DM Sans - Normal 400 - Size 18px - Height 1.4em
DARK GREY
  • If you are writing your CV you are doing it wrong
  • Video is more fun
  • Auras are under-rated
Link
DM Sans - Normal 400 - Size 18px - Height 20px
BLUE - hover Dark Blue
More about auras
Figure with caption
DM Sans - Normal 400 - Size 18px - Height 20px
BLUE - hover Dark Blue
A man sharing peace and love while wearing a covid mask.
Image with a caption

Rich Text

Vidaura is a your aura.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Here is another title example.

  • Lorem ipsum
  • Lorem ipsum

More about video auras

A man sharing peace and love while wearing a covid mask.
Image with a caption

Colors

The different weights of greys and colours used throughout the website.

#101113
Black
#2c323a
Dark Grey
#535d66
Grey
#a5afb8
Light Grey
#c3cacf
Soft Grey
#e7eaec
Silver
#f4f8fa
Back Grey
#ffffff
White
#03045e
Hard Blue
#023e8a
Dark Blue
#0077b6
Blue
#0096c7
Light Blue
#00b4d8
Soft Blue
#48cae4
Pale Blue
#90e0ef
Back Blue
#f3e016
Dark Lemon
#f7eb64
Lemon
#faf29e
Light Lemon
#fdfad8
Back Lemon
#ff5a5f
Red
#cdc7e5
Lavender

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Regular buttons

Primary
Sign Up
Secondary
Learn more
Outline
Get in touch
Minimal
Learn more
Grey
Cancel
Disabled
Not available
DESTRUCTIVE
Delete

Small buttons

Primary
Sign Up
Secondary
Learn More
Outline
Learn More
Destructive
Delete

Columns

The 12 column grid system to make it easy to align sections across different screen sizes.

This site uses built in grid sections, and custom column sections. You can see these styles applied while in the Webflow designer. To better understand how to use the columns in this template, either look through the div set-up in the column section below, or read this article which outlines how to use the 12 column structure in Webflow.

1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col

Grids

Different grid layouts to use across your site

4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX

Icons - DO NOT USE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

55px

Forms - DO NOT USE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Tabs - DO NOT USE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
  1. @sftrends
  2. @lebigtrip
  3. @levagabond

QR Codes

Enter your URL here to generate a QR code. Right click to "Save Image as..." and save as .png file.

© Vidaura 2021.