TheSprkl Templates

FLAVOURY Style Guide

FLAVOURY is a vibrant Webflow template designed for healthy meal producers and nutrition bloggers, featuring a fresh design, e-commerce capabilities, and powerful marketing tools.
It was designed and developed by the team of Creative Experts at EGO Creative Innovations.

On this page you will find detailed guidelines how to use prebuilt Styles so your final site looks gorgeous!

Colors

TheSprkl uses Neutral, Primary, Accent and Semantic (Success, Warning, Error and Info) scales. There's no need to use nor customize all colors. You can start by adding components to your layout and changing the swatches for this specific components.

Background colors

To style elements you can use related class to a specific color. All background color classes looks like BGC Primary-900, where BGC=BackgroundColor Primary=ColorGroup and 900=ColorLevel. Below you can see all text color classes available in the system.

Primary

Primary colors appears most frequently across the website and components. They used for important actions, components, blocks, etc. You can create more complex color schemes by adding accent color.

BGC Primary-01
BGC Primary-02
BGC Primary-03
BGC Primary-04
BGC Primary-05

Semantic

Semantic colors used to provide visual feedback on users input such as errors, warnings, information messages, success messages etc. Important note that you can use those colors in any other cases.

Error
BGC Error-900
BGC Error-800
BGC Error-700
BGC Error-600
BGC Error-500
BGC Error-400
BGC Error-300
BGC Error-200
BGC Error-100
BGC Error-50
Warning
BGC Warning-900
BGC Warning-800
BGC Warning-700
BGC Warning-600
BGC Warning-500
BGC Warning-400
BGC Warning-300
BGC Warning-200
BGC Warning-100
BGC Warning-50
Success
BGC Success-900
BGC Success-800
BGC Success-700
BGC Success-600
BGC Success-500
BGC Success-400
BGC Success-300
BGC Success-200
BGC Success-100
BGC Success-50
Info
BGC Info-900
BGC Info-800
BGC Info-700
BGC Info-600
BGC Info-500
BGC Info-400
BGC Info-300
BGC Info-200
BGC Info-100
BGC Info-50

Black & White

Black and white color scales moved to a separate group, but also could be used for interface elements such as texts, dividers, borders and neutral backgrounds.

Black
BGC Black-100
BGC Black-88
BGC Black-80
BGC Black-72
BGC Black-64
BGC Black-56
BGC Black-48
BGC Black-40
BGC Black-32
BGC Black-24
BGC Black-16
BGC Black-8
BGC Black-4
White
BGC White-100
BGC White-88
BGC White-80
BGC White-72
BGC White-64
BGC White-56
BGC White-48
BGC White-40
BGC White-32
BGC White-24
BGC White-16
BGC White-8

Text colors

To style text elements you can use related class to a specific color. All text color classes looks like TC Primary-900, where TC=TextColor Primary=ColorGroup and 900=ColorLevel. Below you can see all text color classes available in the system.

Primary
TC Primary-01
TC Primary-02
TC Primary-03
TC Primary-04
TC Primary-05
Error
TC Error-900
TC Error-800
TC Error-700
TC Error-600
TC Error-500
TC Error-400
TC Error-300
TC Error-200
TC Error-100
TC Error-50
Warning
TC Warning-900
TC Warning-800
TC Warning-700
TC Warning-600
TC Warning-500
TC Warning-400
TC Warning-300
TC Warning-200
TC Warning-100
TC Warning-50
Success
TC Success-900
TC Success-800
TC Success-700
TC Success-600
TC Success-500
TC Success-400
TC Success-300
TC Success-200
TC Success-100
TC Success-50
Info
TC Info-900
TC Info-800
TC Info-700
TC Info-600
TC Info-500
TC Info-400
TC Info-300
TC Info-200
TC Info-100
TC Info-50
Black
TC Black-100
TC Black-88
TC Black-80
TC Black-72
TC Black-64
TC Black-56
TC Black-48
TC Black-40
TC Black-32
TC Black-24
TC Black-16
TC Black-8
White
TC White-100
TC White-88
TC White-80
TC White-72
TC White-64
TC White-56
TC White-48
TC White-40
TC White-32
TC White-24
TC White-16
TC White-8

Typography

The typographic hierarchy aims to create contrast between the most significant and minor elements of the text. Contrast is created by adjusting typography elements, including fonts, their size, style and color, and their alignment.

Text styles

Headlines

Headline XL

Headline L

Headline M

Headline S

