Go to Homepage

Webflow Style Guide

Welcome to the style guide of Taskz Webflow Template.

This guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes.

Taskz Webflow Template is designed to provide you with guidelines and best practices for creating a professional and impactful website for your business.

It covers a wide range of web design aspects, including typography, color usage, imagery selection, layout considerations, and content strategies.

By adhering to these guidelines, you can maintain consistency, enhance visual appeal, and ensure seamless navigation throughout your website.

Colours

Primary Colour

Primary
#2979ff

Secondary Colours

Secondary
#669dfc
Yellow
#f7be4a
Pink
#f881a9
Dark Blue
#1b4ea3
Green
#19ce71
Dark Green
#00311a
Red
#f24e1e
Dark Red
#3d0606

Other Colours

White
#ffffff
Black
#19191d
White Smoke
#f6f6f6
Light Gray
#f0f0f0
Gray
#9697a1
Dark Gray
#787885

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

HTML text tags

All Paragraphs (HTML-TAG)

All Links (HTML-TAG)

Text weights

Text Weight Bold
Text Weight Semi Bold
Text Weight Normal
Text Weight Light

Rich Text

Rich text blocks (RTBs) are different from regular paragraph and text elements.

RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

L

orem 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.

photograph frame icon
This is a placeholder image.

This is an ordered list

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

This an unordered list

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Block quotes

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Logos & Assets

Brand logo image icon and text
Logo
intuitive
Badge Card
intuitive
Badge Card White Text
taskz icon
Icon - 256x256px
taskz icon
Icon - 32x32px

Buttons & Icons

Filled Round Button
Filled Round Button Smaller
Filled Curve Button with Icon
Ghost Curve Button
Ghost Round Button

Freepik Icons

photograph frame iconquote black icon

Freepik Social Icons

LogoToUse Social Icons

Webflow Elements

Text Input

Submit

Go to Homepage