Welcome to your
Brand Portal

This Digital Brand Portal will help bring that extra piece to your client and help them access their brand assets & guidelines easier. This page requires customization before sending to a client.

Feel free to add or delete brandportal_sections to fit whatever brand content your client has.
There are a few notes on the sections for make sure everything is functioning properly. Make sure to delete any red text before shipping.

You also have the option to password-protect this page for your client, in case there is sensitive internal information on this page.

Please report any suggestions or bugs to kegan.sovay@nognstudio.com

Since you are viewing this guide and reading these words, we’re trusting you with our very identity: our brand.

We aren’t interested in all of the buzzwords and catchphrases and marketing jargon surrounding the word brand. But we do care about what people think about us. We care about our reputation.

We also care about growing our business. The following pages are full of guidelines, rules, and handy tips that we hope will help you communicate our values, realize our vision, and reinforce our brand.

It is impossible to predict every situation, brand execution, or implementation, but this guide will help refine your approach.

Intent of this guide

This style guide is a reference for our internal design team, vendors, and others who are authorized to work with the brand.

The standards, guidelines, and references within this document are grounded in the years of research, experimentation, and brand executions that have preceded our new brand look and feel.  

What we strive for is a coordinated, consistent, and effective brand presence in everything we create. If we make something, we want to make sure that people know where it came from.

Instead, the focus of this guide is to empower you, the creative, with the elements you need to create. By utilizing these tools, resources, and adhering to the guidelines within, you’ll make things that look like the brand, every time.  

Please refer back to this guide often. We believe that our style guide is a living document. It should evolve over time, just as our brand inevitably will.

Brand Strategy

This strategy is your reference to how the brand thinks, speaks and expresses itself.

Your brand is a living, breathing entity that will grow and change overtime, but your strategy gives it a soul and core that will stick with it forever.

Our Story

Our Story

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Fringilla ut morbi tincidunt augue. Tortor condimentum lacinia quis vel eros. In ornare quam viverra orci sagittis eu volutpat odio facilisis. At consectetur lorem donec massa sapien. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Id neque aliquam vestibulum morbi blandit. Quam nulla porttitor massa id neque aliquam. Facilisi etiam dignissim diam quis enim.

Brand Positioning

Mission Statement

Arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales.

What

Iaculis eu non diam phasellus vestibulum lorem sed.

How

Elit ullamcorper dignissim cras tincidunt lobortis feugiat.

Why

A cras semper auctor neque vitae tempus quam pellentesque. Ornare lectus sit amet est.

Value Proposition

In pellentesque massa placerat duis. Cras semper auctor neque vitae tempus.

Core Values:
  1. Consistency
  2. Knowledge
  3. Excellence
  4. Accessibility
  5. Integrity

Differentiator

Eget dolor morbi non arcu risus quis varius quam. Viverra justo nec ultrices dui. Vitae aliquet nec ullamcorper sit amet risus nullam eget.

Brand Experience

Promised Experience: Certainty

Porttitor eget dolor morbi non arcu risus quis varius quam. Feugiat pretium nibh ipsum consequat. Tristique risus nec feugiat in fermentum posuere urna.

Perception

Personality: Chris Hemsworth

A warm, magnetic personality that makes you feel like you’re always welcome. Talented, fit, humble, fun-loving, and inspires everyone around him to enjoy life in a similar way. Trustworthiness that makes you feel like you could go to him for guidance. Easy connection that makes you feel like you can swap stories and create new ones together. Suave, sophisticated energy that makes you feel like you’re in a higher social standing just by being around him.

Look & Feel:

  1. Friendly
  2. Sincere
  3. Conscientious
  4. Confident

Personas

Persona #1

In pellentesque massa placerat duis. Cras semper auctor neque vitae tempus. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Elementum tempus egestas sed sed risus pretium quam vulputate. Eget dolor morbi non arcu risus quis varius quam. Viverra justo nec ultrices dui. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Leo integer malesuada nunc vel risus commodo viverra. Ac turpis egestas maecenas pharetra convallis posuere. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Porttitor eget dolor morbi non arcu risus quis varius quam. Feugiat pretium nibh ipsum consequat. Tristique risus nec feugiat in fermentum posuere urna.

Persona #2

In pellentesque massa placerat duis. Cras semper auctor neque vitae tempus. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Elementum tempus egestas sed sed risus pretium quam vulputate. Eget dolor morbi non arcu risus quis varius quam. Viverra justo nec ultrices dui. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Leo integer malesuada nunc vel risus commodo viverra. Ac turpis egestas maecenas pharetra convallis posuere. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Porttitor eget dolor morbi non arcu risus quis varius quam. Feugiat pretium nibh ipsum consequat. Tristique risus nec feugiat in fermentum posuere urna.

Persona #3

In pellentesque massa placerat duis. Cras semper auctor neque vitae tempus. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Elementum tempus egestas sed sed risus pretium quam vulputate. Eget dolor morbi non arcu risus quis varius quam. Viverra justo nec ultrices dui. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Leo integer malesuada nunc vel risus commodo viverra. Ac turpis egestas maecenas pharetra convallis posuere. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Porttitor eget dolor morbi non arcu risus quis varius quam. Feugiat pretium nibh ipsum consequat. Tristique risus nec feugiat in fermentum posuere urna.

