Branding and colors

Theme Colors

Primary (Hot Orange) $primary #C63D06 .bg-primary
Secondary (Dark Green) $secondary #003F2E .bg-secondary
Black $black #000000 .bg-black
White $white #FFFFFF .bg-white
Navy Blue/ Dark Blue $navy-blue #00263D .bg-navy-blue
Sky Blue $sky-blue #4BD4E6 .bg-sky-blue
Bright/Lime Green $lime-green #7DCB78 .bg-lime-green
Warm Yellow $warm-yellow #F9E534 .bg-warm-yellow
Mint $mint #A9E6C7 .bg-mint
Success Cover $success-cover #EDF9F0 .bg-success-cover
Success $success #287D3C .bg-success
Warning Cover $warning-cover #FFF4EC .bg-warning-cover
Warning $warning #B95000 .bg-warning
Danger/Error Cover $error-cover #FEEFEF .bg-danger-cover
Danger/Error $danger #DA1414 .bg-danger
Info Cover $info-cover #EEF2FA .bg-info-cover
Info $info #2E5AAC .bg-info
Off White $off-white #ebe9e0 .bg-off-white

Other Colors

Light Gray #FFFDF9 $light
Web Lines #D9D9D9 $web-lines

Text Colors

Text Primary (Hot Orange) .text-primary
Text Secondary .text-secondary
Text White .text-white
Text Black .text-black
Text Navy Blue .text-navy-blue
Text Sky Blue .text-sky-blue
Text Success (Bright Green) .text-success
Text Warning (Warm Yellow) .text-warning
Text Mint .text-mint

Typography

h1 – Heading 1

Desktop(xl) – 38px/139.474% Desktop(lg) – 30px/140% Tablet(md) – 27px/140.741% Tablet/Mobile(sm) – 25px/144% Mobile(xs) – 22px/150%

h2 – Heading 2

Desktop(xl) – 30px/133.333% Desktop(lg) – 25px/140% Tablet(md) – 23px/143.478% Tablet/Mobile(sm) – 21px/157.143% Mobile(xs) – 19px/163.158%

h3 – Heading 3

Desktop(xl) – 22px/145.455% Desktop(lg) – 19px/152.632% Tablet(md) – 18px/155.556% Tablet/Mobile(sm) – 18px/155.556% Mobile(xs) – 17px/158.824%

h4 – Heading 4

Desktop(xl) – 16px/137.5% Desktop(lg) – 14px/135.714% Tablet(md) – 14px/135.714% Tablet/Mobile(sm) – 14px/135.714% Mobile(xs) – 13px/138.462%

h5 – Heading 5

All divces – 14px/142.857%

.s1 – Heading s1

Desktop(xl) – 46px/136.957% Desktop(lg) – 40px/137.5% Tablet(md) – 37px/140.541% Tablet/Mobile(sm) – 35px/142.857% Mobile(xs) – 32px/150%

.p1 – Paragraph 1

Desktop(xl) – 17px/158.824% Tablet/Mobile(sm) – 16px/156.25% Mobile(xs) – 16px/156.25%

.p2 – Paragraph 2

Desktop(xl) – 13px/153.846%

.p3 – Paragraph 3

Desktop(xl) – 12px/208.333%

.p4 – Paragraph 4

Desktop(xl) – 11px/154.545%

.p5 – Paragraph 5

Desktop(xl) – 14px/121.429%

.eyebrow-1 – Eyebrow 1

Desktop(xl) – 10px/210%


Inline text elements

You can use the mark tag to highlight text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as no longer accurate.

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text will render as underlined

<p><u>This line of text will render as underlined</u></p>

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text.

<p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

<p><em>This line rendered as italicized text.</em></p>

Lists
  • Engage with government and community partners to identify high-priority opportunities to address local needs and racial equity.
  • Design scopes of work with clearly articulated goals for executive fellows to pursue while they are embedded full-time for at least 12-months at the senior levels of local government agencies.
  • Ensure that all projects have plans for long-term, community-based sustainability of progress after the fellowships conclude.

Normal Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint oecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniaem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint oecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniaem.

Learn more about our model adipisicing

Icons

