Introducing Hive
Design Guidelines

Built by the oakland team to maintain a constant look across all digital touchpoints.

Produced by Oakland Studio

visit oaklandstudio.co

Product Overview

Thanks for checking out the formly style guide.

Use this style guide to rapidly take control over global styles and power the direction of your webflow build.
Common components can be used across unlimted projects, and can provide a great place for your clients brand.

Feature Overview:

  • Comprehensive Style Guide & UI Library
  • Design - Colour, Typography, Shadow
  • Product - Banners, Forms, Buttons
  • Advanced Tabs & Platform Demos
  • Full Overview & Guides
  • World Class Support Team

Popular Use Cases

  • Clients Style Guide Page
  • Product Documentation
  • Webflow Website Style Guide

Global Styles

Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change.  Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.

Follow the same procedure for body text and paragraphs - which are specified on the Body element.  Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element.  These styles then flow through to the paragraphs and other generic text elements in the site.

How to Use

The fastest way to browse the kit is to go into preview mode and then select from the menu on the left site.

Once you're at a section you would like to clone you can simply copy (CTRL + C) on the elements parent wrapper and paste it to your own project. In order to copy components, you must first clone the library to your webflow dashboard.

More Cloneables

Please support us follow our socials

Colour Palette

Looking for support? Visit oaklandstudio.co

Brand Primary Palette

PRIMARY BRAND COLOURS
Primary Purple
#007bfc
Purple 002
#173151
Purple 003
#ffc4d3
Purple 004
#ffccaf
Purple 005
#a2e3ff
Primary Blue
#007bfc
Blue 002
#173151
Blue 003
#ffc4d3
Blue 004
#ffccaf
Blue 005
#a2e3ff
Primary Pink
#007bfc
Core
#173151
Cotton
#ffc4d3
Peach Puff
#ffccaf
Sky Blue
#a2e3ff

Neutral Palette

HEADING & PARAGRAPH
Heading
#232936
Paragraph
#617283
BG Shade
#007bfc
Title Blue
#007bfc
Title Blue
#007bfc
Note: These colours represent certain product states & status - This includes Success, Warning, Danger and Info. These colours can be found on your global colour pallette.

Typography Styles

Looking for more cloneables? Visit flowbase.co/clone

Headings

Aa Bb Cc Dd Ee

Display
60px
Note: Display headings are not a global style, and its styles are applied directly through use of the class name

Aa Bb Cc Dd Ee

Heading 1
55px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
29px

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

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
Note: This is the default paragraph text styling

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

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

Avatars

Looking for more cloneables? Visit flowbase.co/clone

Avatars

Avatar XL
96px
Avatar L
54px
Avatar M
36px
Avatar S
32px
Avatar XS
24px

TB

Avatar XL
96px

TB

Avatar L
54px

T

Avatar M
36px

T

Avatar S
32px

T

Avatar XS
24px

Badges & Pills

Looking for more cloneables? Visit flowbase.co/clone

Notification Pills

PILLS
24
24
24
24
24
24
24
24
24
24

Notification Badge

BADGE
Disabled
Default
Confirm
Warning
Error
Disabled
Default
Confirm
Warning
Error

Banner Bars

Looking for more cloneables? Visit flowbase.co/clone

Buttons

Looking for more cloneables? Visit flowbase.co/clone

Buttons

Button Sizes
LARGEPrimaryMEDIUMSMALL
Button
Large
Button
Default
Button
Medium
Button
Small

Button Styles

BUTTON BLOCK
DEFAULTSUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error
DEFAULTSUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error

Button Styles

BUTTON ROUND
PrimarySUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error
PrimarySUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error

Button Styles

BUTTON OUTLINE
PrimarySUCCESSWARNINGPrimary
Button
Large
Button
Success
Button
Warning
Button
Error

Quotes & Lists

Looking for more cloneables? Visit flowbase.co/clone

Quotes

Typography - Inter
You have power over your mind – not outside events.
Realize this, and you will find strength.

- Marcus Aurelius
Quote 1
Default
You have power over your mind – not outside events.
Realize this, and you will find strength.

- Marcus Aurelius
Quote 2
Coloured

Lists

  • 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

Field Elements

Looking for more cloneables? Visit flowbase.co/clone

Input Fields

PLAIN FIELDS
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.
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.
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Input Fields

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

Love the content?

Please consider showing your support and following us on any social platform that suits! Your support is what helps us to grow and connect with more designers and developers. If you really love what we do, we also have premium products available in our store.
FLOWBASE.CO/STORE

Introducing Elson
Agency & Studio Baseplate

Elements is a collection of re-usable and common components to help power-up your webflow builds. Take control over global classes and class styles to guide your projects to success. Re-use this template for your clients style guides, documentation and more.

