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
Display Text Big
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.
3.0 Links
3.1 Buttons
Primary button (for white backgrounds)
Button-primarySecondary button (for dark backgrounds)
Button-secondaryModal open class
Modal close class
3.2 Text links
Text link
This is a regular text link3.3 Action links
Action link
Reversed action link
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