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.
Nazwa Fontu Bold 37px / 1.29 -
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.
Nazwa Fontu Bold 32px / 1.29 -
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.
Nazwa Fontu Bold 27px / 1.29 -
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.
Nazwa Fontu Bold 23px / 1.29 -
Looks like H4
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.
Nazwa Fontu Bold 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.
Nazwa Fontu Bold 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.
Nazwa Fontu Bold 50px / 1.2 -
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.
Nazwa Fontu Bold 37px / 1.29 -
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.
Nazwa Fontu Bold 32px / 1.29 -
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.
Nazwa Fontu Bold 27px / 1.29 -
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.
Nazwa Fontu Bold 23px / 1.29 -
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.
Nazwa Fontu Bold 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.
Nazwa Fontu Bold 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.
Rich Text -Light Color
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.
Text Color Light
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 Transitions and click on 'Hue-Rotate' under Filters.
2. By adjusting the 'Hue-Rotate' setting, you can change the color.
