Brand

Overview

The following information outlines how to use the colors, typography, and language on the website to maintain our brand.

Brand Pillars

ENCOURAGE | Take Risks. But the Right Ones.

There is no greater risk than never taking one. Travel smart. Make great memories. Protect yourself.

EDUCATE | Oh the Places Your Health Insurance Won’t Go

Take care and take coverage.

EASE | Live Life Simply

Explore more with medical coverage designed to travel with you.

ENJOY | We Underwrite Your Amazing Stories

Be the hero. Explore. We’ve got your back.

ENTRUST | You’ve Got Us in Your Corner

Providing great care across the globe. We hope you never have to make the call, but we’re there if you do.

Color

The following information outlines when and how to use the colors on the website.

Brand Primary Colors
Background classText classHEX
.bg-primary.text-primary#035B93
.bg-orange.text-orange#F5852B
Secondary Colors
Background classText classHEX
.bg-success.text-success#8DC52C
.bg-danger.text-danger#B31F23
.bg-warning.text-warning#F0CA00
.bg-info.text-info#49A8E5
.bg-dark.text-dark#004674
Grayscale
Background classText classHEX
.bg-white.text-white#ffffff
.bg-secondary.text-secondary#d4d7d9
.bg-light—#e9ecef
.bg-gray.text-gray#6c757d
.bg-dark-gray.text-dark-gray#343a40
Opacity
ExampleText classHEX
Text with white screen.text-white-50rgba(255, 255, 255, 0.5
Text with black screen.text-black-50rgba(0, 0, 0, 0.5)
Background Patterns
ExampleCode
 
<div class="bg-dark-topo"></div>
 
<div class="bg-dark-topo bg-orange"></div>
 
<div class="bg-light-topo bg-orange"></div>
 
<div class="bg-light-topo bg-dark"></div>
 
<div class="bg-dark-topo bg-light"></div>
 
<div class="bg-gray-stripes"></div>
 
<div class="bg-orange-stripes"></div>

Typography

Typography plays a major role in creating a consistent brand identity. Below are our primary fonts to be used on the Seven Corners website.

Myriad Pro

  • Regular 400
  • Light 300
  • Bold 700

Museo-slab 700

Headers

Header tags affect both SEO and accessibility. To use the style of a header without influencing SEO and accessibility, use the class. All headers use Myriad Pro.

<HTML>NameClass
<h1>

Myriad Pro — 2rem (32px)

.h1
<h2>

Myriad Pro — 1.875rem (30px)

.h2
<h3>

Myriad Pro — 1.75rem (28px)

.h3
<h4>

Myriad Pro — 1.5rem (24px)

.h4
<h5>
Myriad Pro — 1.25rem (20px)
.h5
<h6>
Myriad Pro — 1rem (16px)
.h6

Display Text

NameClass
Myriad Pro — 6rem (96px).display-1
Myriad Pro — 5.5rem (88px).display-2
Myriad Pro — 4.5rem (72px).display-3
Myriad Pro — 3.5rem (56px).display-4

Inline Tags and Classes

Example<HTML>Class
Light—.font-weight-light
Bold<strong> or <b>.font-weight-bold
Regular—.font-weight-regular
Highlight<mark>.mark
Strike Out<del>—
Underline<u>.uline
Tiny Print<small>.small
Italic<em> or <i>.font-italic

Text Style Classes

NameClass
Slab font face.tk-museo-slab
Regular.font-weight-regular
Shadow.text-shadow
Small Expanded Uppercase.small-expanded-uppercase
Expanded Uppercase.expanded-uppercase

Built in toggle

Detail tag wraps summary tag

Reveal text for the toggle.

Even more details

Here are even more details about the details.

<details>
<summary>Toggle Line</summary>
Reveal text
</details>

Logos