<i class="icon-enter"></i>
<i class="icon-check"></i>
<i class="icon-categories"></i>
<i class="icon-application"></i>
<i class="icon-arrow-left"></i>
<i class="icon-arrow-right"></i>
<i class="icon-back"></i>
<i class="icon-chart"></i>
<i class="icon-chevron-bottom"></i>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
<i class="icon-chevron-top"></i>
<i class="icon-close"></i>
<i class="icon-criteria"></i>
<i class="icon-download"></i>
<i class="icon-events"></i>
<i class="icon-external-link"></i>
<i class="icon-facebook"></i>
<i class="icon-fees"></i>
<i class="icon-initiatives"></i>
<i class="icon-insight"></i>
<i class="icon-instagram"></i>
<i class="icon-link"></i>
<i class="icon-linkedin"></i>
<i class="icon-location"></i>
<i class="icon-mail"></i>
<i class="icon-membership"></i>
<i class="icon-minus"></i>
<i class="icon-plus"></i>
<i class="icon-phone"></i>
<i class="icon-quote"></i>
<i class="icon-resources"></i>
<i class="icon-search"></i>
<i class="icon-sort-down"></i>
<i class="icon-sort-left"></i>
<i class="icon-sort-right"></i>
<i class="icon-sort-up"></i>
<i class="icon-stories"></i>
<i class="icon-twitter"></i>
<i class="icon-view"></i>
<i class="icon-triangle"></i>
<i class="icon-ham-burger"></i>
<i class="icon-cross"></i>
<i class="icon-mail-fill"></i>
<i class="icon-twitter-x"></i>

Reusable Components

Buttons

                                    
                                        <button type="button" class="btn btn-mint"><span>Mint</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-secondary"><span>Secondary</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-lime-green"><span>Lime Green</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-light"><span>Light</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-warm-yellow"><span>Warm Yellow</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-sky-blue"><span>Sky Blue</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-navy-blue"><span>Navy Blue</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-outline-secondary"><span>Outline Secondary</span></button>
                                    
                                
                                    
                                        <button type="button" class="btn btn-outline-light"><span>Outline Light</span></button>
                                    
                                

Links

Learn more
                                    <a href="#" class="link-styled p1" title="title about the link">Learn more</a>
                                
Download full country plan PDF
                                    <a href="#" class="link-with-icon p1" title="title about the link">
    <i class="icon-download"></i>
    <span>Download full country plan PDF</span>
</a>

Accordion

This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Form Control

Default form

Few Notes:

  • Adjusted the Gutters(Margin and padding) to make the components look consistent
  • Added the checked icon
  • Added the styling for checked state for both checkbox and radio inputs
What is your company’s primary business? *
What volume of Camellia sinensis did your company pack, source, or import globally over the last calendar year (in kilograms) *
                                            
                                                <form class="material material--default wpcf7-form init wpcf7-acceptance-as-validation" action="">
    <div class="form-wrap">
        <div class="form-wrap-inputs d-flex flex-wrap gx-5 row row-gap-9">
            <div>
                <div class="form-group">
                    <span class="wpcf7-form-control-wrap" data-name="global-your-email">
                        <input
                            class="material-input"
                            id="firstName"
                            aria-required="true"
                            aria-invalid="true"
                            placeholder="First Name *"
                            value=""
                            type="text"
                        />
                        <label class="material-label" for="firstName"
                            >First Name <span class="text-primary">*</span></label
                        >
                        <span class="wpcf7-not-valid-tip" aria-hidden="true">Please fill in the required field.</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</form>

Liner form

                                            
                                                <form class="material material--liner wpcf7-form init wpcf7-acceptance-as-validation" action="">
    <div class="form-group">
        <span class="wpcf7-form-control-wrap" data-name="global-your-email">
            <input
                class="material-input"
                id="firstName"
                aria-required="true"
                aria-invalid="true"
                placeholder="First Name *"
                value=""
                type="text"
            />
            <label class="material-label" for="firstName">First Name <span class="text-white">*</span></label>
            <span class="wpcf7-not-valid-tip" aria-hidden="true">Please fill in the required field.</span>
        </span>
    </div>
</form>

Grid Information

xs
<600px
sm
<900px
md
<1200px
lg
<1440px
xl
≥1440px
Container max-width None (auto) None (auto) None (auto) None (auto) 1900px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 16px 16px 24px 24px 40px
Container Margin 30px 50px 60px 100px 150px