This style guide presents the colors, fonts, and interactive elements used in the Centim template.
Colors
These are the colors used in the design. You can easily adjust them in the Variables panel, inside Main Colors.
You may switch between Light and Dark mode on the live website to see how these colors work in both modes.
Background Inner Dark
#1d2229
Background Dark
#181d24
Text Dark
#323232
Text Dark 50
#323232 / A50
Text Dark 15
#323232 / A15
Background White
#ffffff
Background Light
#f2f2f2
Background Light 50
#f2f2f2 / A50
Text Light
#f2f2f2
Text Light 50
#f2f2f2 / A50
Text Light 15
#f2f2f2 / A15
Accent 01
#93e6a4
Accent 02
#cafdd4
None
#ffffff / A0
Typography
HTML Heading tags
We use a global system for headings, typography sizing, colors, and customizations. If you edit the styling of these tags, the changes will apply across the website.
If you wish to edit global Heading tags, make sure to choose correct style selector after you select a heading, it should look like this:

H1 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 41px / 130%
H2 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 34px / 130%
H3 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 28px / 130%
H4 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 23px / 130%
H5 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 19px / 140%
H6 - Aa Bb Cc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 16px / 140%
Heading Classes
Use these classes on H1, H2, H3, or any other text element to change it to a specific heading size. If you edit the styling of these classes, the changes will apply across the website.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Barlow Condensed Medium 52px / 85%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 41px / 130%
Looks like H1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 34px / 130%
Looks like H2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 28px / 130%
Looks like H3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 23px / 130%
Looks like H4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 19px / 140%
Looks like H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 16px / 140%
Looks like H6
Paragraphs
Paragraphs and other common text elements. If you edit the styling of these classes, the changes will apply across the website.
Paragraph Normal - Satoshi Normal 16px / 160%
Paragraph Small - Satoshi Normal 14px / 140%
Rich Text
If you edit the styling of elements within the Rich Text, the changes will apply 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 adding and formatting them individually. Just double-click and easily create content.
Static and dynamic content editing
Pelentesque habitant morbi tristique senectus:
- Item 1
- Item 2
- Item 3
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.