Southeast AIDS Education and Training Center (SE AETC) | 615-875-7873

Southeast AETC Style Guide

This is a heading 1.

Inter, Bold, 50pt, #15294E
Used For: Page Headers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dolor tincidunt ex cursus, tincidunt elementum risus cursus.

This is a heading 2.

Inter, SemiBold, 44pt, #15294E
Used For: Content Title Headers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dolor tincidunt ex cursus, tincidunt elementum risus cursus.

This is a heading 3.

Inter, Regular, 30pt, #15294E
Used For: Content Title Subheaders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue dolor tincidunt ex cursus, tincidunt elementum risus cursus.

This is the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consequat arcu in pharetra. Donec facilisis luctus viverra. Vivamus non porttitor dolor. Vivamus nec mattis leo. In elementum, tellus ut scelerisque sagittis, neque justo scelerisque sem, scelerisque sollicitudin dui elit quis neque. Nulla laoreet nibh a pellentesque hendrerit.

Inter, Regular, 16pt, #4D4D4A

This is how a hyperlink should be styled.

Inter, Regular, 16pt, #4D4D4A
Hyperlinks should follow the above style.

This is the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consequat arcu in pharetra. Donec facilisis luctus viverra. Vivamus non porttitor dolor. Vivamus nec mattis leo. In elementum, tellus ut scelerisque sagittis, neque justo scelerisque sem, scelerisque sollicitudin dui elit quis neque. Nulla laoreet nibh a pellentesque hendrerit.

Inter, Light, 16pt, #4D4D4A
Use the Blockquote button in the editor to add the quotation styling. Blockquote line is #15294E.

Example Heading 2 Content Title

Written By:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consequat arcu in pharetra. Donec facilisis luctus viverra. Vivamus non porttitor dolor. Vivamus nec mattis leo. In elementum, tellus ut scelerisque sagittis, neque justo scelerisque sem, scelerisque sollicitudin dui elit quis neque. Nulla laoreet nibh a pellentesque hendrerit. Nulla elit sem, ultrices ac arcu eu, mollis accumsan ipsum.

This is the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consequat arcu in pharetra. Donec facilisis luctus viverra. Vivamus non porttitor dolor. Vivamus nec mattis leo. In elementum, tellus ut scelerisque sagittis, neque justo scelerisque sem, scelerisque sollicitudin dui elit quis neque. Nulla laoreet nibh a pellentesque hendrerit.

Duis sed urna accumsan, tristique ligula sed, consectetur sapien. Pellentesque placerat porta dignissim. Morbi lacinia risus sem, ac convallis turpis egestas bibendum. Ut ac imperdiet ante. Morbi quis quam tempus, pretium nunc vestibulum, maximus mi. Aliquam non metus dignissim, egestas mauris ut, efficitur lorem. Maecenas vel nulla a metus accumsan luctus ut non justo. Donec turpis sapien, consectetur at faucibus in, aliquet at lorem. Vivamus sodales, odio quis mattis hendrerit, diam quam molestie felis, et venenatis ligula lacus et ex. Nulla facilisi. Morbi consequat ex ut ex imperdiet, non cursus nisl mollis. Pellentesque pellentesque nisi elit, sit amet ornare quam gravida in. Cras dignissim imperdiet risus eget dapibus. Ut id lorem vel quam consequat placerat in malesuada nisl. Nullam mattis tincidunt nulla, quis tristique urna auctor a.

Color Palette

All of the colors below are available to use for AETC branding elements.

Primary Colors

Space Cadet

Color Codes

Name: Space Cadet
HTML: #15294E
RGB: 21-41-78
CMYK: 100-87-41-39

Cobalt

Color Codes

Name: Cobalt
HTML: #0054A6
RGB: 0, 84, 166
CMYK: 97, 74, 1, 0

Blood (Animal)

Color Codes

Name: Blood (Animal)
HTML: #A11813
RGB: 161-24-19
CMYK: 24-100-100-20

Amaranth Red

Color Codes

Name: Amaranth Red
HTML: #D62027
RGB: 214-32-39
CMYK: 9-100-99-1

Secondary Colors

Bright Navy Blue

Color Codes

Name: Bright Navy Blue
HTML: #176EC4
RGB: 23-110-196
CMYK: 85-56-0-0

Light Sea Green

Color Codes

Name: Light Sea Green
HTML: #21BBA4
RGB: 33-187-164
CMYK: 80-0-40-0

