Wicked Templates.

Documentation.

A brief description.

Wicked Templates provides unstyled templates made with only HTML, getting the CSS from the CDN of theire respective CSS Framework. In This case Bulma or Tailwind CSS This will make it easier to add the wished styled.


Style Guide.

All about colors, logo and typography regarding WT.


Colors, typography & logos.

Wicked Templates is overriding the colors from Bulma.io let's have a look to the ones we are overriding, but first, the color palette.


Color Palette

#7183eb.
$primary-light

#6074ed.
$primary

#0e1c81.
$primary-dark

#040925.
$dark

#f3f4f7.
$grey-light

#BAC3F7.
$grey

#8693ac.
$grey-dark

#606d87.
$grey-darker

Accents and Utilities

#2ab3e1.
$link

#EA6206.
$is-warning

#DADFFB.
$success-light;

Typography.

Wicked Templates is overriding the typography and fonts used by Bulma.io you can read more about this font here: Inter Font


Logos.

Wicked Templates logo, colors and usage. This can also be used for media kit.

Always use #6074ED as a fill color for white backgrounds. It it does not workk you can choose between this colors.


#6074ED + #ffffff
White Background


#040925 + #ffffff
White Background


#040925 + #ffffff
Dark backgrounds


#6074ED + #ffffff
dark backgrounds

Rounded - White Background - #6074ED - - svg
Use Case

Always use this logo on Footer for templates.

Transparent Background - White Inner Fill - #6074ED - svg
Use Case

Use this logo on the templates header on top of the navigation bar.

Transparent Background - White Inner Fill - #6074ED - Right Text - svg
Use case

Use on paper and documents.

White Background - White Inner Fill - #6074ED - Right Text - svg
Use case

Use on posts where you can link an image.

Transparent Background - #6074ED - Centered Text
Use case

Use on posts where you can link an image and have it in the middle of the page. Also this logo goes on the footer of Wicked Templates.

Transparent Background - #6074ED - Centered Text
Use case

Use on posts where you can link an image.


Templates.

Documentation.

All the templates have to follow this guide lines.

Including colores used, typography, images, sections, components. This will help to have consistence through all the project and brand.


Principals.

The templates have to look simple and have a clean UI, and a great UX, using the less assets as possible.


Do's & Dont's.

Let's have a look to what we should do and what we shouldn't do when making a Wicked Template


Do's.

Follow the style guide.



Dont's.

Not follow the style guide.

SVG's.

Svg's are the go to when using icons. Only SVG's,

When we are using svg icon this ones have to be from the same resource. If the SVG is similar to the library we are using we can mix it, but only social media icons.

If an icon hasn't been found in any of the libraries, you might look in other library. Before that, should be consulted.

Regarding SVG's we can head to CSS.gg , Remixicon.com , Tablericons.com

Images.

The images have to be from Dummyimage.com and always use this color values.
#DADFFB - #0f1631

Fonts.

The fonts used on the demos is Inter Font, but different weights. Always Variable.
For code we will use Fira code. Always Variable.