Envoy.css

Getting started

Add the CDN stylesheet link to your page:

                    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/envoy.min.css">

Color palette

red

slate

gray

blue

green

yellow

Type scale

Milo and Max 1

Milo and Max 2

Milo and Max 3

Milo and Max 4

Milo and Max 5

Milo and Max 6

<p class="h1">Milo and Max 1</p>
<p class="h2">Milo and Max 2</p>
<p class="h3">Milo and Max 3</p>
<p class="h4">Milo and Max 4</p>
<p class="h5">Milo and Max 5</p>
<p class="h6">Milo and Max 6</p>

CSS source

                      
                      .h0 {
  font-size: 4rem;
}

.h1 {
  font-size: 3rem;
}

.h2 {
  font-size: 2.5rem;
}

.h3 {
  font-size: 1.5rem;
}

.h4 {
  font-size: 1.125rem;
}

.h5 {
  font-size: 1rem;
}

.h6 {
  font-size: 0.875rem;
}

.small {
  font-size: 0.75rem;
}

.line-height-1 {
  line-height: 18px;
}

.line-height-2 {
  line-height: 24px;
}

.line-height-3 {
  line-height: 32px;
}

.line-height-4 {
  line-height: 42px;
}

.line-height-5 {
  line-height: 52px;
}

.line-height-6 {
  line-height: 62px;
}

p {
  font-size: 1.125rem;
  line-height: 32px;
}

Background images

Use the button classes on and <a>, <button>, <input> elements.

<div class="p4 bg-cover bg-center bg-no-repeat" style="background-image: url(https://envoy.com/images/home/homepage.jpg); min-height: 50vh;"></div>

CSS source

                      
                      .bg-cover   { background-size: cover }

.bg-contain { background-size: contain }

.bg-center  { background-position: center }

.bg-top     { background-position: top }

.bg-right   { background-position: right }

.bg-bottom  { background-position: bottom }

.bg-left    { background-position: left }

.bg-no-repeat { background-repeat: no-repeat }

.bg-repeat-x { background-repeat: repeat-x }

.bg-repeat-y { background-repeat: repeat-y }

.bg-coal-texture {
  background-image: url('https://envoy.com/images/backgrounds/coal-texture.png');
  background-size: 100px;
}

Button

Use the button classes on and <a>, <button>, <input> elements.

<button class="btn btn-primary">Primary button</button>

CSS source

                      
                      .btn {
  background-color: transparent;
  color: inherit;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 2.5rem;
  height: 2.75rem;
  padding: 1px 1.5rem 0;
  height: auto;
  min-width: 92px;
  border: 1px solid transparent;
  vertical-align: middle;
  text-align: center;
  transition: all .2s ease-in-out;
}

.btn-primary {
  color: #FFFFFF;
  background-color: #EF3934;
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(239, 57, 52, 0.2);
}

.btn-primary:hover {
  color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(239, 57, 52, 0.2),
  inset 0 0 0 20rem rgba(0, 0, 0, .0625);
}

.btn-primary:active {
  color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(239, 57, 52, 0.2),
  inset 0 0 0 20rem rgba(0, 0, 0, .125),
  inset 0 3px 4px 0 rgba(0, 0, 0, .25),
  0 0 1px rgba(0, 0, 0, .125);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  opacity: .5;
}

.btn-white { background: white; }

