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
Poppins Medium 65pt
Leading: 110%
Tracking: - 3%
Poppins Regular 48 pt
Leading: 110%
Tracking: 0%
Poppins Regular 38 pt
Leading: 110%
Tracking: -0.42px%
Poppins Regular 24 pt
Leading: 140%
Tracking: 0%
Roboto Mono 14.15 pt
Capitalization: AA
Leading: 100%
Tracking: 15%
Poppins Regular 14.15 pt
Leading: 170%
Tracking: 0%
Poppins Regular 13 pt
Leading: 140%
Tracking: 0%
Poppins Medium 14 pt
Leading: 140%
Tracking: -0.28px
Poppins Regular 14 pt
Leading: 140%
Tracking: -0.56px
Buttons
Poppins Medium 17pts
Fill: #CD2610
Stroke: #C4B9B9
Details: Shadow
Tertiary Button (For CTA)
Roboto Mono Bold
Capitalization: AA
Details: Underline
Fill: #333333
Icon Stroke: #FFFFFF
Thickness: 2.19
Iconography
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
Fill: #FFFFFF
Details: Drop Shadow
Do’s and don’t
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.
Don't skip capitalization or remove elements.
For gradient usage, the authorized ones are the red radial on a black BG and the red MLP to darker red.
.png)
Avoid using red-black gradients.
.png)
To emphasize the most important section headings, using black for key words and red for general text is allowed.
.png)
Avoid using red for the entire quote, unless the whole sentence needs to grab the user's attention.
.png)
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.
.png)
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
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.
This is some text inside of a div block.
Highlights
To emphasize the most important section headings, using black for key words and red for general text.
.png)
Form Boxes
When creating forms:
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
%20(1).png)
.png)
.png)
%20(1).png)
%20(1).png)
.png)
.png)
.png)
.png)
.png)
.svg)
.svg)
