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
{
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
{
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
{
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
{
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
{
/*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
{
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
{
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
{
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;
}
