NAEMSP Design System

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.


Using brand colors establishes visual consistency, reinforces brand recognition, and fosters a strong and cohesive identity, enhancing trust and recognition.









Using brand fonts ensures a consistent and recognizable typographic identity, reinforcing your brand’s visual cohesion and enhancing its professionalism.

Roboto Slab - Headings


Work Sans - Body



H1 – Robot Slab – 48px

H2 – Roboto Slab – 32px

H3 – Robot Slabo – 24px

H4 – Roboto Slab – 16px

Body copy – Work Sans – 16px


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.


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.


Employ italics, bold, or underlining sparingly to emphasize specific words or phrases. These styling elements draw attention to crucial points.


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.


Maintain a consistent text hierarchy throughout your design to create a structured and harmonious reading experience.


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.

Using Images



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


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.

Scroll to Top