Introducing Frontier
Template Style Guide

Frontier is the ultimate starting point for agencies & studios looking to excel their online presence and win more clients. Frontier sets the foundation of beauty, functionality and a unique brand experience for clients.

Product Overview

Frontier - Webflow Studio & Agency Template

Your agency/studio website is very often the first touchpoint for clients and it needs to impress. It needs to impress them with not only the design, but primarily it's functionality. A beaufiul, responsive and functional website speaks volumes for your business attention to detail and care. This high standard must be carried across all pages and devices.

We have built frontier to literally be the ultimate starting point for high-end studios and agencies. In seconds, you can change the colour, typography, imagery and create a completely unique to your brand experience for cutomsers. Watch the design transform to suit your own business as you begin editing, take it a step further with smooth scrolling, custom code interactions, and anything your creative brain can inspire. (We have guides for these things!)

Ultra clean class-naming and construction makes it SO easy to edit, and no complex combo-classes withj crazy positioning to throw you off your game. Did we mentioned it's backed by one of the leading webflow teams? We offer expert support, tons of guides and components & freebies that can help you extend your builds.



Feature List

  • Modern & Beautifully Crafted
  • Built by Leading Webflow Studio
  • 8+ Pages & CMS
  • Multi-Step Onboarding Form
  • Complete Style Guide
  • Header Variations
  • Figma Working Files Available*
  • Beautiful Interactions
  • Comprehensive Case Study Template
  • Clean Blog Grid & Post Page
  • Team & Team Member CMS
  • Reusable Style Guide
  • Intuitive & Easy-to-use Class Naming
  • Webflow Optimised
  • Production Quality Build
  • Retina Ready
  • 100% Responsive
  • Extremely Customizable
  • SEO Optimized (H1s, Structure, Naming, Speed)
  • Great Performance
  • Modern & Clean Layout
  • Expert Support from Flowbase Team

Frontier Pages

  • Home
  • Company
  • Service Page
  • Work
  • Work Single (Case Study)
  • Contact (Multi-step Form)
  • Blog
  • Blog Single
  • Team Single
  • Privacy & Terms
  • Style Guide
  • 404

Template Pages

  • Licence
  • Getting Started
  • Changelog

100% Customisable

Our templates are 100% customisable - we just give you the ultimate headstart. Change the colours, container sizes, spacing or anything you like to suit your project and to own the design in everyway. That's the beauty of Webflow - our templates can be used across an unlimited amount of projects and our team encourages you to get creative.

Webflow Expert Development (Flowbase Team)

We use expert Webflow development principles across all our products. You can feel comfortable knowing that our templates are always updated to match the latest Webflow features.

We pride ourselves in building to the highest level of quality, ensuring that clear class-naming and structure makes it easy for you to truely take control. Our templates are built to suit both beginners and experts with clear and clean construction.

Webflow Expert Support

We provide support for all customers using our products. Please contact us if you notice anything strange, have any problems or just want to say hello. We're always listening and we generally respond within 24 hours. You can get in contact via support@flowbase.co

Style Guide & Utility Pages

You can easily change the style of base elements like buttons, headers and paragraphs from the Style Guide page. The utility pages (404, Password) are also included.

Usage Rights

All the images in this template can be used for personal or commercial usage. You can view the source for all images on our templates licence page. *If you would like access to the figma orginal working files, please email proof of purchase to support@flowbase.co

Colour Palette

Looking for something else? Visit flowbase.co

Brand Primary Palette

PRIMARY BRAND COLOURS
Green Dark
#0b7f6d
Orange
#f89602
Green Normal
#01bc9a
Green Tint
#99e4d7
Green Tint
#e6f8f5
Yellow Dark
#bb8620
Yellow Dark
#dd9b1b
Yellow Normal
#ffb016
Yellow Tint
#ffdfa2
Yellow Tint
#fff7e8
Pink Dark
#c14654
Pink Dark
#e04c5d
Pink Normal
#ff5367
Pink Tint
#ffbac2
Pink Tint
#ffeef0
Blue Dark
#0976db
Blue Dark
#0a82f0
Blue Normal
#1790ff
Blue Tint
#a2d3ff
Blue Tint
#e8f4ff

Typography Palette

HEADING & PARAGRAPH
Heading
#2e2e36
Paragraph
#69696e
Title Normal
#8a8a8f
Title Tint
#bcbcbf
Title Tint
#eeeeef

Typography Styles

Looking for something else? Visit flowbase.co

Headings

STYLES

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

Aa Bb Cc Dd Ee

Heading 2
36px

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

STYLES

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

STYLES

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

Lists

STYLES
  • Example of a dot point list item
  • Example of a dot point list item
  • Example of a dot point list item
Dot Point Lists
  • Example of a dot point list item
  • Example of a dot point list item
  • Example of a dot point list item
Numbered List

Banner Bars

Looking for something else? Visit flowbase.co

Buttons

Looking for something else? Visit flowbase.co

Buttons

Button Sizes
Normal Button
Button
Default
See our Company
Button
Arrow
See More Works
Button
Line
Normal Button
Button
Dark

Figure & Figure Caption

Looking for something else? Visit flowbase.co

Figures

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Here's an example caption item

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.