TinyEmail™

TinyEmail™

Brand Style Kit

A utility template to help us stay on-brand in our marketing, development, sales and support initiatives, content production and product development.

Primary

#22C07E

Accent

#FE7979

Secondary Accent

#387CFF

Dark Background

#232226

Light Background

#F1F2F6

colours

Brand colours

TinyEmail™ uses five main brand colours: 

font face & usage

Font: Poppins

Body font: Inter

Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the newcomers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.

chart, finance, business, analysis, enterprice_3

Feature Heading

An example with an icon box

Heading 1

This is Heading 2

This is heading 3

This is Heading 4

This is Heading 5
This is Heading 6
TExt Sizes

This is XXL Text

This is XL Text

This is Large Text

This is Medium Text

This is Small Text

Heading Sizes

XXL Heading

XL Heading

Large Heading

MEdium Heading

Small Heading

Logo

TinyEmail™ sports two version of brand representation through logotype and logomark.

Logotype

The logotype must always be written as TinyEmail–with the letters “T” and “E” capitalized and conjoined. 

 

TinyEmail is a registered trademark and must always be accompanied by the trademark “®” symbol upon first initialization on a written page.

 

The typeface is the brand font: Poppins and font-weight is “bold”.

Logomark (temp)

The TinyEmail logomark is currently in production and subject to change. 

Temporary graphic logo

Branding

The TinyEmail® branding uses logotype as the main form of branding combined with the trademark ™ symbol. Font face and font-weight must match the branding guidelines.

TinyEmail®

Illustrations

Illustrations theme guide.

Hand-drawn vector illustrations using primary colour, secondary and tertiary accent colours.

[This section uses the sk-dark-bg class]. The illustration theme is focused on expressing interaction and denoting actions that a user is expected to be engaged in while using the TinyEmail® product. 

chart, finance, business, analysis, enterprice_3

Feature Heading 3

An example with an icon box

representational

Representational illustrations.

Functional graphics that are accurate in expression but flexible in representation.

[This section uses the sk-dark-bg class]. All representational graphics must be functional in nature and give an accurate representation of the capabilities of the TinyEmail® product. 

wide, full, size, area, enterprice

Feature Heading 3

An example with an icon box

Buttons

Button Styles

The follow standardized buttons styles and button sizes are to be used for all customer-facing brand assets.

ACCENT BACKGROUND

Accent background

The accent background is used to distinguish key messaging and call-to-action segments of the web page. Alt-state buttons are to be used whenever accent backgrounds are used.
Forms

Contact Form Style

The default form style does not utilize labels but instead uses clearly legible placeholder text to denote form fields. Action button on forms must be of “large” size.

icons

Iconography

TinyEmail® iconography is currently in production. The icons used for branding and marketing is distinct from the product UI/UX and is intended for more visual enhancement and description purposes than user activity.

chart, finance, business, analysis, enterprice_3
setting, option, gear, configuration, enterprice
piggy, bank, finance, enterprice, save_3
complete, finish, done, ceklist, enterprice
chart, finance, business, analysis, enterprice_3
setting, option, gear, configuration, enterprice
piggy, bank, finance, enterprice, save_3
complete, finish, done, ceklist, enterprice
chart, finance, business, analysis, enterprice_3
setting, option, gear, configuration, enterprice
piggy, bank, finance, enterprice, save_3
complete, finish, done, ceklist, enterprice