Headline XS
Headline XXS
Body text

Body L

Body M

Body S

Additional styles
Label M
Label S
Overline
Caption
Support styles
Capitalize Every word
Lowercase
All Caps
Decoration None
Italic
Strikethrough
Overline
Underline
Bold
Quotes
“You know you're in love when you can't fall asleep because reality is finally better than your dreams.”
RICH TEXT

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
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.

  • Unordered List
  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List
  4. Ordered List
“You know you're in love when you can't fall asleep because reality is finally better than your dreams.”

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

Static and dynamic content editing

Link to some where

Text alignment

You can set alignment for text elements by adding a class name from below.

TAR

Text align right

TAL

Text align left

TAC

Text align center

TAJ

Text align justify

Spacing

Spacing classes provides you set of classes which will help you to build and maintain consistent spacing across components, blocks, sections, etc.

Spacing Scale

Use the spacing scale for components or sections. This scale is applied and used within all components and sections. Spacing available in the system:

  • 2px

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

  • 64px

  • 120px

Spacing Classes

Spacing classes represented with Stack, Inline, Indent, Inset, Section classes and G Stack, G Inline group classes. Use them to provide proper spacing across components, blocks and sections.

Stack

Stack is a global class which adds bottom margin. Bellow you'll find table of existing stack scale.

Spacing Class
Stack Z
Stack XXS
Stack XS
Stack S
Stack M
Stack L
Stack XL
Stack 2XL
Stack 3XL
Value
0 px    0 px    0 px    0px
0 px    0 px    2 px    0px
0 px    0 px    4 px    0px
0 px    0 px    8 px    0px
0 px    0 px    12 px    0px
0 px    0 px    16 px    0px
0 px    0 px    24 px    0px
0 px    0 px    48 px    0px
0 px    0 px    64 px    0px
Inline

Inline is a global class which adds right padding. Bellow you'll find table of existing inline scale.

Spacing Class
Inline Z
Inline XXS
Inline XS
Inline S
Inline M
Inline L
Inline XL
Inline 2XL
Inline 3XL
Value
0 px    0 px    0 px    0 px
0 px    2 px    0 px    0 px
0 px    4 px    0 px    0 px
0 px    8 px    0 px    0 px
0 px    12 px    0 px    0 px
0 px    16 px    0 px    0 px
0 px    24 px    0 px    0 px
0 px    48 px    0 px    0 px
0 px    64 px    0 px    0 px
Indent

Indent is a global class which adds left padding. Bellow you'll find table of existing indent scale.

Spacing Class
Indent Z
Indent XXS
Indent XS
Indent S
Indent M
Indent L
Indent XL
Indent 2XL
Indent 3XL
Value
0 px    0 px    0 px    0 px
0 px    0 px    0 px    2 px
0 px    0 px    0 px    4 px
0 px    0 px    0 px    8 px
0 px    0 px    0 px    12 px
0 px    0 px    0 px    16 px
0 px    0 px    0 px    24 px
0 px    0 px    0 px    48 px
0 px    0 px    0 px    64 px
Inset

Inset is a global class which adds equal padding around the element. Bellow you'll find table of existing inset scale.

Spacing Class
Inset Z
Inset XXS
Inset XS
Inset S
Inset M
Inset L
Inset XL
Inset 2XL
Inset 3XL
Value
0 px    0 px    0 px    0 px
2 px    2 px    2 px    2 px
4 px    4 px    4 px    4 px
8 px    8 px    8 px    8 px
12 px    12 px    12 px    12 px
16 px    16 px    16 px    16 px
24 px    24 px    24 px    24 px
48 px    48 px    48 px    48 px
64 px    64 px    64 px    64 px
Group spacing

Group spacing such as G Stack and G Inline are global classes and used to add spacing inside of elements groups.  

G Stack

Uses flexbox (vertical direction) to provide space between group of elements.

Spacing Class
G Stack Z
G Stack XXS
G Stack XS
G Stack S
G Stack M
G Stack L
G Stack XL
G Stack 2XL
G Stack 3XL
Value
Row 0px
Row 2 px
Row 4 px
Row 8 px
Row 12 px
Row 16 px
Row 24 px
Row 48 px
Row 64 px
G Inline

Uses flexbox (horizontal direction) to provide space between group of elements.

