Lumify Webflow Template

Style Guide

The Style Guide is set to help you understand the foundations of this template such as design principles, structure, reusable components and styles. Please refer to the Instructions page to learn the best practices about how to update and amange site's appearance.

See Instructions

Typography

Typography encompasses the various styles of text used throughout the design system, including headings, body text, captions, and labels. It specifies fonts, sizes, weights, and line heights, ensuring textual consistency and readability.

Heading classes

Headings are used to establish a clear visual hierarchy and organize content. They draw attention and guide users through the page structure. Typically, they vary in size, weight, and prominence, from the largest (Display) to the smallest (H6).

Heading Style Display

Display

Heading Style H1

Heading 1

Heading Style H2

Heading 2

Heading Style H3

Heading 3

Heading Style H4

Heading 4

Heading Style H5

Heading 5

Heading Style H6

Heading 6

Text classes

Paragraphs provide the main body of text and are designed for readability and clarity. They should have appropriate line spacing and comfortable line length to ensure a pleasant reading experience.

Text styles

Text Style Large

Sample text is being used as a placeholder for real text that is normally present.

Text Style Main

Sample text is being used as a placeholder for real text that is normally present.

Text Style Small

Sample text is being used as a placeholder for real text that is normally present.

Text Style Eyebrow

Eyebrow Sample text

Text alignment

Text Align Left

Sample text is being used as a placeholder for real text that is normally present.

Text Align Center

Sample text is being used as a placeholder for real text that is normally present.

Text Align Right

Sample text is being used as a placeholder for real text that is normally present.

Rich Text styles

The Rich Text Element in Webflow is a versatile content block designed to handle large amounts of text or mixed content like paragraphs, headings, images, quotes, videos, and more. It is an ideal tool for creating blog posts, articles, help documentation, or any other content-heavy sections of a website.

Rich-text

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Image caption example

Block quote

Ordered list

Item 1
1. Item 1.1
2. Item 1.2
Item 2
Item 3

Unordered list

Item A
- Item A.1
- Item A.2
Item B
- Item B.1
- Item B.2
Item C
Item D

Text link

Bold text

Emphasis

^Superscript

_Subscript

Colors

Color palettes

Brand Color Palette

Brand 300

#BBB4FE

Brand 400

#998AFB

Brand 500

#775BF7

Brand 600

#693DEF

Dark Color Palette

Dark 800

#232024

Dark 900

#161418

Dark 950

#0A080C

Light Color Palette

Light

#FFFFFF

Utility Colors

Dark Fade 1

Dark 70%

Dark Fade 2

Dark 10%

Dark Fade 3

Dark 6%

Light Fade 1

Light 70%

Light Fade 2

Light 10%

Light Fade 3

Light 6%

Transparent

Text colors

Text Color Primary

Sample text is being used as a placeholder for real text that is normally present.

Text Color Secondary

Sample text is being used as a placeholder for real text that is normally present.

Background colors

BG Color Primary

BG Color Secondary

BG Gradient Top

BG Gradient Bottom

Components

Buttons

Buttons are interactive elements that prompt users to take action. The design system defines their styles, including size, shape, color, hover states, and disabled states, ensuring buttons are easily identifiable and consistent in appearance and behavior.

button Primary

Button Text

button Primary

Small

Button Text

button Secondary

Button Text

button Secondary

Small

Button Text

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Accordion

Icons

Structure classes

Sections

Padding Top Tiny

Padding Bottom Tiny

Padding Top Small

Padding Bottom Small

Padding Bottom Main

Padding Top Main

Padding Top Large

Padding Bottom Large

Padding Top None

Padding Bottom None

Padding Top Hero

Containers

Section Container Main

Section Container Full Width

Grid

Grid 1 Cols

Grid 2 Cols

Grid 3 Cols

Grid 4 Cols

Grid 12 Cols

Spacing & Sizes

Spaces

The template's spacing is based on Tailwind numeric spacing scale. One spacing unit is equal to 0.25rem which translates to 4px by default in common browsers. To learn more about the Tailwind spacing system, please visit the Tailwind's site here.

0.5

Sizes

0.125

0.25

0.5

0.75

1.25

1.5

1.75

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

Miscellaneous

Display properties

Hide

Tablet Hide

Landscape Hide

Mobile Hide