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)

Example website: Title font size (average 24.55px, most frequent 30px) Body font size (average 17.23px, most frequent 16px)

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)

Example website: Title font family (Plus Jakarta Sans, Inter) Body font family (Inter, Plus Jakarta Sans)

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)

Example website: Padding (average 23.23, max 96) Margin (average 18.38, max 44)

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)

Example website: The website has a professional and clean feel with its dominant color scheme of dark grays, blues, and whites.Text color (dark gray rgb(17, 17, 17), dark slate blue rgb(51, 65, 85), slate gray rgb(71, 85, 105)) Background (light steel blue rgb(226, 232, 240), white smoke rgb(241, 245, 249), white rgb(255, 255, 255)) Border (gainsboro rgb(229, 231, 235), medium blue rgb(37, 99, 235), light steel blue rgb(226, 232, 240))

Font Color

Guidelines: Provide ample Lightness contrast between text and background. (link, link)