Select Topic:

“When people use your brand name as a verb, that is remarkable.

Meg Whitman - quibi / proctor & gamble / Dropbox

A brand is a feature or set of features that distinguish one organisation from another. It refers to the overall experience a customer undergoes when interacting with a business — as a shopper, customer, social media follower, or mere passerby.

Brand guidelines

Basic guidelines for life. Well, not really life, but trof's life, sure.

Here we have our brand colours (and the right codes), how to use our colour, and how our basic typography styles and rules.

Colour and palettes

Brands are defined by their colours, and we are no different. Our colours must be consistent, there's no questions about it. Here's how you do it:

Main colours

Our main palette uses colour to bring a boldness to our brand, influenced by our passion for food & drink, and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits.

Salsa-ahhh
#ff3355
255, 56, 76
0, 78, 70, 0
Why So Blue-Berry?
#525ee0
82, 94, 224
65, 52, 0, 0
Grape Scott!
#b87ba4
184, 123, 164
0, 33, 11, 28
WKD
#6cddf3
108, 221, 243
56, 9, 0, 5
Bad Lime
#4fdea2
79, 222, 162
64, 0, 27, 13

Secondary Colours

Our secondary palette contains a variety of colors to keep things fresh and interesting. We lean on these colors more frequently when brand awareness is high, or on our own properties where we control the surrounding environment.

Fruit Twist
#f98a8a
Parma Violet
#bfaaff
Mac 'n' Cheeze
#ffc096
Cotton Candy
#ffb8e0
( ͠° ͟ʖ ͡°)
#fff691
Key Lime Pie
#C7F087

Neutrals

Neutral shades are used for layout and text hierarchy and on some buttons. Black is used for Titles and important layout components i.e., the navigation menu and footer.

WHite - #FFF / Smoke - #F3 / Gainsboro - #E0 / Gray web - #80 / Onyx - #3d / Jet - #29 / Our Black - #15

Gradients (Beta)

NOtE:

Not currently officially implemented in branding. This is for application testingand ideas.

Gradients are used as backgrounds for block sections, such as page headers or call-to-actions.

Gradients can be used for every colour in any palette, except the Neutrals palette. they should use the source shade and gradient to a light or darker version of the colour. Gradients should never, ever, ever mix colours.

Salsa Gradients
Salsa Gradients

Typography

Standards for typographic styles. Rules for uses, like bold and italics, when to use ampersands, and when to fear the emoji, both online and in print.

Headings & large texts

trof. provides a constrained set of typographic styles. These styles should be used to create a hierarchy of importance and draw the eye. Manrope 500 (Medium) is used for all headings except H6, which uses Roboto Mono.

Better. Faster. Cheaper.

LARGE HEADING — 60PX / 1.1 / -0.05em

Better. Faster. Cheaper.

H1 — 60PX / 1.1 / -0.05em

Better. Faster. Cheaper.

H2 — 38PX / 1.2 / -0.04em

Better. Faster. Cheaper.

H3 — 24PX / 1.3 / -0.04em

Better. Faster. Cheaper.

H4 — 20PX / 1.3 / -0.04em
Better. Faster. Cheaper.
H5 — 17PX / 1.3 / -0.04em
Better. Faster. Cheaper.
H5 — 17PX / 1.3 / -0.04em

Paragraphs & captions

All body copy uses Manrope 400. Captions use Roboto Mono 400.

Food is maybe the only universal thing that really has the power to bring everyone together; no matter what culture, everywhere around the world, people eat together. — Guy Fieri.

Paragraph Extra Large — 24PX / 1.5 / max-width of 650px

Food is maybe the only universal thing that really has the power to bring everyone together; no matter what culture, everywhere around the world, people eat together. — Guy Fieri.

Paragraph Large — 20PX / 1.6

Food is maybe the only universal thing that really has the power to bring everyone together; no matter what culture, everywhere around the world, people eat together. — Guy Fieri.

Paragraph — 17PX / 1.7

Food is maybe the only universal thing that really has the power to bring everyone together; no matter what culture, everywhere around the world, people eat together. — Guy Fieri.

Paragraph Small — 15PX / 1.6

Food is maybe the only universal thing that really has the power to bring everyone together; no matter what culture, everywhere around the world, people eat together. — Guy Fieri.

Paragraph Very small — 13PX / 1.6

Better. Faster Cheaper.

Caption — 10PX / 1.3

In use

There's dos and don'ts to type. To strengthen the consistency, follow the guides where possible.

