Summary
Text Suggestions
Font Size
Current website: Title font size (average 29.33px, most frequent 24px) Body font size (average 16.00px, most frequent 16px)
Guidelines: Body fonts should be 16px or above. Title fonts should be 20px or above. Do not use too many font sizes - about 4 font sizes total is recommended (title, default, secondary, wildcard). (link, link, link)
Font Family
Current website: Title font family (Helvetica Neue) Body font family (Helvetica Neue)
Guidelines: Limit the number of font families to a minimum. Sans-serif fonts are generally considered more legible than Serif fonts. Decorative and narrow fonts should be used for headlines and decorative texts only. (link, link, link)
Line Length
Guidelines: The optimal line length for body text is 50–75 characters. Avoid line breaks in title texts. (link, link, link)
Layout Suggestions
Margin & Padding
Current website: Padding (average 24.00, max 32.00) Margin (average 18.17, max 25.96)
Guidelines: Containing elements needs at least 24px of padding. Most UI Elements should have a minimum of 8px of margin between them. You can increase by multiple of 8 (8, 16, 24). (link, link)
Alignment
Guidelines: Close elements should be aligned according to their edges or central axis (horizontal or vertical). Long text should be left-aligned. Center is for shorter texts, e.g. headlines. Never center align bullet texts. Center-aligning icons or images can help soothe the differences of their dimensions. (link, link, link)
Color Suggestions
General Color
Current website: The color palette used in the website primarily consists of white, black, grey, orange, and blue. The background colors are bold and vibrant, while the text colors are more neutral.Text color (White (rgb(255, 255, 255)) is used for 'a' and 'header' elements. Black (rgb(0, 0, 0)) is used for 'h1-title', 'p', 'p-quote'. Grey (rgb(119, 119, 119)) is used for 'p-metadata' and dark grey (rgb(51, 51, 51)) for 'h2-section-header'.) Background (The body of the website has a vibrant orange (rgb(255, 165, 0)). The header has a bold blue (rgb(0, 153, 204)) and the 'div-cta-box' has a light grey (rgb(242, 242, 242)).) Border (No specific colors are used for borders.)
Guidelines: Limit the number of colors used for consistency. Choose harmonious colors. Avoid using high-saturated background colors. (link, link)
Font Color
Guidelines: Provide ample Lightness contrast between text and background. (link, link)