Archetype

The Everyman

The Everyman is also known as: The good ole boy, regular guy/gal, the person next door, the realist, the working stiff, the solid citizen, the good neighbor, the silent majority.

Values:
  • Motto: "All men and women are equal"
  • Core Desire: connecting with others
  • Goal: to belong
  • Strategy: develop ordinary solid virtues
  • Talent: realism, empathy, lack of pretense

Voice & Tone

Arcu vitae elementum curabitur vitae nunc sed velit. Aliquam nulla facilisi cras fermentum odio eu. Platea dictumst quisque sagittis purus. Turpis nunc eget lorem dolor sed.

Messaging

Elevator Pitch:

Habitant morbi tristique senectus et netus et malesuada fames. Duis tristique sollicitudin nibh sit amet commodo. Euismod nisi porta lorem mollis aliquam. Magna ac placerat vestibulum lectus mauris. Risus sed vulputate odio ut enim blandit volutpat maecenas.

Taglines:

Lorem ipsum dolor sit amet.

Headline Bank:

Commodo sed egestas egestas fringilla.

Dictum fusce ut placerat orci nulla

Blandit aliquam etiam erat velit

Brand Identity

A guide to the Brand assets and visual specifications

Logos

Link each download block to the Webflow file OR a Drive or Dropbox folder download.
SVGs are recommended for these logo images

Spacing

Minimum height for the wordmark & icon is .75” for print and 50px for digital applications.

Badges & Icons

Link each logo block to a Drive or Dropbox folder download.
SVGs are recommended for these logo images - making it easy to download straight from this page if need be

Minimum height for the icons is .75” for print and 50px for digital applications.

Illustrations & Patterns

Link each logo block to a Drive or Dropbox folder download.
SVGs are recommended for these logo images - making it easy to download straight from this page if need be

Colors

Edit the hidden text block inside the copy button for the Copy to Clipboard attribute to work.

If you add more color blocks make sure to change the attributes for copy-click and copy-this (https://www.finsweet.com/attributes/copy-to-clipboard)

#1F263D

Navy

HEX
1F263D
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE
#EB5D37

Orange

HEX
1F263D
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE
#EEEBDA

Cream

HEX
EEEBDA
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE
#404D34

Green

HEX
404D34
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE
#D0DCE7

Blue

HEX
D0DCE7
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE
#F9B123

Yellow

HEX
F9B123
RGB
31, 38, 61
CMYK
89, 80, 48, 53
PANTONE
PANTONE

Typography

Link each font block to Google Fonts OR Drive or Dropbox folder download with the font.

Fonts

Titles & Headings

OVERPASS

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Body Copy

Supreme

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Type Example

Type Scaling

Headings
HEADER ONE - DISPLAY
80 px / 1.5
Overpass Extra Bold
HEADER TWO
60 px / 1.5
Overpass Bold
HEADER THREE
36 px / 1.5
Overpass Semi Bold
SUBHEADING
24 px / 1.5
Overpass Semi Bold
Paragraphs & Body Copy
Paragraph Large – Supreme 24 px

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

Paragraph Medium – Supreme 18 px

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

Paragraph Regular – Supreme 16 px

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

The Six Type Commandments

01 – Stay Left Aligned, Rag Right

Legibility and clarity are vitally important to great typographical layouts. Since most people read from left to right, we should align our type accordingly. And besides, we’re a little off-center as a brand anyway.

02 – Skip Weights & Double Size

Contrast is the name of the game when it comes to great design. When in doubt, skip a weight when pairing two weights, and double the size between two text elements.

03 – Align X-Heights or Baselines

Whenever you place text next to each other, either align the baselines(the line that the bottom of a lowercase x sits on) or align the x-heights (the top of a lowercase x). This helps align each line visually

04 – Watch the Rag

When setting paragraphs, keep an eye on the right (ragged)edge. If the rag unintentionally creates a recognizable shape, consider tweaking the language or resizing the container.Also, try to prevent single-word lines (orphans).

05 – Give Things Space, If Needed

Negative space, or the space around elements is vitally important. That being said, if informational elements belong together, move them closer together. use grouping wisely:just try not to cram too many things in one space!

06 – Keep Line Length Reasonable

It is easy for the user to get lost in long lines of text, and short ones are easily ignored. It’s best to keep lines between 45 and70 characters long, depending on the size of the font. This will ensure legibility as the font sizes increase or decrease.

Photography

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

Webflow Style Guide

A guide to the Digital practices, components, & structures for developing in Webflow. These elements & styles are from Finsweet's Client First V2

HTML Heading Tags

HTML tags define default Heading styles.

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link
text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons

Button combo class system.

button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-text
Button Text

Colors

Manage recurring text and background colors.

Text Colors

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white

Background Colors

background-color-black
background-color-grey
background-color-white

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Size Classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3