Welcome to NAEMSP Design System!
Our design system is your gateway to a world of consistency, creativity, and seamless user experiences. Explore the guidelines, components, and principles that drive our design philosophy. Whether you’re a seasoned designer or just starting your journey, our design system is your trusted resource for crafting visually stunning and user-friendly digital experiences.
Color
Using brand colors establishes visual consistency, reinforces brand recognition, and fosters a strong and cohesive identity, enhancing trust and recognition.
Primary
#0075AB
#615C5A
#EC5821
Secondary
#61A9C7
#003953
Typography
Using brand fonts ensures a consistent and recognizable typographic identity, reinforcing your brand’s visual cohesion and enhancing its professionalism.
Roboto Slab - Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Work Sans - Body
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Style
H1 – Robot Slab – 48px
H2 – Roboto Slab – 32px
H3 – Robot Slabo – 24px
H4 – Roboto Slab – 16px
Body copy – Work Sans – 16px
Hierarchy
Text hierarchy is a fundamental aspect of design and content presentation, particularly in digital and print media. It involves the strategic organization of text elements to guide the reader’s eye, emphasize key information, and improve overall readability. Here are key principles to consider when utilizing text hierarchy:
Headings and Titles
Employ larger, bold fonts to distinguish headings and titles. These serve as signposts, guiding readers through the content’s structure and indicating key sections.
Subheadings
Use slightly smaller fonts or variations in styling to differentiate subheadings. Subheadings break down content into digestible chunks, helping readers navigate and understand the information.
Body Text
Standard body text should be legible and easy to read, typically in a regular or light font style. Maintaining a comfortable line spacing (leading) is essential for readability.
Emphasis
Employ italics, bold, or underlining sparingly to emphasize specific words or phrases. These styling elements draw attention to crucial points.
Color
Text color should align with the overall design while ensuring readability. Use color variations for links, quotes, or call-to-action elements.
Lists and Bullets
Utilize lists and bullet points to break up content, making it scannable and organized. These help convey information concisely.
White Space
Adequate spacing around text elements enhances readability and creates a visually pleasing layout. Pay attention to margins, padding, and line spacing.
Consistency
Maintain a consistent text hierarchy throughout your design to create a structured and harmonious reading experience.
EXAMPLE:
This is a H2 Heading
This is a H3 Heading
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
This is a H4 Heading
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Buttons & Links
Using Images
Size
To ensure design uniformity throughout the website, adhere to the prescribed pixel dimensions. Never upscale images beyond their original dimensions. Utilize the highest available resolution to maintain quality.
1920 x 1080 pixels – Heading images
896 x 504 pixels – 70% column span
640 x 360 pixels – 50% column span
384 x 216 pixels – 30% column span
Resolution
Use images with appropriate resolutions. For web use, a resolution of 72 DPI (dots per inch) is standard. Higher resolutions (e.g., 300 DPI) are suitable for print materials.
File Format
Choose the correct file format for the type of image. Use JPEG for photographs, PNG for images with transparency, and GIF for simple animations.
Image Content
Images should be directly related to the website’s content, purpose, or the specific page they are placed on. They must enhance or support the message or information being conveyed.
Whenever possible, use original images or those for which you hold the appropriate rights. If using stock photos or images from third-party sources, ensure that you have the necessary licenses or permissions.
Maintain a consistent visual style and theme for images throughout the website to create a cohesive and professional look.