Yellow Orange

Color Codes

Name: Yellow Orange
HTML: #FCB03B
RGB: 252-176-59
CMYK: 0-30-90-0

Beer

Color Codes

Name: Beer
HTML: #F6881F
RGB: 246-136-31
CMYK: 0-57-99-0

Sunburnt Cyclops

Color Codes

Name: Sunburnt Cyclops
HTML: #F5434A
RGB: 245-67-74
CMYK: 0-90-50-0

Neutral Colors

Dark Liver

Color Codes

Name: Dark Liver
HTML: #4D4D4A
RGB: 78-77-75
CMYK: 0-0-4-70

Light Gray

Color Codes

Name: Light Gray
HTML: #D4D4CD
RGB: 224-224-217
CMYK: 0-0-3-16

Alabaster

Color Codes

Name: Alabaster
HTML: #EDEDE5
RGB: 237-237-229
CMYK: 0-0-3-7

Previous Color Palette (Still Usable for Design Elements)

Cobalt

Color Codes

Name: Cobalt
HTML: #0054A6
RGB: 0, 84, 166
CMYK: 97, 74, 1, 0

Midnight Blue

Color Codes

Name: Midnight Blue
HTML: #1C3768
RGB: 28, 55, 104
CMYK: 100, 72, 60, 83

Picton Blue

Color Codes

Name: Picton Blue
HTML: #478FCC
RGB: 71, 143, 204
CMYK: 100, 72, 60, 83

Pattens Blue

Color Codes

Name: Pattens Blue
HTML: #DAE8F4
RGB: 218, 232, 244
CMYK: 13, 4, 1, 0

Alizarin

Color Codes

Name: Alizarin
HTML: #D62027
RGB: 214, 32, 39
CMYK: 10, 100, 98, 2

Coral Candy

Color Codes

Name: Coral Candy
HTML: #F6D2D4
RGB: 246, 210, 212
CMYK: 2, 20, 9, 0

Fire Brick

Color Codes

Name: Fire Brick
HTML: #A01D21
RGB: 160, 29, 33
CMYK: 24, 100, 98, 20

Tax Break

Color Codes

Name: Tax Break
HTML: #536B78
RGB: 83, 107, 120
CMYK: 71, 49, 41, 14

Casper

Color Codes

Name: Casper
HTML: #A9B5BB
RGB: 169, 181, 187
CMYK: 35, 22, 21, 0

Lynch

Color Codes

Name: Lynch
HTML: #677983
RGB: 103, 121, 131
CMYK: 63, 44, 39, 8

Big Stone

Color Codes

Name: Big Stone
HTML: #2D3B41
RGB: 45, 59, 65
CMYK: 79, 63, 56, 49

Nero

Color Codes

Name: Nero
HTML: #222222
RGB: 34, 34, 34
CMYK: 72, 65, 65, 72

Golden Yellow

Color Codes

Name: Golden Yellow
HTML: #FDE400
RGB: 253, 228, 0
CMYK: 3, 5, 100, 0

Varden

Color Codes

Name: Varden
HTML: #FDF9CF
RGB: 253, 249, 207
CMYK: 1, 0, 23, 0

Vivid Violet

Color Codes

Name: Vivid Violet
HTML: #8F3E97
RGB: 143, 62, 151
CMYK: 51, 90, 0, 0

Blue Chalk

Color Codes

Name: Blue Chalk
HTML: #E8D7E9
RGB: 232, 215, 233
CMYK: 7, 16, 0, 0

Seance

Color Codes

Name: Seance
HTML: #662C6C
RGB: 102, 44, 108
CMYK: 69, 97, 27, 13

Carrot Orange

Color Codes

Name: Carrot Orange
HTML: #F37520
RGB: 243, 117, 32
CMYK: 0, 67, 100, 0

Seranade

Color Codes

Name: Seranade
HTML: #FCE3D3
RGB: 252, 227, 211
CMYK: 0, 67, 100, 0

Mountain Meadow

Color Codes

Name: Mountain Meadow
HTML: #1EB24B
RGB: 30, 178, 75
CMYK: 78, 0, 100, 0

Off Green

Color Codes

Name: Off Green
HTML: #D5E9D9
RGB: 213, 233, 217
CMYK: 16, 1, 17, 0

Ruby

Color Codes

Name: Ruby
HTML: #DF1958
RGB: 223, 25, 88
CMYK: 7, 100, 52, 0

