Style Guide

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 by using the Global Swatch feature.

Color Dark

#1E1D1E

Text

Text Color Dark

#323232

Color Dark Transparent

#1E1D1E / A15

Color Light

#F2F2F2

Text

Text Color Light

#F2F2F2

Color Light Transparent

#F2F2F2  / A15

None

#FFFFFF / A0

Transparent Box

#FFFFFF / A90

Color Light Transparent 50%

#FFFFFF / A50

Color Accent 01

#BC82DC

Color Accent 02

#F3A7D8

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

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.

DM Sans 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.

DM Sans 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.

DM Sans Bold 16px / 140%

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

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 50px / 120%

Heading Xlarge - 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%
Looks like H1

Heading Large - 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%
Looks like H2

Heading Big - 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%
Looks like H3

Heading Medium - 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.

DM Sans Bold 23px / 130%
Looks like H4

Heading Small - 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.

DM Sans Bold 19px / 140%
Looks like H5

Heading Tiny - 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.

DM Sans Bold 16px / 140%
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 / 160%

Paragraph Small - DM Sans Normal 14px / 160%

Text Size Tiny - DM Sans Medium 12px / 160%
Text Size Tiny Caps - DM Sans Bold 11px / 140%

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 adding and formatting them individually. Just double-click and easily create content.

Static and dynamic content editing

Pelentesque habitant morbi tristique senectus:

  1. Item 1
  2. Item 2
  3. 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.

Example use of a photo
Figure Caption

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.

Our Clients

Experience the Success Stories of Our Satisfied Clients!

Sarah Bennett
CEO, GreenEarth Solutions
"Linel's team was highly communicative and responsive. Their commitment to delivering outstanding results was evident in every aspect of their work."
Laura Wilson
President, Tech Innovators Inc.
"I wholeheartedly recommend Linel Agency. Their exceptional service and proven success make them an outstanding choice in the advertising industry."
Christopher Brown
CEO, Green Energy Corp.
"Working with Linel Agency has been a game-changer for our business. Their team demonstrated unparalleled creativity and strategic thinking."
Robert Miller
President, SmartApps LLC
"From the very beginning, their team displayed an impressive level of creativity. They developed marketing campaigns that perfectly aligned with our brand."
Sophia Wilson
CMO, Digital Dynamics Inc.
"Linel Advertising Agency has been instrumental in transforming our marketing efforts. From the outset, their team brought fresh ideas and strategic insights."
Anthony Lewis
Head of Sales, Blue Ocean Trading
"The professionalism and dedication of Linel's team were outstanding. They were always available to provide support and offer insightful recommendations."
Sophia Wilson
CEO, Quantum Labs
"I highly recommend Linel Agency. They took the time to understand our brand deeply and developed campaigns that truly resonated with our target audience."
Sarah Johnson
CFO, DataMax Solutions
"Linel's mastery of digital marketing and their ability to create tailored strategies based on our specific goals have had a profound impact on our business growth."
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas
Welcome
New Ideas