G

P

Finsweet

/fin-sweet/
The Finsweet name represents leadership in Webflow and dedication to the art of web development.
When representing the brand name, it should be pronounced as a single word — Finsweet.

F'in prefix

/F-in/
The F'in prefix is used for names of Finsweet sub-brands, initiatives, content, titles, marketing material, or any place where it is appropriate to mark a particular phrase associated with Finsweet.
⚠️
We do not want to overuse “F'in”. If we use F’in for everything, it has less impact. Use the term selectively. Usually we default to the full brand name, “Finsweet”.

Less is more

Less variations in name display = more brand unity
Default to using "Finsweet" in its full form.
Always capitalize the 'F' in Finsweet and F’in — Finsweet is F'in thankful.
Always add a space between the F’in prefix and the second word — F'in please.
'sweet' must always be lowercase when used after the 'F’in' prefix — F'in sweet.
Product names and formal titles must always be capitalized after the 'F’in' prefix — F'in Form Pro.
The word after 'F’in' should never be negative. We only do F'in positive vibes.
Do

Acceptable

Finsweet
F'in sweet
F'in Product/Title
F'in [any word] (e.g. F’in awesome)
{Finsweet
{F
Please
do not

Please do not do this

finsweet
f'in sweet
f'in [any word]
F'in [negative word] (e.g. F’in hard or F'in terrible)
F'insweet
{finsweet
F'inSweet
F'in Sweet
F
Fs
FS
{FS
{Fs
{fs
F'in
sweet

Where the name 'Finsweet' comes from

Joe had a random idea to create a brand name that contain a secret meaning through a carefully combined set of words.

The name “Finsweet” originated from the word "Fuckin" and "Sweet".

Finsweet operated for 2 years without telling clients the true meaning behind the name "Finsweet".

After enough F'in sweet websites were developed, Finsweet earned the clever name and went public with the "F'in" messaging.

😎 The backup plan for telling clients the meaning of "Finsweet"
‍
The opening code bracket "{" in front of our brand initials represented a dolphin tail. It has the same shape and relates to the dolphin's "fin" hence "Finsweet".

Our brand is

Innovative
Push the limits of what is possible with Webflow. Always do something better.
Direct
Do not hold back thoughts. Be transparent.
Playful
Never take yourself too seriously. Be funny and make someone laugh.
Growing
Your personal growth represents Finsweet company growth. When you grow, we grow.
Excelling
Push yourself to be the best at what you do. Be the most excellent version of yourself.
Happy
Find your path to happiness. Finsweet takes happiness from the community, clients, and web technology.

Logo and icon

Brand logo and icon, May 2022
Use the logo instead of plain text
If there is an option to represent Finsweet by logo or plain text, it is preferred to use the logo. For example, in the footer of a web property or in a marketing asset, use a logo file instead of "Finsweet" as plain text.
Always use approved logo container padding
If creating a containing box around the Finsweet logo, it is required to use the Finsweet logo with approved container padding. This is the only brand-approved padding for the logo. DO NOT use the transparent logo and create your own container.
Finsweet icon — when displayed at less than 64 pixels width
Finsweet icon — background, approved container padding
Finsweet icon — transparent, no container padding
Finsweet logo - transparent, no container padding
Finsweet logo - background, approved container padding
Download assets
Open on YouTube

Reasons for a change

The Finsweet icon using the capital 'F' is more aligned with Finsweet’s new logo.
The removal of the 's' character in the brand icon provides benefits in spacing, alignment, and organization.
The 'fs' icon creates a rectangle inside the square artboard. The 'F' icon creates a square inside the square artboard.
#fff
#f2ff37
#111

Colors

Black and white is on-brand and safe for all Finsweet projects. Add accent color(s) on top.
Finsweet logo and icon characters must always be displayed in #111 or #FFF.
Finsweet logo and icon can never use different colors. Black and white are the only approved colors for logo use.
Exception: If we are working with a third-party web property that uses #000, we may export the logo at #000 for this web property.
Black: #111
Black should be used as the primary black across all web properties.
White: #FFF
White can vary between web properties, as long as a minimum of AA contrast requirements are met.
Accent: #F2FF37
Finsweet's primary accent color. Accent colors can be unique for different properties. It is not a requirement to use the primary brand accent for all web properties.
For example: Attributes uses #bcfd2e as a primary color, Client-First uses #2d40ea as a primary color
Multiple accents and colors can be used for any brand property, as long as the colors do not distract from the written content.

Typography

Finsweet's primary font is Graphik.
Graphik font must be used for all Finsweet projects. All text content, titles, and branding must follow Graphik typography.
There is no approved secondary font of the Finsweet brand.
Graphik is a paid font and is available to Finsweet brand designers by request.

Simple design rules across web properties

High contrast ratio for text
All typography requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
This is represented by a AA rating or higher in Webflow’s color picker. All written text for any Finsweet web property, advertisement, or marketing material must be AA or AAA.
Written content takes priority
Written content is more important than visuals, art, or layouts. Text should never be obstructed by visuals.
Visuals and art direction must never prevent written content from visibility. Written content must always be clear.
Stay simple
If there is a choice between simple and complex while designing, choose simple.
Aa
Aa

Written content

Sentence case content
All written content must follow sentence case capitalization.
Products, formal titles, or proprietary feature names capitalize each first letter — For example, F’in Form Pro, Finsweet Community, or Client-First Folders.
Clear written content
Content should be on a mostly solid background without any visual obstructions in the background.
Do not put text content on a visual background which makes any part of the text content less readable.
Keep content simple
Finsweet written content and documentation must be presented as simple and minimalistic.
Visuals and interactions are acceptable, as long as they are not interfering with the simplistic presentation of content.
Text content should never be animated. Animations and movement, when required, must be limited to non-text elements.
No abbreviations for product names and formal titles
Write the full name for all product names and formal titles. Full product names and titles better create and maintain a stronger brand around the term.
🚫 Don’t use this:
FS, CF, WF, ATTR, WZ, etc.
✅ Use this:
Finsweet, Client-First, Webflow, Attributes, Wized.
</>
</>

Code

fs prefix tag
Use fs as a prefix when identifying Finsweet in code.
This applies to HTML, CSS, and JavaScript.
Use lowercase fs when working with code.
Use - or _ to separate fs from other words. For example, fs-modal or fs_modal.
Use fs as the first charactes in the string. For example, fs-modal is correct and modal-fs is not correct.
Custom attributes — Elements
fs-[identifier]-element = [element-identifier]
When identifying an element on the page using custom Attributes, use Attributes naming convention.
[identifier] is the topic or solution to solve for. For example, "calendar" for a custom calendar integration.
‍
The word element is used to communicate we are identifying an element.

The [element-identifier] communicates what the element is. For example, the "view-toggle" element is a button that toggles the view of the calendar.

This attribute would be:
fs-calendar-element = view-toggle
Custom attributes — Settings of elements
fs-[identifier]-[setting] = [setting-value]
When identifying a setting or configuration of an element on the page using custom Attributes, use Attributes naming convention.
[identifier] is the topic or solution to solve for. For example, "calendar" for a custom calendar integration.
‍
[setting] is the name of the setting we are applying to the element. For example "initialview", which sets the initial view for the calendar.

The [element-identifier] is the value for the [setting]. For example, the value can be "month", which makes month view the initial view of the calendar.

This attribute would be:
fs-calendar-initialview = month
More code guidelines coming soon