A new modern brand awaits.

With our company’s growth and new direction, we need a brand identity that is efficient to use in a globally consistent way. These guidelines cover 5 elements: logo, color, typography, iconography and photography.

Download assets

Updated 05/02/2020

Logo

Optical kerning, refined weight, and defined clear space, as well as well delineated placement in relation to other content all help to make it as instantly recognizable as possible at all sizes and in all contexts.

Download logo

Updated 16/03/2020

Color

Logo should be white on darker backgrounds and almost black on lighter backgrounds.

Scale

Our logo is designed to scale to small sizes on print and screen. It comes in three sizes: Large, mid and small. Smallest sizes are Large/20px high, Mid/15px and Small/10px.

Guidance

x

Use the logotype, don’t type out Fieldly in other fonts.

x

Don’t stretch or manipulate the logo.

x

Don’t pair the logotype with marks that may be confused as logos.

x

Don’t type out Fieldly in all caps or no caps.

x

Using almost black or white gives highest contrast ratio, aiding accessibility.

x

Don't add clear space or resize the logomark.

Construction

Our logo is based on classical letter shapes. It is carefully constructed to maintain friendly characteristics while allowing for perfect legibility at any size on any application.

Logotype

The amount of space has been kerned optically based on the volume between each letter.

Logomark

Basis of the Fieldly business is the logomark. It includes the famed developer brackets for our software, the handshake between us and clients, as well as the 360 flow between office and field worker experienced within Fieldly.

Clear space

Clear space around the logo is equal to the cap height of the D turned 90 degrees clockwise.

Graphic spacing

Partnerships

Aligning partnership logos should follow clear space rules. 
The separating line between logos can be found in the Fieldly Figma library.

Hide guides

Placement

The logo placement depends on the type of communication and use.

App icon

Clothing

Physical sign

Color

A shift to more white and a manageable range of distinctive secondary and tertiary colors, lets our almost black continue to work for us while letting us embrace a lighter feel. We also have a distinctive blue to add tight focus on important moments.

Primary

Our primary brand colors are white and almost black. They are used to provide accessibility, simplicity, and consistency throughout all brand communications.

WHITE
HEX — FFFFFF

ALMOST BLACK
HEX — 242A2D

MIST
‍HEX — D2DBEC

Secondary

The secondary brand colors are used consistently throughout marketing, web and app.

SAPPHIRE
HEX — 153CFB

CERULEAN
HEX — 0577FF

AQUAMARINE
HEX — 87D7DA

CORAL
HEX — FF9475

Usage Proportions

It is important to follow the rules of these proportions when creating any brand communication in order to maintain brand consistency and remain accessible for all people.

White plays a very important role in all brand communications and should provide balance with almost black. Sapphire is only used for critical moments that warrant care between Fieldly and the user. The secondary colors are only used reasonably for illustrations and within product.

Tertiary

Our tertiary colors should be used sparingly throughout product, illustration and photography in order to maintain meaning and potency.

Status colors web

HEX 7362DA

HEX 4487D7

HEX 44C27E

HEX F5C23E

HEX EE6556

Status colors mobile (Dark mode)

HEX AB9FF5

HEX 7CB8FF

HEX 7FF1B3

HEX FFD771

HEX FF9475

Status colors mobile (Light mode)

HEX 5C4FAB

HEX 285FA1

HEX 2E8757

HEX C69B2D

HEX CF4C3D

Greys

HEX 555555

HEX 707070

HEX 8E8E8E

HEX C2C2C2

HEX DADADA

HEX E8E8E8

HEX F5F5F5

Typography

Inter is a typeface carefully crafted & designed for computer screens. It works to maintain consistency, create clarity, and provide equity to the brand as a global leader in multi-modal construction.


Inter Bold

For clear headlines, titles and other large size texts
we use Inter Bold.

Aa
Inter Bold
Inter is a typeface carefully crafted & designed for computer screens.
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

0 1 2 3 4 5 6 7 8 9
!@#$%^&*?/)

Inter Regular

Inter Regular serves as our main font paragraphs and body text.

Aa
Inter Medium
Inter is a typeface carefully crafted & designed for computer screens.
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

0 1 2 3 4 5 6 7 8 9
!@#$%^&*?/)

Pairings

It is important to maintain these type pairings. This allows for clarity, consistency, and a strong hierarchy for all communications. Medium weight should be paired with Light weight, and Bold weight should be paired with Regular weight.

Typographic hierarchy

It is important to organize typography in a hierarchical system according to relative importance or inclusiveness through scale and function depending on communication.

Project
Management

H1 | Inter Bold | Size 64 | Line 72
Seek first to understand, then to be understood and always stay true to your word.
Paragraph | Inter Regular | Size 20 | Line 27

Power through
simplicity

H2 | Inter Bold | Size 42 | Line 56

A better world built with
smarter tools.

H3 | Inter Bold | Size 24 | Line 30
Simplifying construction by stream-lining project management.
Tag | Inter Regular | Size 14 | Line 20
Scandinavian minimalism with an adventurous and sustainable approach.
Body | Inter Regular | Size 18 | Line 26

Iconography

Icons and their usage principles were designed to communicate quickly and effectively across all touchpoints (from product to environment to marketing).

System icons

Our icon system is inspired by friendliness and simplicity. It aims to be communicative and inclusive. Each icon has a regular and bold version. Bold versions work well at small sizes in product while the regular version works better in larger settings, signage and marketing. Smallest sizes are Regular max. 20px high and /15px.

Home

Settings

Clock

Dashboard

Notification

Edit

Trash

Search

Date

Report

Camera

Excavator

Exit

Star

Safety

Contact

User

Phone

Break

Globe

Measure

Location

Tool

Cart

Accident

Photos

Worker

Ladder

Photography

Our photography inspires our audience of young and old, rich and poor, customers and partners, local and global. Clarification of how Fieldly works is unnecessary. We build on how it feels to from the persistent planning stage to the proud constructed society of tomorrow.

Environment

The result of Fieldly customers using the platform.

People

People are relatable and appear natural in a global environment, expressing movement.

© 2020 Fieldly AB