Colors

The primary colors and shades of gray on the website are managed through the Webflow's Variable feature.

Primary 1

Primary 2

Black

Gray 1

Gray 2

Gray 3

White

Buttons

A variety of button styles are available throughout the website.

Button primary 1 icon

Button primary 2 icon

Button primary 1

Button primary 2

HTML Headings

Styles for HTML heading tags (H1-H6).

H1

All H1 Headings

Heading - H1

H2

All H2 Headings

Heading - H2

H3

All H3 Headings

Heading - H3

H4

All H4 Headings

Heading - H4

H5

All H5 Headings

Heading - H5

H6

All H6 Headings

Heading - H6

Heading classes

Heading classes are created to match the design style and apply them to different heading tags. This ensures that the style of heading tags that look good in design matches the recommended heading tags for SEO. For example, for page heading you use H1 tag but you want styling(Font size etc.) of H2. By using a "Heading H2" class in H1 tag will give the style of an H2 heading while still keeping the H1 tag for SEO purposes. This way, both visually appealing design and good SEO practices can be achieved.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Paragraphs

Different sizes of paragraphs and text styling are available.

P

All Paragraphs

P

Text Lead

P

Text Small

Inline text elements

Styling for common inline elements.

P

Text Mark

Suspendisse varius enim in highlight eros elementum tristique.

D

Text Delete

Suspendisse varius enim in highlight eros elementum tristique.

U

Text Underline

Suspendisse varius enim in highlight eros elementum tristique.

B

Text Bold

Suspendisse varius enim in highlight eros elementum tristique.

I

Text Italic

Suspendisse varius enim in highlight eros elementum tristique.

Text alignments

Text alignment styles are available to realign text to components.

Text Left

Text Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Center

Text Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Right

Text Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote

Styling for blockquotes.

This is a blockquote. Lorem comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up its enjoyment agreeable depending. Timed voice share led him to widen noisy young. At weddings believed laughing although the material does the exercise of. Up attempt offered ye civilly so sitting to. Of acceptance insipidity remarkably is an invitation.

List Styles

Styling for ordered lists, unordered lists, and unstyled lists.

This is an ordered list
This is a list item within an ordered list
Style each list item as you wish

This is an unordered list
This is a list item within an unordered list
Style each list item as you wish

This is an unstyled list
This is a list item within an unstyled list
This is unstyled list, so no need to style it

Rich Text

The Rich Text Element (RTE) is used to create long-form content. For advanced styling, you can Learn more here

This is rich text heading

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 unordered list
This is a list item within an unordered list
Style each list item as you wish

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.

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.

Form

A general style for Form elements.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Containers

Different types of container widths.

Container

1580px container

Container Medium

1200px container medium

Container Small

980px container small

Inner Container

800px inner container

Inner Container Small

600px inner container small

Inner Container

Left

800px inner container left

Section Spacings

To give sections more room to breathe and maintain all sections' spacing equally. In responsive, the spacing will be decreased.

Section Spacing

Padding Top Bottom 150px

Section Spacing Top

Padding Top 150px

Section Spacing Bottom

Padding Bottom 150px

Margins

Helper margin classes are available to add a margin between elements and keep spacing values consistent and unified throughout the site.

Margin bottom 0px

No Margin

Margin bottom 4px

Margin Bottom 4

Margin bottom 8px

Margin Bottom 8

Margin bottom 12px

Margin Bottom 12

Margin Bottom 16px

Margin Bottom 16

Margin bottom 20px

Margin Bottom 20

Margin bottom 24px

Margin Bottom 24

Margin Bottom 28px

Margin Bottom 28

Margin Bottom 32px

Margin Bottom 32

Margin bottom 36px

Margin Bottom 36

Margin bottom 40px

Margin Bottom 40

Margin Bottom 44px

Margin Bottom 44

Margin Bottom 48px

Margin Bottom 48

Margin Bottom 54px

Margin Bottom 54

Margin Bottom 60px

Margin Bottom 60

Margin Bottom 70px

Margin Bottom 70

Margin bottom 80px

Margin bottom 80

Relume Style Guide V3.0

Relume Resources

Client-First v2.1

Typography

HTML Headings Tags
HTML tags define default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Heading Classes
Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

heading-style-h4

Heading-style-h4

heading-style-h5

Heading-style-h5

heading-style-h6

Heading-style-h6

Other HTML Tags
HTML tags define default text styles.

All Paragraphs

All Links

All Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Text Styles
Text style classes when typography style doesn't match the default HTML tag.

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

text-style-3lines

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-style-muted

text-style-tagline

Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.

text-align-left

text-align-center

text-align-right

Rich Text

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Colors

Color Schemes
Manage your colors easily with global color schemes simply adding the color scheme class to the section you want it applied to.

color-scheme-1

Scheme 1

Text color

UI Elements

Buttons

button

Style guide

Colors

Buttons

HTML Headings

H1

Heading - H1

H2

Heading - H2

H3

Heading - H3

H4

Heading - H4

H5

Heading - H5

H6

Heading - H6

Heading classes

Paragraphs

P

P

P

Inline text elements

P

D

U

B

I

Text alignments

Blockquote

List Styles

Rich Text

This is rich text heading

Static and dynamic content editing

How to customize formatting for each rich text

Form

Input

Textarea

Radio

Checkbox

Select

Containers

Section Spacings

Margins

Margin bottom 0px

Margin bottom 4px

Margin bottom 8px

Margin bottom 12px

Margin Bottom 16px

Margin bottom 20px

Margin bottom 24px

Margin Bottom 28px

Margin Bottom 32px

Margin bottom 36px

Margin bottom 40px

Margin Bottom 44px

Margin Bottom 48px

Margin Bottom 54px

Margin Bottom 60px

Margin Bottom 70px

Margin bottom 80px

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading-style-h1

Heading-style-h2

Heading-style-h3

Heading-style-h4

Heading-style-h5

Heading-style-h6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Scheme 1