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:
- Consistency
- Knowledge
- Excellence
- Accessibility
- 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:
- Friendly
- Sincere
- Conscientious
- 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.
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)
Navy
Orange
Cream
Green
Blue
Yellow
Typography
Link each font block to Google Fonts OR Drive or Dropbox folder download with the font.
Fonts
Type Example
Type Scaling
Headings
Paragraphs & Body Copy
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.
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.
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.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
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.
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.
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 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.
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.
Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
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.
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 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.
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.
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 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.
- 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
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 on your website.
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 on your website. 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 on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
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
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 Alignments
Buttons
Button combo class system.
Colors
Manage recurring text and background colors.
Text Colors
Background Colors
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
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.
- 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.
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.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].