Welcome to the Citizen
Brand Portal
*This is just an example brand guide*
Since you are viewing this guide and reading these words, we’re trusting you with our very identity: our brand.
We care about growing our business. The following pages are full of guidelines, rules, and handy tips that we hope will help you communicate our values, realize our vision, and reinforce our brand.
It is impossible to predict every situation, brand execution, or implementation, but this guide will help refine your approach.
Intent of this guide
This style guide is a reference for our internal design team, vendors, and others who are authorized to work with the brand.
The standards, guidelines, and references within this document are grounded in the years of research, experimentation, and brand executions that have preceded our new brand look and feel.
What we strive for is a coordinated, consistent, and effective brand presence in everything we create. If we make something, we want to make sure that people know where it came from.
Instead, the focus of this guide is to empower you, the creative, with the elements you need to create. By utilizing these tools, resources, and adhering to the guidelines within, you’ll make things that look like the brand, every time.
Please refer back to this guide often. We believe that our style guide is a living document. It should evolve over time, just as our brand inevitably will.
Brand Strategy
This strategy is your reference to how the brand thinks, speaks and expresses itself.
Your brand is a living, breathing entity that will grow and change overtime, but your strategy gives it a soul and core that will stick with it forever.
Our Story
Our Story
We know good stories start with great food. But with a field of options, it can be difficult to know which beef will be the best for you and your friends. We make your choice easy by offering grass-fed, organic protein for the conscientious citizen, as well as highly-marbled beef that any host would be proud to serve. All our products meet the highest international standards for quality and animal welfare, so you never have to worry about where they come from. It’s time to stop stressing about the research and start creating the stories you’ll be telling for years to come. Become a beef expert and awaken your inner carnesseur.
Brand Positioning
Mission Statement
To provide you with certainty that the beef you choose will support a lifestyle you can be proud of.
What
Thoughtfully sourced and curated premium beef products for a health- and quality-conscious Citizen.
How
By holding ourselves and our beef to the highest standards, and sharing our expertise so customers feel confident enjoying our beef with others.
Why
Because food with friends makes the best stories, and our customers should be confident that the quality of their beef will enrich the memories they make.
Value Proposition
Providing more than excellent beef, with transparency and certainty.
Core Values:
- Consistency
- Knowledge
- Excellence
- Accessibility
- Integrity
Differentiator
We know picking the best meat can be overwhelming. That’s why we help you become a carnesseur, ready to make stress in the meat case a thing of the past.
Brand Experience
Promised Experience: Certainty
A confident certainty that customers are truly choosing quality beef that will enrich their gatherings and elevate their plates.
Perception
Personality: Chris Hemsworth
A warm, magnetic personality that makes you feel like you’re always welcome. Talented, fit, humble, fun-loving, and inspires everyone around him to enjoy life in a similar way. Trustworthiness that makes you feel like you could go to him for guidance. Easy connection that makes you feel like you can swap stories and create new ones together. Suave, sophisticated energy that makes you feel like you’re in a higher social standing just by being around him.
Look & Feel:
- Friendly
- Sincere
- Conscientious
- Confident
Personas
A Millennial who wants meat they can trust health wise, environmentally, and socially.
Heather is 29 years old living in Evergreen, Colorado as a work from home mom. Her tech job allows her a higher disposable income that allows her to shop at top-tier grocery stores like Whole Foods and Publix. She keeps up with fashion and social trends and is often seen wearing high end athletic clothing like Lululemon. She feels overwhelmed when she goes to the store and sees so many beef options claiming to be grass-fed and organic. Being health conscious, she wants to be sure she’s picking the best option not only for herself, but also the animals and environment.
A Millennial or Gen-Xer who is a connoisseur.
Eric is 39 years old living in Pittsburgh, Pennsylvania working as a financial analyst. He has a nice home with a nice backyard where he loves having his buddies over for dinner. While he’d normally take the time to go to the butcher, the guys always get together last minute meaning Josh has to go to the store. He wants to serve his friends the best steaks and burgers but ends up spending way too much time deciding what to buy at the meat case. His friends already ask him for whiskey recommendations and he takes pride in being seen as a connoisseur. Being seen as a grill master among his friends is an ambition of his, if only he could find consistent, tasty, restaurant quality beef to cook for them.
A Gen-Zer who is socially and ethically conscious about the food choices they’re making.
Alex is 20 years old living in Orange County, California. He’s a college student who shops at mid-tier grocery stores like Kroger and Safeway. He has a part time job and mom and dad help him out with his grocery bill since he has some dietary restrictions. While it’s a bit more expensive, he needs to be sure his beef is truly organic and grass-fed. He’s more wary of marketing claims, but doesn’t want to have to do the research, and ends up buying poultry instead. While his choices are for his personal health, he does want the social clout of being seen as environmental friendly, and is more likely to share the brand on his social media accounts.
Archetype
The Everyman
The Everyman is also known as: The good ole boy, regular guy/gal, the person next door, the realist, the working stiff, the solid citizen, the good neighbor, the silent majority.
Values:
- Motto: "All men and women are equal"
- Core Desire: connecting with others
- Goal: to belong
- Strategy: develop ordinary solid virtues
- Talent: realism, empathy, lack of pretense
Voice & Tone
We are boldly ourselves, but not brash, and put people at ease with our thoughtful, familiar tone. We use approachable but educated language because your beef buying experience should leave you feeling confident that you’ve made a thoughtful choice.
Messaging
Elevator Pitch:
At Citizen, we make it easy to choose top-quality beef that you will always feel confident bringing to the cookout. We are proud beef experts and we are committed to passing our knowledge onto you. With us on your side, you can spend less time guessing and more time creating memories at home or around the grill.
Taglines:
Better Stories, Better Beef.
More than excellent beef.
Awaken the carnesseur.
Conquer the cookout
Become a beef expert
Headline Bank:
Starting with the food on your plate.
Life is full of choices, this one should be simple.
Good stories start with great food.
More time for memories, less time at the store.
Beef worth talking about
Beef you can gather around
No more Stress in the meat case.
Brand Identity
A guide to the Brand assets and visual specifications
Badges
Minimum height for the icons is .75” for print and 50px for digital applications.
Illustrations & Patterns
Colors
Navy
Orange
Cream
Green
Blue
Yellow
Typography
Fonts
Type Example
Type Scaling
Headings
Paragraphs & Body Copy
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.
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.
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.
The Six Type Commandments
01 – Stay Left Aligned, Rag Right
Legibility and clarity are vitally important to great typographical layouts. Since most people read from left to right, we should align our type accordingly. And besides, we’re a little off-center as a brand anyway.
02 – Skip Weights & Double Size
Contrast is the name of the game when it comes to great design. When in doubt, skip a weight when pairing two weights, and double the size between two text elements.
03 – Align X-Heights or Baselines
Whenever you place text next to each other, either align the baselines(the line that the bottom of a lowercase x sits on) or align the x-heights (the top of a lowercase x). This helps align each line visually
04 – Watch the Rag
When setting paragraphs, keep an eye on the right (ragged)edge. If the rag unintentionally creates a recognizable shape, consider tweaking the language or resizing the container.Also, try to prevent single-word lines (orphans).
05 – Give Things Space, If Needed
Negative space, or the space around elements is vitally important. That being said, if informational elements belong together, move them closer together. use grouping wisely:just try not to cram too many things in one space!
06 – Keep Line Length Reasonable
It is easy for the user to get lost in long lines of text, and short ones are easily ignored. It’s best to keep lines between 45 and70 characters long, depending on the size of the font. This will ensure legibility as the font sizes increase or decrease.
Section Graphics
Images may be converted to section elements and used as background textures to add visual interest to layouts. You may use section elements already created (see the following page) or create new ones by following the outlined steps.These section elements may be used with any brand color as the background but should be used in lower opacities.
How to make the graphics:
1. Open image in photoshop and convert it to black and white
2. Using a “levels” filter adjust the settings to achieve a strong contrast
3. In the “channels” window, select the channel with the highest contrast and right click > duplicate the channel. Create another “levels” adjustment if necessary, then invert the selection so the subject is highlighted in white.
4. Select the subject by holding ctrl or Cmd + clicking on the layer thumbnail. With the subject selected, create a new solid black layer using the channel mask.
5. With the newly created layer selected, rasterize the layer and apply the layer mask. Then run the “TGTS-Atomica” action in photoshop and adjust settings to achieve the desired printed effect.
This photoshop action can be downloaded here
6. Export this layer as a transparent .png and utilize this image as a background element at a low opacity (between 10 - 40%)with the blending mode set to multiply.
Pre-made Section graphics:
Photography
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.
HTML Heading Tags
HTML tags define default Heading styles.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Heading Styles
Heading classes when typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Other HTML Tags
HTML tags define default text styles.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
Text Alignments
Buttons
Button combo class system.
Colors
Manage recurring text and background colors.
Text Colors
Background Colors
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].