THIS

All caps

Never use all-caps in body copy, unless:

  • You're using an acronym (note that file types are acronyms!)
  • You're employing the caption style noted for our level 6 headings (h6).

Instead, use bold or italics to indicate emphasis.

Example
NOTE: You need a connect a Stripe account to take orders.
&

Ampersand

We all love an ampersand, but there's a time and place. The ampersand is a ligature of the letters E and T, combined to form et, the Latin "and." You can use it as you will in navigational links, buttons, and headlines, but not in body copy, unless used in the specific phrase below:

Example
Order & pay.
<b></b>

Bold

Should only be used to create emphasis in certain UI elements like buttons, links. Avoid using it in body copy, use italics to create emphasis instead.

Example
FInd out why more people are using trof.
😊

Emoji

Emoji should be used to convey positive emotions in our communications via social posts, email, messages, and support tickets. We can also use hand gestures to direct users to a certain screen location, such as finger points and thumbs up.

Example emoji: 😄😊😉 😎

Do not use emoji for negative emotions at all, unless you know you and your audience share the emotion. For instance, on the day Gordon Ramsay dies, a 😢 would only be appropriate.

Example negative emoji: 😡😞😪

Example
Thanks so much for your message, let me check that out for you 😎
<i></i>

Italics

Use italics to add emphasis in running text, or to refer to most artworks.

Poems, songs, and article titles should be wrapped in quotation marks.

Example
I really love The Craft of Words, a book on microcopy originally published by Five Simple Steps.

Purpose & voice

Why we do what we do, how we do it, and how we tell people about it. The intricacies of how we get our message across & advanced type rules.

Foundations

Why we do what we do, how we do it, and how we tell people about it.

Purpose

What drives us, makes us tick, makes do what we do. Our mission and our pledge to the world should be the driving force behind every decision we make.

Our purpose

Ethical unification – through food & drink.

In today's market, the hospitality sector is hounded on one side by intangible forces in the wake of the pandemic, and on the other side by shareholders and opportunists wanting to make a quick buck.

We want to unite the consumer and the vendor in harmony, keep the food and drink flowing; safely, accessibly and affordably – eventually creating one unified platform that props up the hospitality industry.

Our promise

Lorum

In today's market, the hospitality sector is hounded on one side by intangible forces in the wake of the pandemic, and on the other side by shareholders and opportunists wanting to make a quick buck.

We want to unite the consumer and the vendor in harmony, keep the food and drink flowing; safely, accessibly and affordably – eventually creating one unified platform that props up the hospitality industry.

What sets us apart

We are for a purpose, not profits.

Matt needs to write a short, cool sounding quote, that's not technical or waffling and shows a bit of character.

Sell the dream.

Matt Smith - CHIEF technical officer & founder - trof

What we stand for

We are for a purpose, not profits.

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.

Voice

How content should sound and feel across the board, from marketing content to in-product messages, educational documents to tweets.

Our persona

The hipster Maître d'.

Our voice is that of the experienced Maître d', but the kind that works in Shoreditch... or the Northern Quarter; dresses cool, talks cool, but you know they know what they're doing.

We know how the industry works, but we don't need to brag about it. We're casually confident. We can empower and energise. But we don't forget who we are or where we came from, or sacrifice our individuality.

Our characteristics

Professional. Positive. Knowledgeable. Helpful.

Professional, but not square.

When it comes to our product, we’re confident and serious, but not stiff or distant. We care about our customers’ dreams and struggles. We’re not above sharing our excitement and cracking a joke now and again, especially on the blog and social media. Positive emoji and hilarious GIFs are right up our alley.

Positive, but to the point.

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.

Knowledgeable, but not picky.

We know the hospitality industry, and we’re ready to share that knowledge wherever and whenever we think it’s useful. We’ve always got an authoritative reference at our fingertips, and we’re happy to share it.

Helpful and supportive.

Everything from our product’s feature set to our content marketing should be designed not to sell people on us, but to give them something useful and empowering. Yeah, we want you to upgrade to advanced features when they're available, but only if it's right for you.

Naming guidelines

If you're going to type our brand or product names, then there ways to that, and ways you really shouldn't.

How we name stuff

When we name our products, it should be simple but effective.

Presenting the name online and in print should remain universal and follow certain rules.

Naming guidelines

When referring to our brand, our name should never be capitalised, and it is preferred that it is suffixed with a full-stop/period. Where possible it should be bolded.

