BRAND RULES

The best brands follow the strictest guidelines and create a strong emotional attachment with consumers.

So this how we express who we are, our values, and visions—in a visual way.

Please always follow these rules.

Because a brand is a precious thing. Consumers encounter thousands of communications every day, so to stand out we have to curate our brand very carefully.

These are the rules to be followed in the presentation of our brand.

THE MAGFAST® LOGO

The MAGFAST® logo is the cornerstone of our brand. Please use it carefully and respectfully.

The logo needs a certain amount of space to “breathe”.

The more space it is allowed between it and accompanying text, images and graphics, the greater prominence of the brand.

Never crowd the brandmark in a way in which it is fighting for space, or too close to the edge of a page or spread.

Allow at least the amount of space equal to half the height of the logo on all sides.

The Primary Logo

The primary, main logo, shown above is almost always preferred. It consists of a Black Wordmark on a transparent background.

Alternative color

When our logo is displayed on a dark background we use the white version of our logo.

THE M ICON

The full MAGFAST® logo should be used whenever possible. However there are rare cases where the full logo would appear so small or distorted as to be pointless.

On these occasions we use the MAGFAST M-Icon, which has been designed to stand by itself in a square format which matches the proportions of our logo and products.

The M-icon is to be used ONLY when space does not permit intelligent application of our full wordmark. Typically this means social media icons and the BIMI email logo.

Please get in touch if you think you have a use-case for the M-icon.

MAGFAST colors

Please keep things simple and clean when using color on our site.
All artwork should incorporate this basic palette to keep things consistent which creates a strong brand.

We primarily use Black and White as backgrounds, and our MAGFAST yellow occasionally to highlight a particular section.

MAGFAST Yellow

#ffd814

Dark Yellow

#D8A818

Selection Blue

#0071E3

  • Our primary accent color is our MAGFAST Yellow.

  • Dark Yellow is used sparingly and only in cases where the MAGFAST Yellow is too hard to read.

  • Selection Blue is used for links and for any interactions that need to be highlighted as selected.

Grayscale

Apart from full black and full white, we use a range of gray tints.

Lightest

Lighter

Light

Default

Dark

Darker

Darkest

TYPOGRAPHY

Guidelines for how we use typography. These serve as guardrails for designers to design freely with best typographic practices in mind.

Typefaces

We use Gotham for everything and make full use of all the font weights. Avoid using italics whenever possible.

Gotham Thin

Gotham Thin

Gotham Extra Light

Gotham Extra Light

Gotham Light

Gotham Light

Gotham Book

Gotham Book

Gotham Medium

Gotham Medium

Gotham Bold

Gotham Bold

Gotham Black

Gotham Black

Gotham Ultra

Gotham Ultra

Sizes and styles

We use Framer for our web design, and in framer we have and use these predefined styles.

Display 1

Display 2

Title A

Title B

Title C

Heading

Subheading

Body

Icons

We primarily use the Phosphor iconset, and Iconoir as a secondary source.

Buttons

The MAGFAST buttons

Primary

Primary

Primary

Secondary

Secondary

Secondary

Disabled

Disabled

Disabled