Style Guide

This guide lays out all of the CSS styles used throughout the kit. It includes specific directions on using text styles, product cards, and wrappers.

Stylish modern lighting options

The right light can transform any environment

Thoughtfully curated modern lighting fixtures

The right light can transform any environment

8 Genius Ways to Use Lighting in Your Home
How To Choose The Right Lighting For Any Room
Let there be light
Stylish modern lighting options
The right light can transform any environment
Thoughtfully curated modern lighting fixtures
The right light can transform any environment
8 Genius Ways to Use Lighting in Your Home
How To Choose The Right Lighting For Any Room
Author's Explanation:

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

Text LinkText LinkText LinkText LinkText LinkText Link
White Smoke
#ebedee
Dark
#18181d
Black
#000000
Rosy Brown
#af9387
Indian Red
#db4b68
Sea Green
#12b878
Author's Explanation:

Product Cards are the main building part of every store. So to give you maximum flexibility Product grid cards are coming with S, M, L, XL combo classes. This is particulary handy when filling your CMS with landscape or portrait pictures. Don't forget that you can always go with different number of columns. Recommended number of columns is 1 to 4 for the optimal experience.

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

As we know now, there are 7 types of text classes for working with you typography. To easily align all your typography in the sections every text class comes with a combo class clearing the margins coming from the main class. As you can see on the example below there is Bottom Clear which removes the Bottom Margin, Full Clear for setting both margins to 0 and Top Clear is great for aligning headlines to the same level as paragraphs.

With the creation of his first product in 1993, Pablo established a powerful and generative design philosophy. Since then, his core principles have informed the development of every light in the studio’s 25-year history. These products continue to move with culture while withstanding trends in design — and each one carries the underlying uniqueness that is distinctly “Pablo.”
Shop our fall collection
  • How to customize formatting for each rich text
  • How to customize formatting for each rich text
  • How to customize formatting for each rich text
  1. How to customize formatting for each rich text
  2. How to customize formatting for each rich text
  3. How to customize formatting for each rich text
Can I cancel my subscription at anytime?

Sure. Your paid subscription can be cancelled anytime by shifting to Lite plan.

Can I cancel my subscription at anytime?

Sure. Your paid subscription can be cancelled anytime by shifting to Lite plan.

Heading 1

What’s a Rich Text element?

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.

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!

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.

Heading 5
Heading 6
  • List Item
  • List Items
  • List Item
  • Link Item

Link

Bold

Italic

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.
Image Caption
Premium
Premium
Premium
Premium
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Big external text link with a lot of text
External text link
Internal text link has arrow
Text link no arrow
Style Guide
Client-first Version 1.0

Global headings

Finsweet Heading

H1

Finsweet Heading

H2

Finsweet Heading

H3

Finsweet Heading

H4
Finsweet Heading
H5
Finsweet Heading
H6

Heading sizes

Heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-size-tiny

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-xbold
Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal
Phasellus a nulla in neque lacinia posuere.
text-weight-light

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Block Quote
text-style-quote
text-style-link
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.
text-style-3lines
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap

Text colors

Phasellus a nulla in neque lacinia posuere.
text-color-lightgrey
Phasellus a nulla in neque lacinia posuere.
text-color-black
Phasellus a nulla in neque lacinia posuere.
text-color-white
Phasellus a nulla in neque lacinia posuere.
text-color-grey

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Rich text

Rich text heading

Rich text heading

Rich text heading

Rich text heading

Rich text heading
Rich text heading
quote

link

  • list item
  • list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

Image caption here

Colors

Primary

#161616 - background

#f4f4f4 - text

#0f62fe - button

#000000 - black

Secondary

#262626 - background

#2e2e2e - background

#6f6f6f - button

#4589ff - border

Button hovers and pressed states

#0353e9 - hover

#002d9c - pressed

#606060 - hover

#393939 - pressed

Background colors

background-color-black
background-color-blue
background-color-grey

Form example

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon classes

icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge

Social icons

Facebook icon
Facebook
Twitter icon
Twitter
Instagram icon
Instagram
LinkedIn icon
Linkedin
YouTube icon
Youtube

Margins

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Paddings

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all

Containers

container-large
container-medium
container-small

Max widths

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile

Various

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.