Text

Headings

Heading 1 (h1)

HTML

                <h1>Heading</h1>

CSS

                h1 { 
                    font-family: 'Moret';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 44px;
                    line-height: 48px;
                }

Heading 2 (h2)

HTML

                <h2>Heading</h2>

CSS

                h2 { 
                    font-family: 'Moret';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 32px;
                    line-height: 36px;
                }

Heading 3 (h3)

HTML

                <h3>Heading</h3>

CSS

                h3 {
                    font-family: 'Moret';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 30px;
                }

Heading 4 (h4)

HTML

                <h3>Heading</h3>

CSS

                h4 {
                    font-family: 'Filson Pro';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 22px;
                    line-height: 28px;
                }

Heading 5 (h5)

HTML

                <h5>Heading</h5>

CSS

                h5 {
                    font-family: 'Filson Pro';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 18px;
                    line-height: 24px;
                    letter-spacing: 0.02em;
                    text-transform: uppercase;
                }

Heading 6 (h6)

HTML

                <h6>Heading</h6>

CSS

                h6 {
                    font-family: 'Filson Pro';
                    font-style: normal;
                    font-weight: 425;
                    font-size: 18px;
                    line-height: 30px;
                    letter-spacing: 0.02em;
                    text-transform: uppercase;
                }

Body

Body (Large)

Quis suspendisse laoreet adipiscing vitae. Id viverra sollicitudin enim neque, lobortis ac mauris non vestibulum. Malesuada egestas pellentesque mauris hendrerit tortor integer. Ac quam sit turpis fringilla ultricies eros, malesuada.

HTML

                <p class="body-lg">Quis suspendisse laoreet adipiscing vitae. Id viverra sollicitudin enim neque, lobortis ac mauris non vestibulum.</p>

CSS

                .body-lg {
                    font-family: filson-pro, sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 24px;
                    color: @ash;
                }

Body (Medium)

HTML

                <p class="body-lg">Quis suspendisse laoreet adipiscing vitae. Id viverra sollicitudin enim neque, lobortis ac mauris non vestibulum.</p>

CSS

                .body-md {
                    font-family: filson-pro, sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 22px;
                    color: @ash;
                }

Body (Small)

HTML

                <p class="body-lg">Quis suspendisse laoreet adipiscing vitae. Id viverra sollicitudin enim neque, lobortis ac mauris non vestibulum.</p>

CSS

                .body-sm {
                    font-family: filson-pro, sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 20px;
                    color: @ash;
                }

Body (X-Small)

HTML

                <p class="body-lg">Quis suspendisse laoreet adipiscing vitae. Id viverra sollicitudin enim neque, lobortis ac mauris non vestibulum.</p>

CSS

                .body-xs {
                    font-family: filson-pro, sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    color: @ash;
                }

Captions

Caption 1

Quis suspendisse laoreet adipiscing vitae.

HTML

                    <p class="caption-one">Quis suspendisse laoreet adipiscing vitae.</p>

CSS

                    .caption-one {
                        font-family: filson-pro, sans-serif;
                        font-style: normal;
                        color: @ash;
                        font-weight: 800;
                        font-size: 12px;
                        line-height: 20px;
                        letter-spacing: 0.02em;
                        text-transform: uppercase;
                    }

Caption 2

Quis suspendisse laoreet adipiscing vitae.

HTML

                    <p classs="caption-two">Quis suspendisse laoreet adipiscing vitae.</p>

CSS

                    .caption-two {
                        font-family: filson-pro, sans-serif;
                        font-style: normal;
                        color: @ash;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 20px;
                        letter-spacing: 0.02em;
                        text-transform: uppercase;
                    }

Color Palette

Wool

#FFF8E6

Ash

#221E20

Gold

#EEA820

Light Wool

#FFFDF8

Dark Wool

#FBF9F4

Medium Ash

#747474

Light Ash

#D1D1D1

Lightest Ash

#F9F9F9

Beryl

#3FCFAD

Heart

#A52F76

Mosaic

#24CAFF

Ribbon

#008FBD

Success

#20A585

Danger

#B71717

Text

Headings

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Body

Body (Large)

Body (Medium)

Body (Small)

Body (X-Small)

Captions

Caption 1

Caption 2

Links

Link

CTA Link with Icon

Buttons

Primary

Primary with Icon Left

Primary with Icon Right

Secondary Light

Secondary

Primary with Icon Left

Primary with Icon Right

Secondary Dark

Secondary

Primary with Icon Left

Primary with Icon Right

Form Controls

Text Input

Textarea

Dropdown Selector

Radio Buttons

Checkboxes

Toggle

Toggle Default

Toggle On