Style Guide
Client-First is a set of guidelines and strategies created by Finsweet to help you build Webflow websites.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
Text Alignments
Colors
Manage recurring text and background colors.
Text Colors
Background Colors
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Spacers
Unified spacer system for the project.
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Colour
Colour distinguishes our brand and helps us create consistent experiences across the website.
It also represents the global classes to apply colour to any element.
Example:
set "BC-Purple-500-BG" class to any element to apply Brand Colour Purple variant 500 as Background Colour
set "BC-Purple-500-Font" class to any element to apply Brand Colour Purple variant 500 as Font Colour
Brand Colour
The brand colours are the primary palette used to demonstrate the brand's visual identity.
NAME
BC-Purple-500
HEX
#4F4DDB
NAME
BC-Teal-500
HEX
#15ADCE
NAME
BC-Red-500
HEX
#FF513A
NAME
BC-Yellow-500
HEX
#FE9A0B
Extended Palette
The extended palette consists of all the usable tint and shades of each colour in the brand.
They are all numbered for easy reference.
Purple
The Purple palette is used as supporting secondary colors in backgrounds, text colors, separators, models, etc and
used across all the interactive elements such as CTA’s, links, inputs, active states, etc
NAME
BC-Purple-50
HEX
#EAEAFB
NAME
BC-Purple-100
HEX
#CACBF5
NAME
BC-Purple-200
HEX
#A7A9EF
NAME
BC-Purple-300
HEX
#8387E8
NAME
BC-Purple-400
HEX
#686AE2
NAME
BC-Purple-500
HEX
#4F4DDB
NAME
BC-Purple-600
HEX
#4A44D0
NAME
BC-Purple-700
HEX
#4139C3
NAME
BC-Purple-800
HEX
#3A2DB8
NAME
BC-Purple-900
HEX
#2C12A5
Teal
The Teal palette is used as supporting secondary colors in backgrounds, text colors, separators, models, etc and
used across all the interactive elements such as CTA’s, links, inputs, active states, etc
NAME
BC-Teal-50
HEX
#E1F7FD
NAME
BC-Teal-100
HEX
#B4EBF9
NAME
BC-Teal-200
HEX
#83DEF5
NAME
BC-Teal-300
HEX
#4FCDEC
NAME
BC-Teal-400
HEX
#1BBCE2
NAME
BC-Teal-500
HEX
#15ADCE
NAME
BC-Teal-600
HEX
#0997B3
NAME
BC-Teal-700
HEX
#00849A
NAME
BC-Purple-800
HEX
#007384
NAME
BC-Purple-900
HEX
#00616E
Red
The Red palette is used as supporting secondary colors in backgrounds, text colors, separators, models, etc and
used across all the interactive elements such as CTA’s, links, inputs, active states, etc
NAME
BC-Red-50
HEX
#FFECEF
NAME
BC-Red-100
HEX
#FFD0D4
NAME
BC-Red-200
HEX
#F5A09D
NAME
BC-Red-300
HEX
#EE7B77
NAME
BC-Red-400
HEX
#f95e54
NAME
BC-Red-500
HEX
#FF513A
NAME
BC-Red-600
HEX
#f04739
NAME
BC-Red-700
HEX
#dd3d33
NAME
BC-Red-800
HEX
#D0362C
NAME
BC-Red-900
HEX
#C12C1F
Yellow
The Yellow palette is used as supporting secondary colors in backgrounds, text colors, separators, models, etc and
used across all the interactive elements such as CTA’s, links, inputs, active states, etc
NAME
BC-Yellow-50
HEX
#FFF7E1
NAME
BC-Yellow-100
HEX
#FFEAB2
NAME
BC-Yellow-200
HEX
#FFDC81
NAME
BC-Yellow-300
HEX
#FFD04E
NAME
BC-Yellow-400
HEX
#FFBA0D
NAME
BC-Yellow-500
HEX
#FE9A0B
NAME
BC-Yellow-600
HEX
#FD9603
NAME
BC-Yellow-700
HEX
#FE890D
NAME
BC-Yellow-800
HEX
#FA8407
NAME
BC-Yellow-900
HEX
#FD680F
Neutral
These colors are used as supporting secondary colors in backgrounds, text colors, separators, models, etc
NAME
BC-Neutral-50
HEX
#F9FAFB
NAME
BC-Neutral-100
HEX
#F3F4F6
NAME
BC-Neutral-200
HEX
#E5E7EB
NAME
BC-Neutral-300
HEX
#D1D5DB
NAME
BC-Neutral-400
HEX
#9CA3AF
NAME
BC-Neutral-500
HEX
#6B7280
NAME
BC-Neutral-600
HEX
#4B5563
NAME
BC-Neutral-700
HEX
#374151
NAME
BC-Neutral-800
HEX
#1F2937
NAME
BC-Neutral-900
HEX
#111827
Success
These colors convey an emotion of positivity. Generally used across success, complete states.
NAME
BC-Success-50
HEX
#F0FDF4
NAME
BC-Success-100
HEX
#DCFCE7
NAME
BC-Success-200
HEX
#BBF7D0
NAME
BC-Success-300
HEX
#86EFAC
NAME
BC-Success-400
HEX
#4ADE80
NAME
BC-Success-500
HEX
#22C55E
NAME
BC-Success-600
HEX
#16A34A
NAME
BC-Success-700
HEX
#15803D
NAME
BC-Success-800
HEX
#166534
NAME
BC-Success-900
HEX
#14532D
Warning
These colours convey the feeling of caution. Generally used across warning states.
NAME
BC-Warning-50
HEX
#FFFBEB
NAME
BC-Warning-100
HEX
#FEF3C7
NAME
BC-Warning-200
HEX
#FDE68A
NAME
BC-Warning-300
HEX
#FCD34D
NAME
BC-Warning-400
HEX
#FBBF24
NAME
BC-Warning-500
HEX
#F59E0B
NAME
BC-Warning-600
HEX
#D97706
NAME
BC-Warning-700
HEX
#B45309
NAME
BC-Warning-800
HEX
#92400E
NAME
BC-Warning-900
HEX
#78350F
Error
These colors convey an emotion of negativity. Generally used across error states.
NAME
BC-Error-50
HEX
#FEF2F2
NAME
BC-Error-100
HEX
#FEE2E2
NAME
BC-Error-200
HEX
#FECACA
NAME
BC-Error-300
HEX
#FCA5A5
NAME
BC-Error-400
HEX
#F87171
NAME
BC-Error-500
HEX
#EF4444
NAME
BC-Error-600
HEX
#DC2626
NAME
BC-Error-700
HEX
#B91C1C
NAME
BC-Error-800
HEX
#991B1B
NAME
BC-Error-900
HEX
#7F1D1D
Generic
These colors for general used.
NAME
BC-White
HEX
#FFFFFF
NAME
BC-Error-100
HEX
#FEE2E2
Typography
Typography is our system of fonts.
Keeping typography consistent and sticking to logical hierarchies ensures that elements are clear and easily recognizable when scanning the page. We use the font, Poppins, for everything on the website.
Headings
These are the heading styles. You apply this class to Heading style. It will also set style for mobile.
Example:
set "H1" class to apply heading style 1.
H1 Header
H2 Header
H3 Header
H4 Header
H5 Header
H6 Header
Heading 1
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.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Display Headings
These are the display heading styles. When you want a heading to look stand out.
Example:
set "Display-Large" class to a heading to apply large display style.
Display Large
Display Medium
Display Small
Subtitle
These are the subtitle styles. You will apply this style to a Text Block element. It will also set style for mobile.
Example:
set "Subtitle-1" class to a text block element to apply subtitle size 1 to this style.
Paragraph
This is the default paragraph style. You don't have to apply any class to this style.
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 Size
These are the various text size styles. You will apply this style to a Paragraph element.
Example:
set "P-Large-Regular" class to a paragraph element to apply text size 18px with regular font weight
Large-Regular: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Medium-Regular: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Small-Regular: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
XSmall-Regular: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
XXSmall-Regular: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Text Formatting
The text formatting consists of styles to change the format of any text.
It also represents the global text formatting and you can apply it to any text element.
Example
set "Text-Italic" class to apply the Italics style
set "Text-Bold" class to apply the Bold style
Medium: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Italics: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Semi-Bold: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Underline: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Bold: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Strikethrough: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Extra-Bold: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
CAps: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Center-Align: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Right-Align: ipsum dolor sit amet, consectetur adipiscing elit. Metus quis bibendum sagittis ultrices mollis justo quam ultricies in. At porttitor morbi aenean sit interdum venenatis.
Dot Points
The dot points consists of various styles of dot point formatting. Apply this to class to a Text Block element.
Example
set "Dot-Point-Icon" class to apply the icon style
set "Dot-Point-Icon-Inline" class to apply the inline dot point inline style
set "Dot-Point-Header" class to apply the dot point text with header style
set "Dot-Point-Text" class to apply the dot point text style
Form Elements
These are the form elements styles. A form allows users to input information.
A form consists of a group of related fields. You can also pass in default values. Submitting the form calls a function sending data to intergrations.
Shadows
The shadow class present different shadows. Use them to apply shadow effect to any element.
It also represents the global classes to apply shadow to any element.
Example
set "Shadow-M" class to any element to apply style for shadow size medium
Shadow-XS
Shadow-XS
Shadow-M
Shadow-L
Shadow-XL
Shadow-XXL
Rounding
The rounding class present different border radius. Use them to apply rounding effect to any element.
It also represents the global classes to apply border radius to any element.
Example
set "Round-4px" class to any element to apply style for border radius to 4px
Round-4px
Round-8px
Round-12px
Round-16px
Spacers
The spacers consists of all the spacing between margins and paddings using the scale of 4. Use them to apply spacing to any element.
It also represents the global classes to apply spacing to any element.
Auto Margin
The margin left and right is set to align content centre. Use them to apply spacing to any element.
Example
set "Marg-H-Auto" class to any element to apply the style spacing for horizontal margin space.
Top Margin
The top margin consists of all the margins spacing on top using the scale of 4. Use them to apply spacing to any element.
Example
set "Marg-Top-4px" class to any element to apply the style spacing for top margin space of 4px
Bottom Margin
The bottom margin consists of all the margins spacing on the bottom using the scale of 4. Use them to apply spacing to any element.
Example
set "Marg-Bottom-4px" class to any element to apply the style spacing for bottom margin space of 4px
Vertical Padding
The vertical padding consists of all the padding spacing on the top and bottom using the scale of 4. Use them to apply spacing to any element.
Example
set "Padding-V-4px" class to any element to apply the style spacing for top and bottom padding space of 4px
Horizontal Padding
The horizontal padding consists of all the padding spacing on the left and right using the scale of 4. Use them to apply spacing to any element.
Example
set "Padding-H-4px" class to any element to apply the style spacing for left and right padding space of 4px
Vertical Horizontal Padding
The vertical horizontal padding consists of all the padding spacing on the top, bottom, left and right using the scale of 4. Use them to apply spacing to any element.
Example
set "Padding-vH-4px" class to any element to apply the style spacing for top, bottom, left and right padding space of 4px
Other Elements
The other elements consists of all styles.
It also represents the global classes to add a style.
Divider
The divider. Use to add to a div element.
Example
set "Divider" class to Div element to add the style
Line Detail
The line detail. Use to add to a div element.
Example
set "Detail-S" class to Div element to add the style