Pale Pink

Color Codes

Name: Pale Pink
HTML: #F9D1DE
RGB: 249, 209, 222
CMYK: 0, 21, 2, 0

Button Color Usage

Color Properties:

  • Red: Primary warning or error color; use sparingly
  • Orange: Creative, successful, enthusiastic; attracts eyes without warning or being too overwhelming
  • Yellow: Bright, cheerful, optimistic; can be used to highlight
  • Green: Growth, fertility, health, nature; indicates to “go,” great for success and positivity
  • Blue: Harmony, peace, calmness, relaxation; promotes trust and security
  • Purple: Luxury, wisdom, nobility; use for hints
  • Pink: Love, playful, humorous, fun; avoid for serious content

Source: Psychology of Color

Begin/Continue Process

Below are examples of some cases of when to use the color Picton (#478FCC). If the button action leads to another step in a process use Picton as the button color.

Important: Always use a drop-shadow behind the text to improve accessibility.

.btn-register
/*REGISTER BUTTON */ .btn-register
{
color: #ffffff!important;
background-color: #478FCC;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
font-size: 1.2em;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin: 0 0 15px 0;
}
.btn-register:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-register:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\4c”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-register:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}
.btn-createaccount
/* CREATE ACCOUNT BUTTON */ .btn-createaccount
{
color: #ffffff!important;
background-color: #478FCC;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
font-size: 1.2em;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin:0 0 15px 0;
}
.btn-createaccount:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-createaccount:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\e08a”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-createaccount:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}
.btn-next
/* button – NEXT */ .btn-next
{
color: #ffffff!important;
background-color: #478FCC;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
font-size: 1.2em;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin: 0 0 15px 0;
}
.btn-next:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-next:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\35”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-next:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}
.btn-recover
/* Recover Account BUTTON */ .btn-recover
{
color: #ffffff!important;
background-color: #478FCC;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
font-size: 1.2em;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin:0 0 15px 0;
}
.btn-recover:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-recover:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\74”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-recover:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}

Final Action Step

Below are examples of some cases of when to use the color Séance (#662C6C). If the button action completes or is the end of a process use Séance as the button color.

.btn-login
/* CASPIO BUTTON MODIFICATIONS – most of the style is controlled by caspio */ .cbLoginButton
{
/*Login Button Attributes*/
color: #FFFFFF;
font-size: 12px;
font-family: ‘Lato’, Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;
text-align: center;
min-width: 120px;
padding: 7px 16px;
margin: 0px 3px;
display: inline-block;
background: #3186ad;
border: none;
content: “\e00”;
}
.cbSubmitButton
.cbSubmitButton:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\e012”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.cbSubmitButton_hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}
.cbLoginButton:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\e00”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.cbLoginButton_hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
content: “\e00”;
}
.btn-certificate
.btn-certificate
{
color: #ffffff!important;
background-color: #662C6C;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin: 0 0 15px 0;
}
.btn-certificate:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-certificate:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\e012”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-certificate:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}

Required Action

Below are examples some cases of when to use the color Midnight Blue (#1C3768). If the button action needs to be emphasized or highlighted, use Midnight Blue as the button color.

.btn-eval
.btn-eval
{
color: #ffffff!important;
background-color: #1C3768;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid;
border-radius: 3px;
border-width: 0px!important;
border-color: rgba(0,0,0,0);
box-shadow: 0px 12px 23px -8px rgba(0,0,0,0.3);
font-family: ‘Open Sans’,Helvetica,Arial,Lucida,sans-serif!important;
font-weight: normal!important;
line-height: 1.7em!important;
text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
text-decoration: none;
text-align: center;
display: inline-block;
transition: all 300ms ease 0ms;
position: relative;
padding: .3em 1em;
margin:0 0 15px 0;
}
.btn-eval:hover
{
border: 2px solid transparent;
padding: .3em 2em .3em .7em;
text-decoration: none!important;
}
.btn-eval:after
{
line-height: inherit;
font-size: inherit!important;
margin-left: -1em;
left: auto;
display: inline-block;
opacity: 0;
content: “\5a”;
font-family: “ETmodules”!important;
position: absolute;
text-shadow: none;
font-weight: 400;
font-style: normal;
font-variant: none;
text-transform: none;
transition: all .2s;
}
.btn-eval:hover:after
{
left: auto;
margin-left: .3em;
opacity: 1;
}