Style Guide

This style guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

Typography

The different text sizes used throughout the site.

3X Large

A header.

2X Large

This is a header.

x Large

This is a header.

Large

This is a header.

Medium

This is a header.

Small

This is a header.

x Small

This is a header.

2x Small

This is a header.

Large Paragraph

Avatar Squad is a drop of custom illustrative characters, created by Bob Hanken, aiming to express culture, personality and individuality.

Medium Paragraph

Avatar Squad is a drop of custom illustrative characters, created by Bob Hanken, aiming to express culture, personality and individuality.

Paragraph

Avatar Squad is a drop of custom illustrative characters, created by Bob Hanken, aiming to express culture, personality and individuality.

Small Paragraph

Avatar Squad is a drop of custom illustrative characters, created by Bob Hanken, aiming to express culture, personality and individuality.

Quote
Avatar Squad is a drop of custom illustrative characters, created by Bob Hanken, aiming to express culture, personality and individuality.
List
  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed
Figure with caption
Studio Image
An image with a caption

Rich Text

This is a header.

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.

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!

Latest updates

  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed

More about Webflow

Studio Image
An image with a caption

Colors

The different weights of greys and colours used throughout the website.

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Primary
Contact
Light
Contact
Outline
Contact
Minimal
Learn More

Grids

Different grid layouts to use across your site

4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid

Columns

The 12 column grid system to make it easy to align sections across different screen sizes.

1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$3k - $5k

Start a Project

Includes

  • Responsive one page website
  • Fully custom design
  • Illustrations

Standard

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$5k - $7k

Start a Project

Includes

  • Up to 3 page website
  • Fully custom design
  • Illustrations
  • Design system
  • Webflow training

Premium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$7k - $9k

Start a Project

Includes

  • Up to 5 page website
  • Fully custom design
  • Illustrations
  • Design system
  • Drag & drop symbol library
  • Webflow training

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$2k - $4k

Start a Project

Includes

  • 5-10 page website migrated to Webflow
  • CMS collections set up
  • SEO and page speed best practices

Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$4k - $6k

Start a Project

Includes

  • 10-20 page website migrated to Webflow
  • CMS collections set up
  • SEO and page speed best practices
  • Drag & drop symbol library

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$6k - $8k

Start a Project

Includes

  • 20-30 page website migrated to Webflow
  • CMS collections set up
  • SEO and page speed best practices
  • Drag & drop symbol library
  • Webflow training

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$6k - $8k

Start a Project

Includes

  • Up to 5 page responsive website
  • Fully custom design
  • CMS collections set up
  • SEO and page speed best practices
  • Design system
  • Website training

Standard

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$10k - $15k

Start a Project

Includes

  • Up to 12 page responsive website
  • Fully custom design
  • Illustrations
  • CMS collections set up
  • SEO and page speed best practices
  • Design system
  • Website training

Premium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$18k - $25k

Start a Project

Includes

  • Up to 25 page responsive website
  • Fully custom design
  • Illustrations
  • CMS collections set up
  • SEO and page speed best practices
  • Design system
  • Drag & drop symbol library
  • Website training

Basic Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$400/month

Start a Project

Includes

  • Unlimited content updates including copy edits, image updates, and adding meta information
  • Adding or removing any new CMS items
  • Webflow questions and issues answered within 1-3 days on Slack
  • Cancel anytime

Pro Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$800/month

Start a Project

Includes

  • Unlimited content updates including copy edits, image updates, and adding meta information
  • Adding or removing any new CMS items
  • Webflow questions and issues answered within 1-3 days on Slack
  • SEO best practices added including meta tags and descriptions added to all pages
  • Speed best practices so that scores high in Google Page Speed tests
  • Any updates and new pages built within 3-5 days
  • Cancel anytime

Pro+ Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gdf.

Total price

$1,200/month

Start a Project

Includes

  • Unlimited content updates including copy edits, image updates, and adding meta information
  • Adding or removing any new CMS items
  • Webflow questions and issues answered within 1-2 days on Slack
  • SEO best practices added including meta tags and descriptions added to all pages
  • Speed best practices so that scores high in Google Page Speed tests
  • Any updates and new pages built within 2-3 days
  • Monthly evaluation through Google Analytics to find insights and improve user conversion through the website
  • Cancel anytime

© Outdo Studio. Built by Nikolai Bain. Powered by Webflow.