Spacing Class
G Inline Z
G Inline XXS
G Inline XS
G Inline S
G Inline M
G Inline L
G Inline XL
G Inline 2XL
G Inline 3XL
Value
Column 0 px
Column 2 px
Column 4 px
Column 8 px
Column 12 px
Column 16 px
Column 24 px
Column 48 px
Column 64 px
Section

With section classes you can set top and bottom margins for a whole section.

Spacing Class
Section
Z
Section
XXS
Section
XS
Section
S
Section
M
Section
L
Section
XL
Section
2XL
Section
3XL
Value
0 px    0 px    0 px    0px
24 px    0 px    24 px    0px
32 px    0 px    32 px    0px
48 px    0 px    48 px    0px
64 px    0 px    64 px    0px
80 px    0 px    80 px    0px
96 px    0 px    96 px    0px
120 px    0 px    120 px    0px
168 px    0 px    168 px    0px

Corners

Sprkl provides a wide range of options to round corners. You can set corners around container or at particular side.

Corners around

You can set corners around container, with classes below.

Corners S
Corners M
Corners L
Corners XL
Corners 100%

Corners top

You can set corners at the top of container, with classes below.

Corners Top S
Corners Top M
Corners Top L
Corners Top XL

Buttons

Buttons are one of the most important components, as they help people communicate with the system and get expected feedback and result from it.

TheSprkl supports large variety of button styles and can serve plenty of purposes. Every button group supports different button size and button type (icons buttons, fab). All button groups sorted by importance (primary, secondary, outline, ghost, tertiary buttons).

Black

Black Outline

Buttons / Black Outline / Default

Outline

Ghost

Buttons / White Outline / Default

Customize

General button styles applied to the Button class and for all buttons defined min-width, so they will look consistent even, if the text is short. To achieve different button size please add size combo class after Button class, e.g. Button Size L

Links

Links are the useful tool that makes information more structured and wider. You can mark the link in different ways: underlined, boxed, default. This demo lets you preview the link component, its variations, and configuration options.

Link / Icon Left
Link / Icon Right

Customize

In order to style links use Link global class and add one of the combo classes Dark, Pale or Light. Same classes could be applied to Link Blocks and will affect not only text, but icons too. Note that each style have its own states and for now style states won't affect icons.

Link
Link Pale
Link Light

Avatars

Avatars, also known as a profile picture or userpic, is a graphical representation of a user or the user's character or persona. Avatars are used to show a thumbnail representation of an individual or company in the interface. Avatars occur widely in material design and use almost everywhere from tables to dialogue menus.

Components

You may choose a preferable option:

Six sizes
: XXS, XS, S, M, L, XL;
Three types: icon, picture, letter;
Two variants: circular and rounded square.

Avatars / Circular / Initials
ES
ES
ES
ES
ES
ES
Avatarts / rounded / initials
ES
ES
ES
ES
ES
ES
Avatars / Circular / Placeholder
Avatarts / Rounded / Placeholder

Customize

You can quickly customize each size of an avatar through the parameter “size.”

ES
ES
ES
ES
ES
ES

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts are notifications that lead to important information related to the state of applications or devices, and often triggers a communication request. It may contain a title, an optional message, and one or more parts. Alert offers 4 levels of severity with a unique color and icon.

Info

Inform your user that his action had a result or show other informative text.

Alerts / INFO / Default
Info alert
Alerts / INFO / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / INFO / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Success

Let to the user know that his action acheived the goal.

Alerts / Success / Default
Info alert
Alerts / Success / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Success / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Error

Show the failure after the action.

Alerts / Error / Default
Info alert
Alerts / Error / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Error / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Warning

Any important content.

Alerts / Warning / Default
Info alert
Alerts / Warning / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Warning / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Customize

Pellentesque porta, ex eu laoreet lacinia, sem magna porttitor tellus, id tristique nibh sem at nisi.

Forms

A form is a set of related elements such as inputs, text fields, etc. arranged in a given order.

Inputs

Forms / Inputs / Default / Size
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Text area

Forms / Inputs / Text Area / Default /
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select field

Select fields exclusively prepared only for Webflow forms. In Figma instead of Select fields use dropdowns.

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

Toggles

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

Dropdowns

Dropdowns are small overlays that opens on demand. They let users access additional content and actions without cluttering the page. It is usually used for navigation or forms.

Dropdowns / Black Outline
Dropdowns / White Outline

Customize

General dropdown styles applied to the Dropdown Link. To achieve different dropdown size please add size combo class after Dropdown Link class, e.g. Dropdown Link Size L.

Sign up for our news letter and get 20% off your first order
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.