When referring to our product, follow the same rule as above, but the identifying word should be capitalised.

Example

Once you've signed-up, download our trof. for Vendors app.

Huge thanks from everyone at Team trof.

Punctuation

When and how to use the various punctuation marks, including rules on serial commas and punctuation marks to avoid.

,

Comma

In lists of three or more items, use the Oxford, or serial, comma.

Example
trof. The Order & Pay Marketplace that's better, faster, and cheaper.
...

Ellipsis

Use to indicate omitted words in a quote or a pause in speech. Always insert a space before and after your ellipses. Please note that, although it may "look odd," ellipses are required whenever you omit portions of something someone actually said.

Example
"Before we started using trof. we had ... now it's much more efficient."

Em dash

Use an em dash with a space on each side to indicate an aside (like a parenthetical remark) or dramatic pause. Here's how to make one:

On mac — Press and hold Option + Shift + Hyphen

On Windows — Press Windows (⊞) + Period (.) and select the em dash from the Symbols keyboard.

Example
All you need to do is input your menu — let trof. take care of the rest.
!

Exclamation

People don't like being shouted at — only exclaim about stuff our users are really likely to be excited about.

In most cases, omitting the exclamation better conveys the professionalism of our brand.

Example
Table reservations are coming this week!
()

Parenthesis

You can use these for asides, but do so sparingly. In most cases, an em dash works as well and is less visually noisy.

If the parenthetical phrase is part of a sentence (like this one), the period goes after the closing parenthesis. (And if the parenthetical is its own sentence, place the period before the closing parenthesis.)

Example
He finally answered (after taking five minutes to think) that he did not understand the question.
.

Full-stop/period

Don’t use periods at the end of a headline unless it runs to 2 or more sentences. Otherwise, use as normal.

Part of "normal" includes only using one space after a period. Never two. That practice went the way of the typewriter. Or should.

Example
No-contact Order & Pay is the future of the hospitality industry. Browse, order and pay, directly from a smartphone.
" "

Quotation marks

Use quotation marks to indicate that you're quoting someone else, or as scare quotes: i.e., to indicate a sarcastic or skeptical take on a subject. E.g., Yeah, that's some real "blue sky thinking" there.

If you're only quoting a portion of a statement, the quoted material should not be capped, unless proper nouns appear in the quotation. If you're quoting one or more full sentences, use sentence case as normal. (See the example below.)

In most cases, you'll use double quotation marks — " " — but you'll want single marks — ' ' — for nested quotes. E.g., "He told me, 'responsive design is the future.'" In such uses, don't forget that the original double quotation mark still needs to be closed off.

If a quotation comes at the end of a sentence, be sure to place the final punctuation mark inside the quotation marks, not outside. The only exception is when you're using expressive punctuation that wasn't part of the original statement. E.g., He told me "responsive design is the future"!

Quotation marks should not be used with block quotes.

Example
When asked about the future of eating out, Leonardo said, "It's all about 'order & pay applications.' That's the future."
;

Semicolon

Don't. If you’re tempted to use a semicolon, just start a new sentence.

The one acceptable use of a semicolon is in a list of three or more items where one or more items need a comma. See the example below.

Example
Build beautiful, dynamic menus without cost; go live with a click, and manage content right from the app.

Logos

We're not gonna stop you using our logo, in fact we encourage it! Download them, use them where you use logos. But there's some rules y'know... no putting it upside down, stretching it, or doing anything else weird.

trof. Logo Black
SVG, PNG
trof. Logo White
SVG, PNG
trof. Logo Red
SVG, PNG
trof. Icons Black
SVG, PNG
trof. icons white
SVG, PNG
trof. icons red
SVG, PNG

Images

These are some of the images we use in our content of some people having a very lovely meal and a wonderful time. But you've gotta ask to use them first... y'know, copyright and all that.

Image 1
Image 2
Image 3

Fonts

Make the words pretty.

Manrope
Manrope
Roboto
Roboto Mono

Socials

Social Media is our means of communicating. That's how we are discovered, grow, and interact with the world.

What's the rule again? ... Consistency, that's right!

Profiles

Our image should be consistent across all platforms

Facebook

Facebook profile

Posts

These are some of the images we use in our content of some people having a very lovely meal and a wonderful time. But you've gotta ask to use them first... y'know, copyright and all that.

Image 1
Image 2
Image 3

Fonts

Make the words pretty.

Manrope
Manrope
Roboto
Roboto Mono