Personal Portfolio
Style Guide

Use this page to get alter global typography styles and establish your website style-guide.

Primary Palette

BRAND COLOURS
Purple 900
Dark
Purple 700
Dark
Purple 600
PRIMARY
Purple 500
tint
Purple 300
tint
Blue 900
DARK
Blue 700
DARK
Blue 600
PRIMARY
Blue 500
tint
Blue 300
tint
Pink 900
DARK
Pink 700
DARK
Pink 600
PRIMARY
Pink 500
tint
Pink 300
tint
Red 900
tint
Red 700
tint
Red 600
PRIMARY
Red 500
tint
Red 300
tint

Typography Palette

HEADING & PARAGRAPH
Grey 900
#130f49
Grey 700
#55527c
Grey 600
#b4b2c5
Grey 500
#d9d9e2
Grey 300
#f8f8fa

Typography Styles

Not sure on something? support@flowbase.co

Headings

Aa Bb Cc Dd Ee

Display
64px

Aa Bb Cc Dd Ee

Heading 1
48px

Aa Bb Cc Dd Ee

Heading 2
40px

Aa Bb Cc Dd Ee

Heading 3
34px

Aa Bb Cc Dd Ee

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

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
22px

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

Quotes & Lists

Not sure on something? support@flowbase.co

Quotes

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

  • 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

Not sure on something? support@flowbase.co

Buttons

Submit
Button Primary
Get in touch
Button Arrow
Submit
Button Outline
COMPANIES

Customers & Clients

Thanks for purchasing Nero!

This page details the most common questions for the template and some tips to help you get started editing it. As always, we recommend reviewing the Webflow University for the most general and up-to-date Webflow guides.

Style Guide

This template includes a style guide which will act as a central hub to maintain general website styles. On this page, you can find the full colour pallette, typography, button styles etc.

When you begin altering the typography, this would be the best place to maintain the editing of global styles.

Editing Global Typography

In order to instantly change all the website typography you can navigate the body-element and apply changes to all body pages. Because the body element is located on every-page by default we can outline some particular styles.

Once you have the body element in focus, you will need to click to the styles on the right side, where you can select to style all body elements. Once this is selected you can simply change the typography styles, base font sizes etc.

Editing Typography Styles

H1 - H6 Styles

In most cases it's better to use the global typography styles rather than classes to style these elements. This means that when we drop a H1 into a page, it contains the exact same styling as all other H1s without the need to provide a specific class.

In order to do this, please select the header type from the styles page, and click the selector dropdown. Inside this dropdown you will be able to select 'All H1 Headings' where you can start applying specific styles for all the H1s. You can repeat this for all heading types.

Paragraphs

Similar to the above, in order to maintain a clear and consistent style you can simply select an apply styles to 'All Paragraphs'. We have provided the default styles, but you're welcome to change these to suit your own projects.

Containers

Each section of the website should have the class Container applied within it. Containers hold our content and ensure it doesn't expact too far and is consistent on all pages.

We have used a default 'Container' of 1170px, if you choose to change this on the container element, it will apply to all containers used on the site. 

CMS Masonry Grid

Please note, we are using a webflow trick to easily produce the 3 column masonry grid. This is controlled via the typograph column settings. Here you can change the columns, width or remove this effect and use a more standard grid.

More Information

For further information, please review the Webflow documentation or reach out to us via template support - flowbase.co/support

Webflow University

The most up-to-date resource for webflow beginners and
experts.

Webflow Videos

Short and sweet videos to get you familiar with the
product.

Flowbase

Additional free resources, cloneable assets, advanced guides.

CRAFT AMAZING

Customer Testimonials

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.

John Doe

Marketing Manager

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.

Steve Mark

Founder & Leader

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.

Sarah Smith

Operations Team