.btn-hover-red-text { text: #ef3934; }

.btn-min-width {
  min-width: 92px;
}

.btn-simple {
  border: unset;
  background-color: inherit;
  border-radius: 4px;
  box-shadow: unset;
  color: #FFFFFF;
  cursor: default;
  letter-spacing: unset;
  line-height: unset;
  min-height: unset;
  min-width: unset;
  padding: 0;
  text-transform: unset;
}

.has-arrow::after {
  content: url(https://envoy.com/images/icons/arrows/sm/white-arrow.svg);
  margin-left: 0.5rem;
  position: relative;
  right: 0;
  top: -1px;
  transition: all .2s ease-in-out;
  vertical-align: middle;
}

.red.has-arrow::after,
.slate.has-arrow:hover:after  {
  content: url(https://envoy.com/images/icons/arrows/sm/red-arrow.svg);
}

.red.has-arrow:hover:after {
  content: url(https://envoy.com/images/icons/arrows/sm/darkred-arrow.svg);
}

.slate.has-arrow::after {
  content: url(https://envoy.com/images/icons/arrows/sm/slate-arrow.svg);
}

.has-arrow:hover::after {
  right: -3px;
}

Button outline

Use the button outline classes on and <a>, <button>, <input> elements.

<button class="btn btn-outline red">Outline button</button>

CSS source

                      
                      .btn-outline,
.btn-outline:hover {
  border-color: currentcolor;
}

.btn-outline {
  border-radius: 6px;
}

.btn-outline:hover {
  box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
}

.btn-outline:active {
  box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .125),
    inset 0 3px 4px 0 rgba(0, 0, 0, .25),
    0 0 1px rgba(0, 0, 0, .125);
}

.btn-outline:disabled,
.btn-outline.is-disabled {
  opacity: .5;
}

.red.btn-outline:hover, .red.btn-outline:focus {
  border-color: #EF3934;
  background: #EF3934;
  color: white;
}

Button sizes

Use the button size classes on and <a>, <button>, <input> elements.

<button class="btn btn-primary btn-small">Small primary button</button>

<button class="btn btn-primary btn-big">Big primary button</button>

<button class="btn btn-primary btn-narrow">Narrow primary button</button>

CSS source

                      
                      .btn-small {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-big {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn-narrow {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

Forms

First Name

Last Name

<div class="clearfix mxn2">
<div class="col col-6 px2">
<label for="first_name" class="label required-label">First Name</label>
<input type="text" class="input" name="first_name" placeholder="Alexa" aria-required="true" required="">
</div>

<div class="col col-6 px2">
<label for="last_name" class="label required-label">Last Name</label>
<input type="text" class="input" name="last_name" placeholder="Beckfield" aria-required="true" required="">
</div>
</div>

CSS source

                      
                      .label {
  color: #282C36;
  font-size: 0.875rem;
  display: block;
  margin-bottom: 0.25rem;
}

.input {
  font-family: inherit;
  font-size: 1rem;
  min-height: 2.75em;
  padding: 1px 1rem 0;
  border: 1px solid rgba(40, 44, 54, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
}

.input-red-bg {
  border: 1px solid transparent;
}

.input-red-bg:focus {
  border: 1px solid rgb(40, 44, 54);
}

.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent no-repeat right 1rem center url(https://envoy.com/images/icons/select-carat.svg);
  font-family: inherit;
  font-size: 1rem;
  display: block;
  min-height: 3rem;
  width: 100%;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(40, 44, 54, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
}

.textarea {
  font-family: inherit;
  font-size: 1rem;
  display: block;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(40, 44, 54, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
}

.input, .select, .textarea{
  transition: all .25s linear;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border: 1px solid #EF3934 !important;
  box-shadow: 0 0 3px rgba(239, 57, 52, 0.5);
}

.focus-reset:focus {
  box-shadow: none !important;
}

.required-label::after {
  content: '●';
  color: #EF3934;
  font-size: 8px;
  margin-left: 8px;
  display: inline-block;
  position: relative;
  top: -2px;
}

.placeholder-invalid:invalid {
  color: rgba(40, 44, 54, 0.5);
}

Blank line

Used to represent a line of text in sample UI elements.

<div class="blank-line" style="width: 200px"></div>

CSS source

                      
                      .blank-line {
  display: inline-block;
  height: 10px;
  border-radius: 5px;
  background-color: #E9E9EA;
}

Circle icon

CSS source

                      
                      .circle-icon {
  background-color: #EF3934;
  box-shadow: 0 0 20px 0 rgba(239, 57, 52, 0.2);
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 29.999rem) {
  .circle-icon {
    height: 44px;
    width: 44px;
    border-radius: 27px;
  }

  .circle-icon-quote {
    background-image: url(https://envoy.com/images/icons/quote-white-mobile.svg);
  }

  .circle-icon-lock {
    background-image: url(https://envoy.com/images/icons/lock-white-mobile.svg);
  }

  .circle-icon-iphone {
    background-image: url(https://envoy.com/images/icons/iphone-white-mobile.svg);
  }
}

@media (min-width: 30rem) {
  .circle-icon {
    height: 44px;
    width: 44px;
    border-radius: 27px;
  }

  .circle-icon-quote {
    background-image: url(https://envoy.com/images/icons/quote-white-mobile.svg);
  }

  .circle-icon-lock {
    background-image: url(https://envoy.com/images/icons/lock-white-mobile.svg);
  }

  .circle-icon-iphone {
    background-image: url(https://envoy.com/images/icons/iphone-white-mobile.svg);
  }
}

@media (min-width: 48rem) {
  .circle-icon {
    height: 68px;
    width: 68px;
    border-radius: 34px;
  }

  .circle-icon-quote {
    background-image: url(https://envoy.com/images/icons/quote-white.svg);
  }

  .circle-icon-lock {
    background-image: url(https://envoy.com/images/icons/lock-white.svg);
  }

  .circle-icon-iphone {
    background-image: url(https://envoy.com/images/icons/iphone-white.svg);
  }
}

@media (min-width: 64rem) {
  .circle-icon {
    height: 68px;
    width: 68px;
    border-radius: 34px;
  }

  .circle-icon-quote {
    background-image: url(https://envoy.com/images/icons/quote-white.svg);
  }

  .circle-icon-lock {
    background-image: url(https://envoy.com/images/icons/lock-white.svg);
  }

  .circle-icon-iphone {
    background-image: url(https://envoy.com/images/icons/iphone-white.svg);
  }
}

.content .pull-left {
  float: left;
  padding: 1.5rem 3rem 1.5rem 0;
  margin: 0;
}

.content  .pull-right {
  float: right;
  padding: 1.5rem 0 1.5rem 3rem;
  margin: 0;
}

.content blockquote {
  margin-top: 48px;
  margin-bottom: 48px;
  border-left: 2px solid #f4352b;
  padding-left: 40px;
  font-style: italic;
}

.content li {
  line-height: 1.5;
  margin-bottom: 1rem;
}

.content blockquote p:last-child {
  margin: 0;
}

.content  blockquote.cite  p:last-child {
  font-size: 14px;
  font-style: normal;
  color: rgba(40,44,54,0.5);
  margin-bottom: 48px;
}

.content  blockquote.cite p:first-child:first-letter {
  margin-left: -0.5rem;
  -webkit-font-kerning: none;
          font-kerning: none;
}

.content  blockquote.cite  p:last-child:first-letter {
  margin-left: -1rem;
  -webkit-font-kerning: none;
          font-kerning: none;
}

.content h2 {
  color: #282c36;
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.content h3, .content h4, .content h5, .content h6 {
  color: #282c36;
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.content img {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.content hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid #E9E9EA;
  border-bottom: none;
}

.content .cta {
  border-top: 1px solid #E9E9EA;
  margin-top: 48px;
  padding-top: 1rem;
  font-style: italic;
  color: rgba(40,44,54,0.5);
}

.content ol {
  counter-reset: list;
  list-style-type: none;
  padding-left: 2rem;
  position: relative;
  margin-bottom: 1rem;
  margin-left: 0;
  box-sizing: border-box;
}

.content li {
  list-style-position: outside;
}

.content ol li {
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.content ol > li:before {
  font-size: 0.75rem;
  background-color: #EF3934;
  height: 1rem;
  width: 1rem;
  margin-left: -2rem;
  margin-top: 0.25rem;
  text-align: center;
  line-height: 1.2;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  content: counter(list,decimal);
  counter-increment: list;
  float: left;
}

.content li > ol, .content li > ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.content code, .content pre {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.875rem;
}

.content code {
  padding: 0 2rem 1rem;
  border-radius: .25rem;
}

.content pre {
  overflow-x: scroll;
  margin: 1rem 0 2rem;
}

Feature table

Visitor management	Basic	Standard	Premium	Enterprise
Sign in unlimited visitors ? Welcome one or hundreds of visitors per day.

CSS source

                      
                      .featureTable .featureTableHeader th {
  border: 1px solid #E9E9EA;
  border-left: none;
  text-align: center;
  padding: 1rem;
  font-weight: 600;
}

.featureTable .featureTableHeader th:first-child {
  border-top: none;
}

.featureTable .featureTableHeader th:nth-child(4) {
  background-color: #EF3934;
  color: #FFFFFF;
  border: none;
}

td.featureDescription {
  width: auto;
  text-align: left;
  background-color: #FFFFFF;
  padding: 0 0.5rem;
}

.featureTable td {
  border-bottom: 1px solid #E9E9EA;
  border-right: 1px solid #E9E9EA;
}

.featureTable .featureTableSeperator th {
  background-color: #F6F6F7;
  padding: 0.5rem 1rem;
}

.tr-spacer > td {
  padding-bottom: 3rem;
}

.tr-spacer td {
  position: relative;
}

.tr-spacer td:after {
  bottom: -6px;
  background-color: white;
  border-top: 1px solid #E9E9EA;
  content: '';
  display: inline-block;
  height: 3rem;
  left: 0;
  position: absolute;
  width: 102%;
}

.featureTable td {
  text-align: center;
}

.featureTable .featureDescription {
  text-align: left;
}

.featureTable .featureTableSeperator th {
  padding: 0.5rem;
}

.featureTable .featureTableSeperator th.bg-red {
  background-color: #EF3934;
}

.bg-quote-slate { background: linear-gradient(-80deg,transparent 80px,#282C36 0,#282C36); }

.bg-gray-50-slant { background: linear-gradient( 8deg, #F6F6F7, #F6F6F7 50%, #FFFFFF 50%, #FFFFFF); }

.bg-gray-70-slant { background: linear-gradient( 8deg, #F6F6F7, #F6F6F7 70%, #FFFFFF 70%, #FFFFFF); }

.bg-white-50-slant { background: linear-gradient( 8deg, #FFFFFF, #FFFFFF 50%, #F6F6F7 50%, #F6F6F7); }

.bg-gray-white-padding { background-image: linear-gradient(0deg, #FFFFFF, #FFFFFF 15rem, transparent 0, transparent), linear-gradient(180deg, #FFFFFF, #FFFFFF 5rem, transparent 0, transparent) }

.bg-gray-white-padding-top { background-image: linear-gradient(0deg, #FFFFFF, #FFFFFF 15rem, transparent 0, transparent) }

.bg-gray-white-padding-bottom { background-image: linear-gradient(180deg, #FFFFFF, #FFFFFF 5rem, transparent 0, transparent) }

.bg-gray-80 { background: linear-gradient(180deg, #F6F6F7 80%, #FFFFFF 0, #FFFFFF) }

.bg-gray-50-bottom { background: linear-gradient(180deg, #F6F6F7 50%, #FFFFFF 0, #FFFFFF) }

.bg-gray-50-top { background: linear-gradient(0deg, #F6F6F7 50%, #FFFFFF 0, #FFFFFF) }

.bg-quote-red { background: linear-gradient(-80deg, transparent 80px, #EF3934 0, #EF3934) }

.hover-unmute:hover {
  transition: opacity .2s ease-in-out;
  opacity: 1;
}

.hover-white,
.hover-slate,
.hover-red,
.hover-muted {
  transition: all .2s ease-in-out;
}

.hover-white:hover {
  color: #FFFFFF;
  opacity: 1;
}

.hover-muted:hover {
  color: #FFFFFF;
  opacity: .6;
}

.hover-slate:hover {
  color: #282C36;
  opacity: 1;
}

.hover-red:hover {
  color: #EF3934;
  opacity: 1;
}

.cursor-pointer:hover {
  cursor: pointer;
}

Quote tip

Use the tip class on any paragraphs you want to emphasize.

<p class="tip">This is a very special tip. You should ideally have enough text that it spans onto two lines.</p>

This is a very special tip. You should ideally have enough text that it spans onto two lines.

CSS source

                      
                      .tip {
  background-image: url(https://envoy.com/images/icons/tip-flag.svg);
  background-repeat: no-repeat;
  background-size: 3rem;
  background-position: left center;
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 2rem;
  line-height: 1.4;
  min-height: 3rem;
  font-style: italic;
  color: #93959A;
}

.tip:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46px;
  width: 2px;
  border-radius: 2px;
  background-color: #EF3934;
}

.tip p:last-child {
  margin: 0;
}

.radio {
  display: block;
}

.radio.disabled {
  opacity: .5;
  pointer-events: none;
}

.radio > input[type=radio] {
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #979797;
  background-image: radial-gradient(white 0%, white 100%);
  background-size: 8px 8px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8px;
  vertical-align: text-bottom;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: box-shadow .1s, border-color .1s, background-size .1s ease-out;
  cursor: pointer;
}

.radio.disabled > input[type=radio] {
  cursor: default;
}

Shadow

Use the shaodw class on any block elements.

<div class="shadow bg-white rounded p4"></div>

CSS source

                      
                      .shadow { box-shadow: 0 3px 20px rgba(0, 0, 0, .1) }

.light-shadow { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07)  }

@media (min-width: 30rem) {
  .sm-shadow { box-shadow: 0 0 30px rgba(0, 0, 0, .1) }
}

@media (min-width: 48rem) {
  .md-shadow { box-shadow: 0 0 30px rgba(0, 0, 0, .1) }
}

@media (min-width: 64rem) {
  .lg-shadow { box-shadow: 0 0 30px rgba(0, 0, 0, .1) }
}

.skewed { transform: skewY(8deg) }

.skewed-child { transform: skewY(-8deg) }

Step number

1

Choose an iPad

<div class="flex flex-center mb4">
<span class="js-configurator-header-number step-number flex-none mr1">1</span>
<div class="flex-auto">
<h3 class="h4 slate m0">Choose an iPad</h3>
</div>
</div>

CSS source

                      
                      .step-number {
  font-weight: 700;
  font-variant-numeric: lining-nums;
  height: 1.25rem;
  width: 1.25rem;
  color: #fff;
  background: #ef3934;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  font-size: .75rem;
  line-height: 1.666666667;
}

Tooltip

Standard

$ 119 99

monthly, per location

?

billed annually

Start trial

or purchase now

<div class="col col-12 lg-col-4 flex px2 mt4 mb5">
<div class="col-12 bg-white shadow rounded center py4 px2 flex flex-column">
<h3 class="mt0 mb3 caps muted slate h4">Standard</h3>
<h2 class="mt0 mb4 slate line-height-1">
<span class="monies">$</span>
<span class="price js-toggle-hide js-monthly fade-out">119</span>
<span class="price js-toggle-hide js-annual fade-in">99</span>
</h2>
<div class="flex-none">
<p class="line-height-1 mb1 slate inline-block">
monthly, per location
</p>
<div class="wrapper flex-none xs-hide sm-hide z4">
<span>?</span>
<div class="tooltip z4">
<p class="white m0 line-height-2 z4">
For most customers, a “location” is defined as a physical office. But you can also set up an Envoy location for each door or at multiple buildings within one central campus.
</p>
</div>
</div>
</div>
<p class="line-height-1 mb4 slate muted js-toggle-opacity transition-opacity">billed annually</p>
<div class="flex-auto"></div>
<p class="mb2 mx2"><a href="/trial/standard/" class="btn hover-white bg-red white rounded col-12 center">Start trial</a></p>
<p class="line-height-1 mb0 slate">or <a href="/purchase/standard/">purchase now</a></p>
</div>
</div>

CSS source

                      
                      .wrapper {
  color: rgba(40,44,54,0.4);
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  width: 1rem;
  height: 1rem;
  text-align: center;
  cursor: help;
  position: relative;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
}

.wrapper .tooltip {
  background: rgba(40,44,54,0.93);
  bottom: 100%;
  color: #fff;
  text-align: left;
  font-size: 0.875rem;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 12.5rem;
  transform: translateY(10px);
  transition: all .25s ease-out;
  border-radius: 2px;
}

Envoy CSS

Getting started

Color palette

Type scale

CSS source

Background images

CSS source

Button

CSS source

Button outline

CSS source

Button sizes

CSS source

Forms

CSS source

Blank line

CSS source

Circle icon

CSS source

Feature table

CSS source

Quote tip

CSS source

Shadow

CSS source

Step number

Choose an iPad

CSS source

Tooltip

Standard

$ 119 99

CSS source