Styleguide

Styleguide for Kryptokrona

Logo

Black symbol

White symbol

Black with text

White with text

Fonts

Title Montserrat Bold

Color

Dark theme

#171416, #272527, #2E2C2E, #464346

Gradient Background

This is the RGB gradient we use to make things pop!

Add class="rgb" to a html element or if you already have a class then class="example rgb"

@keyframes rgb {
  0%, 100% {
    background: #5f86f2;
  }
  12.5% {
    background: #a65ff2;
  }
  25% {
    background: #f25fd0;
  }
  37.5% {
    background: #f25f61;
  }
  50% {
    background: #f2cb5f;
  }
  62.5% {
    background: #abf25f;
  }
  75% {
    background: #5ff281;
  }
  87.5% {
    background: #5ff2f0;
  }
}

.rgb {

  background: #5f86f2;
  -webkit-animation: rgb 30s ease infinite;
  -moz-animation: rgb 30s ease infinite;
  animation: rgb 30s ease infinite;
} 

Gradient Text

Or use this to make a text pop!

Add class="rgbText" to a html element or if you already have a class then class="example rgbText"

@keyframes rgbText {
  0%, 100% {
    color: #5f86f2;
  }
  12.5% {
    color: #a65ff2;
  }
  25% {
    color: #f25fd0;
  }
  37.5% {
    color: #f25f61;
  }
  50% {
    color: #f2cb5f;
  }
  62.5% {
    color: #abf25f;
  }
  75% {
    color: #5ff281;
  }
  87.5% {
    color: #5ff2f0;
  }
}

.rgbText {

  color: #5f86f2;
  -webkit-animation: rgbText 10s ease infinite;
  -moz-animation: rgbText 10s ease infinite;
  animation: rgbText 10s ease infinite;
}