Headers

Heading 1 (h1)

Usage: Use for the main title on a page or as key headlines.

• Font Size: 40px (2.5rem / 30pt)
• Font Weight: Medium (500)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.2 (120% of the font size)
• Bottom Margin: 32px (2rem)
• Special Feature: A decorative underline (200px wide, 5px high) appears above the heading in Puerto Rico Green (#54C0B0)

Heading 2 (h2)

Usage: Use for introducing major sections of content.

• Font Size: 32px (2rem / 24pt)
• Font Weight: Medium (500)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.25 (125% of the font size)
• Bottom Margin: 28px (1.75rem)

Heading 3 (h3)

Usage: Use for breaking sections down into subsections.

• Font Size: 28px (1.75rem / 21pt)
• Font Weight: Normal (400)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.25 (125% of the font size)
• Bottom Margin: 24px (1.5rem)

Heading 4 (h4)

Usage: Use for smaller headings within subsections, often to emphasise or title specific points.

• Font Size: 24px (1.5rem / 18pt)
• Font Weight: Medium (500)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.25 (125% of the font size)
• Bottom Margin: 20px (1.25rem)

Heading 5 (h5)

Usage: Use for smaller headings or when introducing less significant subtopics. Can also be used as a 'Lead paragraph' under a heading.

• Font Size: 20px (1.25rem / 15pt)
• Font Weight: Medium (500)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.25 (125% of the font size)
• Bottom Margin: 16px (1rem)

Heading 6 (h6)

Usage: Use for the smallest headings, typically for detailed points or final subpoints.

• Font Size: 16px (1rem / 12pt)
• Font Weight: Medium (500)
• Colour: Prussian Blue (#003E5A)
• Line Height: 1.5 (150% of the font size)
• Bottom Margin: 12px (0.75rem)

Paragraphs

Lead Paragraphs

This is a leading paragraph. Lorem ipsum odor amet, consectetuer adipiscing elit. Ullamcorper enim faucibus ornare suspendisse volutpat. Enim malesuada pellentesque justo ad hendrerit efficitur. Mauris ligula mus inceptos tempus litora primis varius quisque sagittis.

Usage: Use for introductory text. It stands out from normal paragraphs and draws attention to the most important information.

• Font Size: 16px (1rem / 12pt)
• Font Weight: Bold (700)
• Colour: Black
• Line Height: 1.5 (150% of the font size)
• Bottom Margin: 12px (0.75rem)

Normal Paragraph

This is a normal paragraph. Lorem ipsum odor amet, consectetuer adipiscing elit. Ullamcorper enim faucibus ornare suspendisse volutpat. Enim malesuada pellentesque justo ad hendrerit efficitur. Mauris ligula mus inceptos tempus litora primis varius quisque sagittis.

Usage: Use for general content throughout the page. This is the standard paragraph style for body text.

• Font Size: 16px (1rem / 12pt)
• Font Weight: Normal (400)
• Colour: Black
• Line Height: 1.5 (150% of the font size)
• Bottom Margin: 16px (1rem)

Lists

Unordered List

Usage: Use for a list of items where the order doesn’t matter, such as features or options.

• First item
• Second item
  • Subitem 1
  • Subitem 2
• Third item

Ordered List

Usage: Use for lists where the order matters, such as steps in a process or ranking.

1. First item
2. Second item
3. Third item

                

:root {
    --base-font-family: 'Nunito', 'Nunito Sans', 'Roboto', 'Open Sans';
    --rdoc-font-family: 'Arial';
    --DXS-font-family: 'Helvetica', 'Arial', 'Sans-serif';
}

/* Headings */

    h1 {
        font-size: 2.5rem; /* 40px */
        color: var(--PrussianBlue);
        font-family: var(--heading-font-family);
        font-weight: 500;
        position: relative;
        text-transform: capitalize;
        line-height: 1.2;
        margin-bottom: 2rem; /* 32px */
    }
    h1::before {
        content: '';
        display: block;
        width: 200px;
        height: 5px;
        background-color: var(--PuertoRico);
        position: absolute;
        top: -20px;
        left: 0;
    }
    h2 {
        font-size: 2rem; /* 32px */
        color: var(--PrussianBlue);
        font-family: var(--heading-font-family);
        font-weight: 500;
        line-height: 1.25;
        margin-bottom: 1.75rem; /* 28px */
    }
    h3 {
        font-family: var(--heading-font-family);
        font-size: 1.75rem; /* 28px */
        color: var(--PrussianBlue);
        font-weight: 400;
        line-height: 1.25;
        margin-bottom: 1.5rem; /* 24px */
    }
    h4 {
        font-family: var(--heading-font-family);
        font-size: 1.5rem; /* 24px */
        color: var(--PrussianBlue);
        font-weight: 500;
        line-height: 1.25;
        margin-bottom: 1.25rem; /* 20px */
    }
    h5 {
        font-family: var(--heading-font-family);
        font-size: 1.25rem; /* 20px */
        color: var(--PrussianBlue);
        font-weight: 500;
        line-height: 1.25;
        margin-bottom: 1rem; /* 16px */
    }
    h6 {
        font-family: var(--heading-font-family);
        font-size: 1rem; /* 16px */
        color: var(--PrussianBlue);
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 0.75rem; /* 12px */
    }

/* Paragraphs */

        .lead-paragraph {
            font-size: 1rem;
            font-weight: bold;
            color: black;
            line-height: 1.5;
            margin-bottom: 12px;
        }

        p {
        font-size: 1rem;
        font-family: var(--base-font-family);
        color: var(--Black);
        line-height: 1.6;
        margin-bottom: 1rem;
        }

/*Lists*/   

    ul {
        font-size: 1rem;
        font-family: var(--base-font-family);
        line-height: 1.5;
    }
    ul li::marker {
        color: var(--PuertoRico);
    }
    /*First-level items*/
    ul > li {
        list-style-type: disc;
    }
    /* Second-level items */
    ul > li > ul > li {
        list-style-type: '-   ';
    }
    ol {
        font-size: 1rem;
        font-family: var(--base-font-family);
        line-height: 1.5;
    }