Brand Guidelines
The following guidelines ensure a consistent and recognizable brand across all NodeDa communications and platforms, helping us build a strong presence in the digital marketplace.
Welcome
These brand guidelines are designed to ensure a consistent look and tone through all of our communications. The following pages will help you understand our brand, what it stands for and how to express it the best possible way.
Brand Usage Policy
Authorization Required: The use of NodeDa's brand assets, including logos, images, and other brand elements, requires explicit written authorization from NodeDa. Unauthorized use of these assets is strictly prohibited. Please contact our team to request permission for any intended use of our brand materials.
Our Logo
Primary Logo
Logo Usage Guidelines
On dark backgrounds, use the white (monochromatic) logo variant. For light backgrounds, use the black logo variant. For branded materials, the logo on our primary blue background is preferred.
Correct usage on dark background
Correct usage on light background
Correct usage on brand blue
What Not to Do
Don't use white logo on light backgrounds
Don't use black logo on dark backgrounds
Don't stretch or distort the logo
Minimum Clear Space
The safety area safeguards the logo, ensuring that it is not compromised or encroached upon by any external elements or surrounding expressions.
Secondary Logos
Our division logos are meticulously crafted representations, each tailored to encapsulate the distinct identity and objectives of the various divisions within our organization.
Brand Colors
Our color palette is designed to create a cohesive and professional brand identity. The primary blue represents trust and innovation, while our supporting colors add depth and versatility.
Primary Colors
Primary Blue
Dark Blue
Light Blue
Accent Colors
Success Green
Error Red
Warning Yellow
Neutral Colors
Dark Gray
Medium Gray
Light Gray
Color Usage Guidelines
- Use the primary blue (#3993C5) for main brand elements, CTAs, and key UI components
- Apply dark blue (#2B6B94) for hover states and secondary elements
- Utilize light blue (#4BA8D9) for backgrounds and subtle highlights
- Reserve accent colors for specific purposes: green for success, red for errors, yellow for warnings
- Use neutral colors for text, borders, and subtle UI elements
Typography
Our typography system is designed for optimal readability and accessibility, featuring Poppins as our primary font and OpenDyslexic as an alternative for improved readability.
Primary Font
Used for all primary text elements, including headings, body text, and UI components.
Alternative Font
Available as an alternative to Poppins for improved readability. This font is specifically designed to help readers with dyslexia by using unique letter shapes and weighted bottoms to indicate direction.
Code Font
Used exclusively for code blocks and technical documentation.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text
This is the standard body text. It uses Poppins Regular at 1rem (16px) with a line height of 1.7 for optimal readability. The text color is a dark gray (#4A5568) to maintain good contrast while being easier on the eyes than pure black.
This is caption text, used for supplementary information and small labels. It's slightly smaller and lighter than the body text.
Special Text Styles
This is a quote block. It uses a slightly larger font size and includes a vertical accent bar on the left side in our primary brand color.
const greeting = "Hello, World!";Typography Usage Guidelines
- Use Poppins as the primary font for all text elements unless specifically required to use OpenDyslexic.
- OpenDyslexic should be used when accessibility is a priority or when users have indicated a preference for it.
- Maintain consistent font sizes and weights across similar elements.
- Ensure sufficient contrast between text and background colors.
- Use appropriate line heights for optimal readability (1.7 for body text, 1.2 for headings).
- Keep line lengths between 50-75 characters for optimal readability.