Designing at For Others
This style guide was created for For Others employees, but we hope it’s helpful for other content and communications teams too.
Design Goals and Principles
With every piece of content we design, we aim to:
-
Restore. Help readers feel restored by using visuals that encourage them to make the most out of the aid, services, or products that For Others provides, and lifts them up towards a brighter future.
-
Respect. Treat viewers with the respect they deserve. Put yourself in their shoes, and create art that you would want to see. Remember that they have personal experiences and possible trauma that no one else has. Be considerate and inclusive. Don’t market at people; communicate with them.
-
Educate. Show viewers what they need to know, not just what we want to make. Give them the exact information they need. Don't create just because it's pretty. Create with a purpose. Remember that you’re the expert, and viewers don’t have access to everything you know.
-
Guide. Think of yourself as a tour guide for viewers. Whether you’re leading them through our website or an infographic, design like you’re in their journey with them, in a friendly and helpful way.
-
Provide hope. Understand For Others’ place in our viewer’ lives. We’re hopeful that they find salvation, restoration, and a safe and secure home, and we want to be part of what brings them there. But we don’t offer salvation, we can’t produce restoration, and we aren’t ourselves the safe and secure home that they need. Avoid grandiose claims to anything otherwise. Focus on our real strengths.
​
In order to achieve those goals, we make sure our visual content is:
-
Clear. Understand the topic you’re designing about. Use design to make complex concepts simple.
-
Useful. Before you start designing, ask yourself: What purpose does this serve? Who is going to look at it? What do they need to know?
-
Friendly. Design for regular humans, not board rooms or luxury brands. Don’t be afraid to break a few rules if it makes your designs more relatable. All of our content, from splashy homepage to system alerts, should be warm and human.
-
Appropriate. Design in a way that suits the situation. Just like you do in face-to-face conversations, adapt your design tone depending on who you’re designing to and what you’re creating.
Our Logo
Our logo is made up of two basic elements: an icon and a wordmark. The icon, referred to as the "arrows icon", features two arrows pointing outwards, mimicking our brand promise of focussing on others rather than self. Our wordmark is a simple rendering of our name. The icon should always appear to the left of the wordmark.
​
The wordmark is rendered in Oakes Grotesque Semibold with a tracking of 180. The icon may be used without the wordmark. The wordmark may not be used without the icon.
Great care and attention have been assigned to each design element within the logo. When using the For Others logo, don't rearrange or shift any of the elements within.
​
​
Icon + Wordmark
​
​
​
​

Our Colors
Another key to correct logo and brand application is color usage. Color is one of the most effective tools for establishing the visual identity of a brand. When reproducing the logo, use For Others Gray (#232323). If the primary gray is not an option, black is preferred.
​
Outside of the logo, Collective Beige and Restoration Yellow should be used selectively. White should also be a dominant color— complementing For Others Gray that points to the possible darkness of foster care and spiritual brokenness.
​
When reproducing the For Others primary colors in CMYK, RGB, or HEX (web-safe) values, use the formulas below.
​
A note: Some modifications may be necessary to achieve the desired results due to equipment variance when reproducing colors.
Colors​
​
​
​

Our Type
Type is immensely important. Not just which fonts you use, but how you manipulate them. For Others utilizes two main typefaces, and more will be added as the brand grows.
​
For Others' primary typeface is Oakes Grotesk.
​
​
OAKES GROTESK
Classification Sans Serif
Download Link https://www.youworkforthem.com/font/T7517/oakes-grotesk/
​
Oakes Font is a geometric sans serif font with smooth, smart lines. Samuel Oakes took the charge for designing it and releasing it for the first time in December 2016. Oakes Grotesk is a more corporate take on the Oakes typeface. It explores a set of brand new metrics that allow it to be more legible in body text as well as headings while maintaining the subtle curves of the Oakes typeface. We suggest utilizing Oakes as your primary typeface for titles, subtitles, simple headlines, and emphasis specifically when using all caps. In the FOR OTHERS logo, wording appears in all caps in Oakes Grotesk Bold at a wide kearning (180).
​
Oakes Grotesk Light
Oakes Grotesk Regular
Oakes Grotesk Semi-Bold
Oakes Grotesk Bold
​
Full Letter Set
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
01234567890
​
​
​
CALLUNA
Classification Serif
Download Link https://www.myfonts.com/fonts/exljbris/calluna/
​
Calluna is a serif font family. This typeface has eight styles and was published by exljbris Font Foundry. It balances robustness with function as a text face and has enough refinement to be used as a display font. We suggest using Calluna as a secondary face – subtitles and more importantly for body copy.
​
Calluna Light
Calluna Regular
Calluna Italic
​
Full Letter Set
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
01234567890
​
​
Our Photography Style
Cinematic, child-centric. Parents are secondary and often even cropped or obscured. Close up details and unique point of view (ie. child’s line of sight or view through a football helmet or looking down at the crowd from up on stage).
​
When using photos on social media, grain should be added. When multiple photos from multiple individuals are used, grain should be added.










Our Videography Style
Cinematic, child-centric. Parents are secondary and often even cropped or obscured. Close up details and unique point of view (ie. child’s line of sight or view through a football helmet or looking down at the crowd from up on stage).
​
Utilize shallow depth of field.
Place subjects on one of the 1/3's of the screen.
Do not cut off the top of an interviewee's head.
​
Color should be warm.
​
Grading should have high vibrance and low saturation.
​
​
Our Social Media Style
Social media images at For Others should always be formatted as a square or portrait design via aspect ratio. Posts should never be formatted at a landscape aspect ratio.



Our Secondary Branding