Style guide

This style guide includes a list of elements & classes used for building Harmonya site. Additionally you may find some reusable components here, in case you'd like to create additional pages/sections.

1.0 Typography

1.1 HTML Heading tags

All H1 Headings

Supercharge your product data

All H2 Headings

Unlock growth for product categories

All H3 Headings

Unlock growth for product categories

All H4 Headings

Unlock growth for product categories

All H5 Headings

Unlock growth for product categories

All H6 Headings

Welcome to Harmonya | This is about us section

1.2 Heading classes

Heading xlarge

Supercharge your product data

Heading large

Unlock growth for product categories

Heading medium

Unlock growth for product categories

Heading regular

Unlock growth for product categories

Heading small

Unlock growth for product categories

Heading xsmall

Unlock growth for product categories

Heading meta

Unlock growth for product categories

1.3 Body copy

Regular Paragraphs

Harmonya’s platform reveals latent consumer demand signals within the data you already use today by combining our consumer-generated product attributes with our partners’ trusted market measurement information to create an unrivaled source of understanding for what is happening and why.

Small Paragraphs

Harmonya’s platform reveals latent consumer demand signals within the data you already use today by combining our consumer-generated product attributes with our partners’ trusted market measurement information to create an unrivaled source of understanding for what is happening and why.

Big Paragraphs

Harmonya’s platform reveals latent consumer demand signals within the data you already use today by combining our consumer-generated product attributes with our partners’ trusted market measurement information to create an unrivaled source of understanding for what is happening and why.

1.4 Display copy

Display Text Small

Harmonya equips brands and retailers with insights to outpace the competition, unlock growth for product categories and streamline operations.

Display Text Big

Harmonya equips brands and retailers with insights to outpace the competition, unlock growth for product categories and streamline operations.

1.5 Rich text [for CMS/Articles]

Rich text element | Headings & Paragraphs accordingly

What’s a Rich Text element?

This is a subheading and where it goes in the document flow

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an h2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

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.

2.0 Colors

2.1 Backgrounds

Black background with white text.

White background with black text.

Lightgrey background with black text.

Animated gradient background with black text.

2.2 Accents

Animated gradient line as white/black sections divider.

4.0 Layouts

4.1 Grids

Regular layout

Call to Action layout

No-scroll class

5.0 Spacings

5.1 Margins

All margin size classes

All margin direction classes

5.2 Paddings

All padding size classes

All padding direction classes

5.3 Max widths

All width regulation classes

6.0 Responsiveness

6.1 Useful responsiveness classes

Classes responsible for different display options

7.0 Icons

7.1 Icon sizes

Icon large

Icon medium

Icon small

Icon 1x1 large

Icon 1x1 medium

Icon 1x1 small