Style Guide
This style guide presents the colors, fonts, and interactive elements used in the Inkenious template.
Colors
These are the colors used in the design. You can easily adjust them by using the Global Swatch feature.
Typography
HTML Heading tags
If you edit the styles here, they will change across the website. We have a global system for headings, typography sizing, coloring, and customizations.
H1 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 37px / 1.35 -
H2 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 32px / 1.35 -
H3 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 27px / 1.35 -
H4 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 23px / 1.35 -
H5 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 19px / 1.5 -
H6 - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
DM Sans Normal 16px / 1.5 -
Heading Classes
Use class prefix heading - on H1, H2, H3, or any other piece of text to change it to a specific heading size.
Display 1- Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 50px / 1.25 -
Heading Xlarge - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 37px / 1.35 -
Looks like H1
Heading Large - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 32px / 1.35 -
Looks like H2
Heading Big - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 27px / 1.35 -
Looks like H3
Heading Medium - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 23px / 1.35 -
Looks like H4
Heading Small - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
Fahkwang Normal 19px / 1.5 -
Looks like H5
Heading Tiny - Aa Bb Cc
Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.
DM Sans Normal 16px / 1.5 -
Looks like H6
Paragraphs
Paragraphs and other common text elements. If you edit the styles here, they will change across the website.
Paragraph Normal - DM Sans Normal 16px / 1.75 -
Paragraph Small - DM Sans Normal 14px / 1.75 -
Rich Text
If you edit the block quote style here, it will change across the website.
What’s a Rich Text element?
The rich text element allows you to create and format:
- headings,
- paragraphs,
- blockquotes,
- images
- video
... All in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
Pelentesque habitant morbi tristique senectus:
- Congue vehicula
- Egestas tincidunt acplacerat
Sabitasse platea dictumst dras condimentum pulvinar ante mattis imperdiet. Nunc placerat erat vitae gravida convallis duimauris molestie risus vestibulum portaeros sem egetdui nunc ullamcorpert.
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Color Of The Illustrations
You can easily change the accent color of all the illustrations across the website.
See how to do it
For your convenience, above is the main accent color - if you'd like to set accent color of the illustrations to match it.
1. In the Style tab, scroll down to Filters and click on 'Hue-Rotate'.
2. By adjusting the 'Hue-Rotate' Angle value, you can change the color.
"While there are many templates available for website design, most tend to look very similar. However, the Inkenious template is a notable exception to this trend. Its unique design sets it apart from other templates, allowing our company's website to make a strong impression on visitors."
"This template is a dreamlike world of its own. Its unique design stimulates imagination, allowing me to create a personalized website that matches my vision perfectly. The ink animations are particularly thrilling, adding a magical touch that will captivate my visitors and transport them to an imaginary world."
"I was blown away by the fact that I could change the colors of the illustrations on the fly, without any additional tools or software. This level of flexibility allowed me to experiment with different color schemes and create a truly unique design that perfectly suited my needs. "
"I had the pleasure of using the Inkenious template and I must say, it exceeded my expectations. The template is highly flexible and unique, allowing for a high level of customization that I didn't think was possible. What impressed me most was how easy it was to make changes to the template."
"While there are many templates available for website design, most tend to look very similar. However, the Inkenious template is a notable exception to this trend. Its unique design sets it apart from other templates, allowing our company's website to make a strong impression on visitors."
