intro.

The Brand Toolkit

Reinvention and never-ending improvement are critical to the success of digital product companies and startups.

h1, h3, h5 {
 @extend .altis_extrabold;
}
h2, h3, p, li {
 @extend %meta_serif;
}
.copy_section {
  width: 50%;
  h5 {
    width: 100px;
    font-size: 14px;
    color: $mojo_navy;
    border-top: 2px solid $mojo_green;
    padding-top: 2px;
    text-transform: uppercase;
    margin-bottom: 30px;
  }
  h1 {
    font-size: 62px;
    color: $mojo_navy;
    margin-bottom: 2px;
  }
  h2 {
    font-size: 32px;
    color: $mojo_green;
    margin-bottom: 25px;
  }
  h3 {
    font-size: 22px;
    color: $mojo_navy;
    margin-bottom: 15px;
  }
  p {
    font-size: 22px;
    color: $mojo_mid_navy;
    line-height: 34px;
    margin-bottom: 10px;
 }
 ul {
  margin-left: 20px;
  li {
    font-size: 17px;
    list-style: block;
    color: $mojo_mid_navy;
    margin-bottom: 15px;
    margin-top: 15px;
    position: relative;
    padding: 0 0 0 10px;
    &:after {
      content: '▪';
      color: $mojo_green;
      position: absolute;
      left: -5px;
    }
  }
}
 
Aa
Meta Serif OT
Abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog.
Aa
Altis Extrabold
Abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog.
small section label.
  • Label set in Altis Extrabold at 14px
  • Leading set to -2pt
  • Top 2px border in mojo green

Main Headline.

  • Label set in Altis Extrabold at 24px
  • Leading set to -2pt

Subheader in Meta Serif OT

  • Label set in Meta Serif OT at 32px

Body and main copy set in Meta Serif. Clean for reading and some other filler text. Here we go, cool.

  • Body copy set in Meta Serif OT at 24px/32px

Large body copy used on home page and large sections. Body and main.

  • Large body copy set in Meta Serif OT at 42px/54px
typography.

Everything you can imagine is real.

At our collective core is a passion for reimagining utility and designing products that tap into a deeper emotional layer.

There is, at this intersection, a brilliant friction where these two seemingly disparate beams come together to create something that is adventuring, fun, and bold, but credible and grounded as well. In our typography, MetaOT and Altis—an uncommon but charming pairing—combine the earnest, open attributes of our pragmatic and methodological practices with the craft, play, and personality of our design visioning.

Brand Personality

  • Bold
  • Clever
  • Curious
  • Adventuring
  • Resourceful
color.

What colors would our flag be if we were a street gang of mad scientists?

Live your brand.

#28ba00

100 / 101 / 179

#001b36

100 / 101 / 179

#9fb5cc

100 / 101 / 179

#e65626

100 / 101 / 179

#6500b3

100 / 101 / 179

#ed1c37

100 / 101 / 179