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.
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.
The Agency helped us design a compelling ecosystem for our platform startup. They helped us develop a memorable name, a detailed yet flexible brand strategy but, above all, a comprehensive evolving plan on how to build, grow and expand our music platform.
.jpg)
The Agency helped us tease out the subtleties of what makes our company differentiated from other brands. Their team displayed a strong sense of New York City professionalism - clear, to the point, and compelling.
.jpg)
The Agency helped us identify our early adopter consumer profiles in the most nuanced process. As a result, our test app grew to 12k active users in the first 4 months with the most enthusiastic audience who continue to help us spread the word.
The Agency's team did an incredible job working on my brand constructing my website delivering more value in return for my investment. Their team is hard-working and dedicated. Rumi is a brilliant strategist and incredibly smart with all things in the cyberspace realm. I trust him implicitly to do right by myself and therefore all other clients. And, his taste is impeccable.
The Agency helped us design a compelling ecosystem for our platform startup. They helped us develop a memorable name, a detailed yet flexible brand strategy but, above all, a comprehensive evolving plan on how to build, grow and expand our music platform.
