Meet Cardly
Client Style Kit

Use this style guide template to quickly align your websites brand and visual direction. Take control of global styles to edit typography, colours & elements across the whole site.

Product Overview

Cardly is a clean and modern Webflow template providing the ultimate solution for your Finance or SaaS business. This template is designed to be easily edited and can suit various business sectors and industries. Beautiful custom illustrations and production quality builds will save you hours and put your builds in the best position for success.

Colour Palette

Primary Palette

BRAND COLOURS
Brand
#007bfc
Core
#173151
Cotton
#ffc4d3

Secondary Palette

GRADIENT
Alice Blue
#f5fafd

Typography Palette

HEADING & PARAGRAPH
Heading
#232936
Paragraph
#617283

Typography Styles

Headings

Typography - Inter

Aa Bb Cc Dd Ee

Heading 1
60px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
38px

Aa Bb Cc Dd Ee

Heading 4
24px
Aa Bb Cc Dd Ee
Heading 5
20px
Aa Bb Cc Dd Ee
Heading 6
18px

Paragraph

Typography - Inter

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
18px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Text Detail
55px

Additional Type

Typography - Inter

This line rendered as bold text.

Bold

This line rendered as italicized text.

Italic

This line of text is meant to be treated as deleted text.

Strikethrough

This line of text is meant to be treated as deleted text.

Underline

You can use the mark tag to highlight text.

Highlight

Quotes & Lists

Quotes

Typography - Inter
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 1
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 2
Coloured

Lists

Typography - Inter
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Dots
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Numbers
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Letters

Buttons

Primary Button

Primary
Button Primary
Primary
Button Outline