Brand Guidelines
Design principles
Clarity & Simplicity
Presenting complex data and analysis in a clear and easily understandable manner. Clean layouts, minimal visual elements an emphasis on typography and the right use of negative spacing help users with scanning for and digisting of complex information.
Intuitive Data Visualization
A crucial aspect in the future will be the emphasis on data visualization to help users understand patterns, trends, and relationships in our weather data. Thoughfull data visualizations, including infographs, (interactive) maps, graphs and charts help our users to grasp the information quickly into actionable insights for key decision making.
Trust & Transparency
As we offer a new AI-first approach as new company, we will need to earn trust. Therefore the design should emphasize trust and transparency in the AI-driven forecasting process. This can involve incorporating elements that explain the methodologies, data sources, and accuracy metrics, helping users understand and trust the forecasts provided by Beyond Weather.
With these three cornerstones in our design language the goal is to create an intuitive and accessible platform that enables users to make informed decisions, mitigate risks, and capitalize on opportunities based on accurate long-range weather forecasts powered by AI.
Typographic research
Neue Machina
- Neue Machina is a powerful and meticulously crafted typeface designed by Pangram Pangram Foundry, boasting geometric type features as well as apparent and deep ink traps for a distinct and bespoke identity.
- We choose Inktrap Regular as the default weight for headlines.
- It is inspired by the aesthetics of robotics and machines.
- The font's geometric design is inspired by the aesthetics of contemporary technology, with a perfect balance of organic and engineered forms.
- Its characters exhibit an innovative blend of sharp angles and smooth curves, which gives it a futuristic and cutting-edge appearance that resonates with the concept of AI and data-driven technology.
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
Why Neue Machina?
- Technological appeal: Neue Machina's futuristic design reflects the innovative nature of the company, showcasing its dedication to harnessing advanced technology in delivering accurate weather forecasts.
- Legibility: The font's high legibility and clarity make it easy for users to read and understand the presented data, facilitating informed decision-making.
- Versatility: If we need to, we can use the whole range of the family. The different weights and styles within the Neue Machina Collection allow for a wide range of design applications, from bold headlines to detailed data visualizations.
- Consistency: The consistent character widths in the monospaced version of the font ensure that data and numbers are aligned, making it easy for users to compare and analyze the information presented.
- Branding: The unique and recognizable design of Neue Machina helps create a strong visual identity, setting it apart from competitors and reinforcing its commitment to cutting-edge technology.
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
Neue Machina's futuristic design, legibility, and versatility make it a perfect fit for an AI-powered S2S weather forecasting startup. It not only reflects the technological innovation behind Beyond Weather's services but also ensures that the information is presented in a clear and easy-to-understand format for users.
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
Inter
We have chosen Inter as our font for paragraphs.
Inter is an open-source typeface designed by Rasmus Andersson with the aim of providing high legibility in digital interfaces. It is available in a wide range of weights and styles, making it highly adaptable to various use cases.
Inter's clean and modern design, alongside its technical and geometric appearance, makes it an ideal choice for a paragraph font.
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
The font is a perfect fit for the paragraph text for Beyond Weather for several reasons:
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
- Legibility: Inter is specifically designed for optimal readability on digital screens. Its distinguishable letterforms, open apertures, and balanced proportions make it easy to read, even in large blocks of text. This ensures that users can easily understand and process the information in the weather forecasts, allowing them to make informed decisions efficiently.
- Professionalism: Inter's sleek and modern appearance is a no-nonsense font that exudes professionalism, which is essential for a company that provides critical information to businesses. The font's unobtrusive and neutral design allows the content to shine, making it easy for users to focus on the data rather than be distracted by the aesthetics.
- Adaptability: Inter's wide range of weights and styles allows it to accommodate various formatting needs, making it easy to emphasize important information or create hierarchy within the content. This adaptability is crucial for presenting complex weather data in a clear and organized manner.
- Technical appeal: Given Beyond Weather's focus on AI and technology, Inter's geometric and technical qualities align well with the brand's image, reinforcing the message of innovation and cutting-edge solutions.
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
Inter complements Neue Machina for the following reasons:
Geometric design in the world of fonts refers to the use of basic geometric shapes, such as circles, squares, and triangles, to create the letterforms in a font. These geometric shapes can be manipulated and combined to create a wide range of letterforms, from simple and minimalist to complex and decorative.
Geometric fonts are characterized by their clean and simple lines, uniform stroke widths, and precise angles and curves. They often have a modern and futuristic look and are commonly used in branding, advertising, and digital design.
Some examples of popular geometric fonts include Futura, Avenir, and Gotham. These fonts have become iconic and are widely recognized for their distinctive geometric style.
- Visual harmony: Neue Machina is a geometric sans-serif typeface with a technical and futuristic appearance. This style is in harmony with Inter's aesthetic, creating a cohesive visual identity for the company.
- Contrast and hierarchy: The distinctive and bold nature of Neue Machina contrasts well with the clean and neutral appearance of Inter. This contrast helps establish a clear hierarchy between headlines and body text, guiding users through the content and making it easier to navigate.
- Brand reinforcement: Both typefaces emphasize the company's focus on technology, AI, and innovation. By using fonts with a similar visual language, Beyond Weather creates a strong and consistent brand identity that resonates with its target audience.
Color
To complement the design language and the chosen fonts we'll want to select primary and secondary colors that maintain the futuristic and innovative aesthetic while providing adequate contrast for usability. Within our brand icon we see a gradient that goes from blue to green (teal). We will use a shade of blue and a shade of teal for our accents, but make it fit the overall design language.
Primary Color: #007BFF
For the primary color we choose a shade of crisp blue, which is often associated with technology, innovation, and reliability. A vibrant and modern blue will create a visually appealing contrast with the darker text colors, enhancing readability on buttons and other interface elements.
Accent Color: #FF6D3A
For accents we choose a vibrant orange hue that adds warmth and energy to the cool and calming tones of the primary blue and secondary teal, creating a harmonious balance that captures attention when needed, while maintaining a sense of sophistication.
Secondary Color: #A0D7D9
For the secondary color, we opt for a more subdued, complementary hue that still maintains the modern and innovative aesthetic. A shade of teal works as a nice contrasting color when blue would not fit or give the wrong signal.
Why these colors fit our overall design principles
- Visual Hierarchy: The vibrant blue primary color creates a clear visual hierarchy by contrasting with the dark grey fonts. This ensures that important elements like call-to-actions, buttons, and links stand out, making it easy for users to interact with the interface and focus on essential information.
- Brand Perception: Blue is often associated with technology, innovation, and trustworthiness. Using blue as the primary color reinforces the company's commitment to providing accurate S2S weather forecasting services. This color helps create a strong, cohesive brand identity that resonates with the target audience.
- Balance and Harmony: The subdued teal secondary color complements the primary blue and dark grey fonts by providing a more subtle contrast. This color works well for less critical interface elements like secondary buttons, icons, or background accents. It is not meant for text, as it doesn't provide enough contrast (unless you create it). The secondary use of teal enables fexibility when needed, while maintaining the design's modern and innovative aesthetic and ensuring that the overall color scheme remains balanced and harmonious.
- Accessibility: Both the primary blue and secondary teal colors provide enough contrast with the dark grey fonts, ensuring that text remains legible and accessible for users with varying visual abilities. This is especially important for an enterprise-level product, where accessibility and ease of use are crucial factors.
- Emotional Connection: Colors evoke emotions and can influence the user experience. The combination of vibrant blue and subdued teal creates an inviting, professional, and futuristic atmosphere that aligns with the company's innovative nature. This color scheme establishes a positive emotional connection with users, making them more likely to trust and engage with the services.
Application
Typografie
Headlines & Body
The spectacle
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
SRKGU 01234
The quick brown fox
jumps over the lazy dog
Neue Machina
Inter
Headlines
H1
The spectacle before us was indeed sublime.
H2
The spectacle before us was indeed sublime.
H3
The spectacle before us was indeed sublime.
H4
The spectacle before us was indeed sublime.
H5
The spectacle before us was indeed sublime.
H6
The spectacle before us was indeed sublime.
Body
M
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
S
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
XS
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
Quotes
If you want to master something, teach it — Richard Feynman
If you wish to make an apple pie from scratch you must first invent the universe — Carl Sagan
Callouts
✌️
This is a callout. Sometimes you want to make something stand out or add important information. You can do that with callout cards. We add a some color as a background to draw attention and place text in them.
🎉
This is another callout. Sometimes you want to make something stand out or add important information. We add a some color as a background to draw attention and place text in them.
💡
This is also a callout. This one is a bit more minimalistic. Sometimes they are also nice to use. For example, to link to extra information.
Images
Once you start mixing text and image cards creatively, the whole narrative of the story changes. Suddenly, you're working in a new format. You can match them in width with the paragraph, or any other way to make the impact you aim for.
Photo by Sebastian Svenson / Unsplash
Photo by Fakurian Design / Unsplash
Toggles
What are Toggles for?
Toggles allow you to create collapsible sections of content which is a great way to make your content less overwhelming and easy to navigate. A common example is an FAQ section.
Accordion 2
Toggles allow you to create collapsible sections of content which is a great way to make your content less overwhelming and easy to navigate. A common example is an FAQ section.
Primairy
Hex #007BFF
CMYK 100 / 52 / 0 / 0
Accent
100%
75%
50%
25%
10%
Hex #FF6D3A
CMYK 0 / 57 / 77 / 0
Secondary
100%
75%
50%
25%
10%
Hex #A0C7D9
CMYK 26 / 8 / 0 / 15
Callout
#fbf3e3
#e7f5fb
#f0f0f0
Typography
Headlines
#1c1e21
Paragraph default
#474747
Paragraph light
#999999
Diapositive
The spectacle before us
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator.