Basic Guidelines for MLP Element Usage

Guidelines
Elements
Usage
Ensure consistency and clarity when integrating MLP elements into web design. Use defined colors, typography, and spacing to maintain visual harmony. 
February 20, 2025
Guidelines
Elements
Usage

Overview

The MLP element system creates a unified visual language for web design, ensuring consistency, clarity, and usability. It establishes key principles like typography, spacing, color usage, and component behavior to optimize the user experience across all interactions.

Heading

Level
Output
Characteristics
Heading Level 1

Heading level 1

Poppins Medium 65pt
Leading: 110%
Tracking: - 3%
Heading Level 2

Heading level 2

Poppins Regular 48 pt
Leading: 110%
Tracking: 0%
Heading Level 3

Heading level 3

Poppins Regular 38 pt
Leading: 110%
Tracking: -0.42px%
Heading Level 4

Heading level 4

Poppins Regular 24 pt
Leading: 140%
Tracking: 0%
Subtitle
Section
Subtitle Section
Roboto Mono 14.15 pt
Capitalization: AA
Leading: 100%
Tracking: 15%
Body Text
Body Text
Poppins Regular 14.15 pt
Leading: 170%
Tracking: 0%
Sub Body Text
Sub Body Text
Poppins Regular 13 pt
Leading: 140%
Tracking: 0%
Footer Titles
Poppins Medium 14 pt
Leading: 140%
Tracking: -0.28px
Footer Text
Poppins Regular 14 pt
Leading: 140%
Tracking: -0.56px

Buttons

Level
Rendered Output
Characteristics
Primary Button
Poppins Medium 17pts
Fill: #CD2610

Stroke: #C4B9B9
Details: Shadow
Secondary
Button
Roboto Mono Medium
Fill: #F4F4F4

Stroke: #FFFFFF
Details: Shadow
Tertiary Button (For CTA)

TAILORED WEB APP

Roboto Mono Bold
Capitalization: AA
Details: Underline
Directional Arrows
Fill: #DDE5ED (or #CD2610)
Icon Stroke: #FFFFFF
Thickness: 3
Show Button (Black and red BG)
Outside Circle Fill: #FFFFFF  21% opacity
Inside Circle Fill: #FFFFFF
Icon Stroke: #CD2610
Thickness: 2.1
Show/Hide Buttons
Fill: #333333
Icon Stroke: #FFFFFF
Thickness: 2.19

Iconography

Level
Rendered Output
Characteristics
Primary
Icons
Icon Stroke: #CD2610
Thickness: 2.5  Outline Stroke: #C4B9B9
Stroke: 3
Details: Inner white shadow Black Drop Shadow
Graphic Iconography (Style 01)
  • Dark background with a subtle gradient creating a soft 3D effect.

  • Interface elements, like buttons and statistic cards, use a lighter tone to create contrast.

  • Typography is minimalistic and small, featuring a clean sans-serif font in white and gray for clarity.

  • Icons are simple and monochromatic, using either light gray or red to ensure they stand out.
Graphic Iconography (Style 02)
  • Deep red background with a gradient creating a warm, refined 3D effect.
  • Interface elements, like text and cards, use a white tone to create contrast.
  • Typography is structured and modern, featuring a clean sans-serif font in soft white for balance.
  • Icons are minimalistic and monochromatic, used always in white tones to ensure they stand out.
3D Iconography (Using SkewDat)
  • Square boxes with curved edges, slightly skewed for a dynamic look.
  • Subtle shadows and background blur.

  • One side features a thicker borderline to create a sense of volume.
  • Borderlines use #E8E8E8 at 30% opacity
Technology
Icons
Fill: #FFFFFF
Details: Drop Shadow

Do’s and don’t

✅ Do This
❌ Don’t This
For tertiary buttons that indicate a Call to Action (CTA), the text should be capitalized, always underlined, and include an arrow on the right side.

TAILORED WEB APP

Don't skip capitalization or remove elements.

Tailored Web App

For gradient usage, the authorized ones are the red radial on a black BG and the red MLP to darker red.
Avoid using red-black gradients.
To emphasize the most important section headings, using black for key words and red for general text is allowed.
Avoid using red for the entire quote, unless the whole sentence needs to grab the user's attention.
The dots texture should be used on a white background, with opacity adjusted accordingly to create contrast. It can also be used on a red gradient, but the texture must have a white radial effect and opacity adjustment.
Don’t use the dots texture without opacity or with colors that create excessive contrast, making it impossible to coexist with text in the foreground.
The corner radius range oscillates between 15 and 30, with 20 being the most common.
Avoid using a corner radius above 30.

Fenced Code Block

To streamline your code formatting, use fenced code blocks. As a general guideline, the Python code bar should be filled with #000000, while the copy code icon should be marked in #CD2610. The general block background should be filled with #F4F4F4, with upper corners maintaining a 15px radius.

The text used for code should be Roboto Mono Medium, 15 pt, with 140% leading and 0% tracking. Accent codes should be filled with #CD2610, while the general code color should be #77777C.

Horizontal Rules

To create a horizontal rule, use a line vector with a stroke color of #DDE5ED and a thickness of 1. This rule can be used to separate paragraphs or bullet points, as shown in the example.

The Context of Digital Product Development

At MLP Software, we believe that an Agile approach to digital product development is the most efficient and flexible way to create software that truly meets user needs. Agile enables rapid response to evolving requirements, allowing for quick adjustments when necessary.

Horizontal Rule Best Practices

✅ Do This
❌ Don’t This
Use the rules to separate bullet points or paragraphs, and ensure the spacing is around 60 (between the line and the text).
Don’t use lines with different fill colors or thicknesses, especially darker or thicker ones.

Quotes

To create quotes, use the established quotation mark filled with color #DDE5ED. The title or primary sentence should be a Heading 2. The secondary sentence should be in body text. The quotation marks should start with the primary sentence and end with the secondary sentence.

Indicate the name as Heading 4, and the person’s role or company as Subheading 1.

Q We’ve seen a huge improvement.

Smarthost has completely changed the way we manage our properties. The automation is seamless, and we’ve seen a huge improvement in both operational efficiency and guest satisfaction. quo

Manager

Home2Share

Unordered Lists

To create an unordered list, use the established check mark (as shown in the example) in front of each line item.

The box should be filled with #DDE5ED, with a stroke thickness of 0.49 and a stroke color of #FFFFFF, including shadow details.The check mark should have a stroke color of #000000, a thickness of 1.61, and shadow details.

Robust security for data protection

Optimize operations and reduce errors.

Accessible from any device with a browser.

B2B & B2C eCommerce integration.

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

1. Robust security for data protection

2. Optimize operations and reduce errors.

3. Accessible from any device with a browser.

4. B2B & B2C eCommerce integration.

Links

To create a link, style it as a tertiary button for a CTA, but without the arrow at the bottom.

The text and line should be filled with #CD2610 and follow tertiary button characteristics: Roboto Mono Bold, no capitalization, and underlined.

Highlights

To emphasize the most important section headings, using black for key words and red for general text.

Form Boxes

When creating forms:

  • Background: Use #FFFFFF as the fill color.
  • Corner Radius: Set to 20px.
  • Primary Text: Follow Subheading 1 styling #4A4340.
  • Information Text Fields: Follow Sub-body text styling #77777C.
  • Information Boxes: Stroke and elements with a 1px stroke thickness,  with #77777C.
  • Buttons: Follow the Primary Button styling.