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 inAltis Extraboldat14px
  • Leading set to-2pt
  • Top2pxborder inmojo green

Main Headline.

  • Label set inAltis Extraboldat24px
  • Leading set to-2pt

Subheader in Meta Serif OT

  • Label set inMeta Serif OTat32px

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

  • Body copy set inMeta Serif OTat24px/32px

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

  • Large body copy set inMeta Serif OTat42px/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