For more webflow cloneables

visit flowbase.co/clone

Product Overview

Thanks for checking out the formly style guide.

Use this style guide to rapidly take control over global styles and power the direction of your webflow build.
Common components can be used across unlimted projects, and can provide a great place for your clients brand.

Feature Overview:

  • Comprehensive Style Guide & UI Library
  • Design - Colour, Typography, Shadow
  • Product - Banners, Forms, Buttons
  • Advanced Tabs & Platform Demos
  • Full Overview & Guides
  • World Class Support Team

Popular Use Cases

  • Clients Style Guide Page
  • Product Documentation
  • Webflow Website Style Guide

Global Styles

Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change.  Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.

Follow the same procedure for body text and paragraphs - which are specified on the Body element.  Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element.  These styles then flow through to the paragraphs and other generic text elements in the site.

How to Use

The fastest way to browse the kit is to go into preview mode and then select from the menu on the left site.

Once you're at a section you would like to clone you can simply copy (CTRL + C) on the elements parent wrapper and paste it to your own project. In order to copy components, you must first clone the library to your webflow dashboard.

More Cloneables

Please support us follow our socials

Colour Palette

Looking for more cloneables? Visit flowbase.co/clone

Brand Primary Palette

PRIMARY BRAND COLOURS
Primary Purple
#007bfc
Purple 002
#173151
Purple 003
#ffc4d3
Purple 004
#ffccaf
Purple 005
#a2e3ff
Primary Blue
#007bfc
Blue 002
#173151
Blue 003
#ffc4d3
Blue 004
#ffccaf
Blue 005
#a2e3ff
Primary Pink
#007bfc
Core
#173151
Cotton
#ffc4d3
Peach Puff
#ffccaf
Sky Blue
#a2e3ff
Primary Pink
#007bfc
Core
#173151
Cotton
#ffc4d3
Peach Puff
#ffccaf
Sky Blue
#a2e3ff

Typography Palette

HEADING & PARAGRAPH
Heading
#232936
Paragraph
#617283
Title Blue
#007bfc
Title Blue
#007bfc
Title Blue
#007bfc
Note: These colours represent certain product states & status - This includes Success, Warning, Danger and Info. These colours can be found on your global colour pallette.

Typography Styles

Looking for more cloneables? Visit flowbase.co/clone

Headings

Aa Bb Cc Dd Ee

Display
60px
Note: Display headings are not a global style, and its styles are applied directly through use of the class name

Aa Bb Cc Dd Ee

Heading 1
55px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
29px

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

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
Note: This is the default paragraph text styling

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

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

Avatars

Looking for more cloneables? Visit flowbase.co/clone

Avatars

Avatar XL
96px
Avatar L
54px
Avatar M
36px
Avatar S
32px
Avatar XS
24px

TB

Avatar XL
96px

TB

Avatar L
54px

T

Avatar M
36px

T

Avatar S
32px

T

Avatar XS
24px

Badges & Pills

Looking for more cloneables? Visit flowbase.co/clone

Notification Pills

PILLS
24
24
24
24
24
24
24
24
24
24

Notification Badge

BADGE
Disabled
Default
Confirm
Warning
Error
Disabled
Default
Confirm
Warning
Error

Banner Bars

Looking for more cloneables? Visit flowbase.co/clone

Buttons

Looking for more cloneables? Visit flowbase.co/clone

Buttons

Button Sizes
LARGEPrimaryMEDIUMSMALL
Button
Large
Button
Default
Button
Medium
Button
Small

Button Styles

BUTTON BLOCK
DEFAULTSUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error
DEFAULTSUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error

Button Styles

BUTTON ROUND
PrimarySUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error
PrimarySUCCESSWARNINGeRROR
Button
Primary
Button
Success
Button
Warning
Button
Error

Button Styles

BUTTON OUTLINE
PrimarySUCCESSWARNINGPrimary
Button
Large
Button
Success
Button
Warning
Button
Error

Quotes & Lists

Looking for more cloneables? Visit flowbase.co/clone

Quotes

Typography - Inter
You have power over your mind – not outside events.
Realize this, and you will find strength.

- Marcus Aurelius
Quote 1
Default
You have power over your mind – not outside events.
Realize this, and you will find strength.

- Marcus Aurelius
Quote 2
Coloured

Lists

  • 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

Field Elements

Looking for more cloneables? Visit flowbase.co/clone

Input Fields

PLAIN FIELDS
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.
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.
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Input Fields

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

Love the content?

Please consider showing your support and following us on any social platform that suits! Your support is what helps us to grow and connect with more designers and developers. If you really love what we do, we also have premium products available in our store.
FLOWBASE.CO/STORE