Style Guide

This style guide presents the colors, typography, and spacing in the SANSA Template Kit

Colors

You can update colors globally via Elementor’s Site Settings > Global Colors

System

Primary

#2D160B

Secondary

#6A5650

Text

#323232

Accent

#323232

Custom

Lighter accent

#B09381

Contrast

#436274

Text on Contrast muted

#94A5AF

BG & Text on Contrast

#E4E8E9

Steel White

#F6F6F6

Flat White

#FFFFFF

Typography

You can update typography globally via Elementor’s Site Settings > Global Fonts

Fluid typography is maintained via the global CSS variables which are a part of the “Parallaxer for Elementor” plugin!

H1 – var(–step-5)
H2 – var(–step-4)
H3 – var(–step-3)
H4 – var(–step-2)
H5 – var(–step-1)
H6 – var(–step-0)

Font size XL – var(–space-xl-3xl)
Font size L – var(–space-l-2xl)
Uniheading – var(–step-3)
Hero – var(–step-2)
Lead – var(–step-1)
OffCanvas Nav – var(–step-3)
Font Size S – var(–step–1)
Font size XS – var(–step–2)

Primary

This is PRIMARY text and is not lorem ipsum

This is SECONDARY text and is not lorem ipsum

This is TEXT text and is not lorem ipsum

This is ACCENT text and is not lorem ipsum

Custom

This is FONT SIZE XL

This is FONT SIZE L

This is UNIHEADING text and is not lorem ipsum

This is HERO text and is not lorem ipsum

This is LEAD text and is not lorem ipsum

This is OFFCANVAS NAV text and is not lorem ipsum

This is SMALL text and is not lorem ipsum

This is SMALL THIN text and is not lorem ipsum

This is EXTRA SMALL UPPERCASED text and is not lorem ipsum

Headings H1 - H6

This is H1 text and is not lorem ipsum

This is H2 text and is not lorem ipsum

This is H3 text and is not lorem ipsum

This is H4 text and is not lorem ipsum

This is H5 text and is not lorem ipsum

This is H6 text and is not lorem ipsum

Text Editor

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Nullam a sapien id arcu tempor finibus. Donec sed nunc erat. Fusce ligula tellus, sollicitudin ut laoreet at, facilisis eu massa. Aliquam vitae lectus tempor ipsum porta tristique.

Cras vitae finibus ante
Et sodales velit
Sed a vehicula ligula

Praesent nec urna et metus posuere ornare. Praesent nunc sapien, convallis eget augue vitae, bibendum pharetra quam.

Cras vitae finibus ante
Et sodales velit
Sed a vehicula ligula

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

Spacing

Fluid spacing is maintained via the global CSS variables which are a part of the “Parallaxer for Elementor” plugin!

This fluid spacing donesn’t require breakpoints, the amount of space is interpolated between the Mobile and Desktop. However, feel free to change the spacing amount at any given breakpoint if that suits your needs.

Fluid spacing global CSS variables can be used for Margin or Padding or both at the same time. It can also be used for a more dramatic typography size!

You can use Single, One-up pair and Two-up pair to define the spacing, where the Two-up pair represents the most dramatic interpolation.

Cards

var(–space-3xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-3xs-2xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-3xs-xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xs-xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xs-s)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xs)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xs-s)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xs-m)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-s)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-s-m)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-s-l)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-m)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-m-l)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-m-xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-l)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-l-xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-l-2xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl-2xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl-3xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl-2xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-xl-3xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xl-3xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-2xl-4xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-3xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-3xl-4xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-3xl-5xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-4xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-4xl-5xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-4xl-6xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-5xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-5xl-6xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.

var(–space-6xl)

Maecenas nunc lectus, porta quis ultricies sit amet, scelerisque in ante. Fusce dapibus ligula pulvinar magna vehicula posuere.