“When people use your brand name as a verb, that is remarkable.”
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.
#ff3355
255, 56, 76
0, 78, 70, 0
#525ee0
82, 94, 224
65, 52, 0, 0
#b87ba4
184, 123, 164
0, 33, 11, 28
#6cddf3
108, 221, 243
56, 9, 0, 5
#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.
#f98a8a
#bfaaff
#ffc096
#ffb8e0
#fff691
#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.
Gradients (Beta)
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.
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.
Better. Faster. Cheaper.
Better. Faster. Cheaper.
Better. Faster. Cheaper.
Better. Faster. Cheaper.
Better. Faster. Cheaper.
Better. Faster. Cheaper.
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.
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.
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.
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.
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.
Better. Faster Cheaper.
In use
There's dos and don'ts to type. To strengthen the consistency, follow the guides where possible.
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.
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:
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.
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: 😡😞😪
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.
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.
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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 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.