Frontrunner is the epitome of visionary storytelling, going beyond traditional methods to create narratives that truly resonate.
Our logo, featuring a runner, embodies our commitment to momentum and progress. Our approach is marked by three core elements: arrows and pathways symbolizing progress and direction, brackets providing structure and emphasis, and eye-opening expansion fostering growth and exploration.
Frontrunner propels visionaries forward, shaping the future one compelling narrative at a time.
Brand Resources
One stop shop to download logos, photos, fonts, and more. Need anything that's not here? Write to hello@become.team
Brand Concept Note:
Logos
Light Background
Dark Background
Transparent Background
Black and White Logo
Fonts
Let developers and designers download source files in no time.
Guidelines
Our design system helps us work together to build a great experience for all employees.
Typography
Our design system helps us work together to build a great experience for all of your communication touchpoints. Setting a global typography for the brand helps in scalability and consistency.
1. Outfit
Outfit is a beautiful geometric sans which is inspired by the ligature-rich outfit wordmark. Outfit is versatile typeface that is useful for headlines and general display work and for small quantities of text, editorial and advertising
2. Caveat
Caveat is a handwriting type family designed by Pablo Impallari. It is designed for both short annotations and body text usage. The fonts have OpenType features that enable the letters to have slight variations according to their occurrence within a word, for a natural handwritten feel. This font can be utilized as an accent font.
Size Guideline
Frontrunner provides a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used. Don’t use units for line-heights. Keep it unitless
Start with typography.
H1 / 64PX / 1.3 EM
Start with typography.
H2 / 48PX / 1.3 EM
Start with typography.
H3 / 38PX / 1.3 EM
Start with typography.
H4 / 30PX / 1.3 EM
Paragraph Text Styles
Here is a dummy text for your next headline. Paragraph Text Styles in this font and this size make everything more legible.
P1/ 26PX / 1.8 EM
Here is a dummy text for your next headline. Paragraph Text Styles in this font and this size make everything more legible.
P2/ 22PX / 1.8 EM
Here is a dummy text for your next headline. Paragraph Text Styles in this font and this size make everything more legible.
P3/ 18PX / 1.8 EM
Here is a dummy text for your next headline. Paragraph Text Styles in this font and this size make everything more legible.
P4/ 16PX / 1.8 EM
Accent Text Styles
P1/ 26PX / 1.8 EM
Accent Text Styles
Color
There's nothing better than using a global color scheme across the brand. The color scheme leverage brand recognition and marks our vibrant presence.
Primary Colors
Our primary color palette consists of three hues and multiple tones. Gun Metal and Half Dutch White are four of the brand’s iconic primary colours factoring 50% in terms of application. Use the tones sparingly as and when required to stand out in comparison to the parent colors.
Gun Metal
HEX: #2C333E
RGB: 44, 51, 62
HEX: #2C333E
RGB: 44, 51, 62
Gun Metal
HEX: #2C333E
RGB: 44, 51, 62
HEX: #2C333E
RGB: 44, 51, 62
Secondary Colors
The secondary palette consist of two foundational colors representing dark and lite that accomodates and goes along with the primary colors
Key Lime
HEX: #E8F9D
RGB: 232, 255, 157
HEX: #E8F9D
RGB: 232, 255, 157
Peach Puff
HEX: #FFD4C6
RGB: 255, 212, 198
HEX: #FFD4C6
RGB: 255, 212, 198
Logo Usage
There's nothing better than using a global color scheme across the brand. The color scheme leverage brand recognition and marks our vibrant presence.
Exclusion Zone
When placing the formal logo, be sure that other text and graphic elements do not encroach on it. When visual elements are placed too close to the logo, it can lead to a congested unpleasant appeal and also might create confusion. In order to let the logo breath , it should be surrounded with clear space to ensure its visibility and impact.
The height of the letter ‘O’ in the wordmark should be respected as the minimum distance from all sides of the logos as well as the monograms, to any other objects or margins in the composition.
The height of the letter ‘O’ in the wordmark should be respected as the minimum distance from all sides of the logos as well as the monograms, to any other objects or margins in the composition.
Proper Application of Logo: DOs
Always use the Frontrunner’s dark logo on lighter Imagery/ lighter parts of the Imagery to maintain thecontrast level
Always use the Frontrunner’s Light logo on darker imagery/ darker parts of the Imagery to maintain thecontrast level
Always use the correct logo + background pairing to maintain the contrast level.
Always maintain a minimum area of the exclusion zone around the logo to maintain design hygiene and legibility.
Logo Misuse: DON’Ts
Some of the examples of most likely misuses of identity are shown below. It’s imperative that the brand identity is consistent across all touchpoints at all times. To avoid these, always use the provided identity from here without any modification.
❌ Do not keep a low contrast between the image and thecolor of the logo.
❌ Do not stretch, squeeze, rotate or distort any part of the logo.Always scale uniformly.
❌ Do not change the typeface within the wordmark.
❌ Do not change the colors of the logo randomly
❌ Do not alter the components of the logo
❌ Do not add any effects to the logo.
Text Usage: DOs
Always follow the right pairing of fonts and sizes, to be mindful of legibility
Use only light coloured backgrounds for applications that are text heavy
Text Usage: DON’Ts
❌ Do not write text over any supporting graphic elements
❌ Do not interchange accent fonts, header fonts and body fonts
❌ Do not overlap text with the exclusion zone of logos/monograms. Do not use darker backgrounds with text heavy applications.
❌ Prioritize colour contrast of the text based on the importance it has on the application. Do not use too many text colours on the same application.
Proper Application of Images: DOs & DONTs
Intense pictures of people running for some of the marketing material might be interesting
More traditional images that you think of when the words ‘pitch’ and ‘invest’ are thought of - might be a bit boring
This idea is a bit out there - I thought we could use a pitch (stadiums are also known as) as a metaphor for the tough, griity game that securing funding is
