Nexi colors

index.html

<md-content>
  <div class="title">
     PRIMARY colors
  </div>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-primary-default">
        Default<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-primary-action">
        Action<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-primary-black">
        Black<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-primary-white">
        White<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-primary-background">
        Background<br>
      </div>
    </div>
  </md-card>
</md-content>
<md-content>
  <div class="title">
     SECONDARY colors
  </div>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-value-changed">
        Value changed<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-icon">
        Icon<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-detail-tile">
        Detail tile<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-error-remove">
        Error / Remove<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-user-details">
        User details<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-separator-bar">
        Separator bar<br>
      </div>
    </div>
  </md-card>
  <md-card>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <div class="emt-c-secondary-icon-2">
        Icon 2<br>
      </div>
    </div>
  </md-card>
</md-content>

nexi-colors.markdown

Nexi colors

A Pen by Maksym Rybak on CodePen.

License.

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

style.scss

// PRIMARY
$emt-c-primary-default:     #00A09A;
$emt-c-primary-action:      #2D32AA;
$emt-c-primary-black:       #000000;
$emt-c-primary-white:       #FFFFFF;
$emt-c-primary-background:  #F6F7F8;

// SECONDARY
$emt-c-secondary-value-changed:     #44D7B6;
$emt-c-secondary-icon:              #575BBB;
$emt-c-secondary-detail-tile:       #B5B6CE;
$emt-c-secondary-error-remove:      #F9423A;
$emt-c-secondary-user-details:      #EFF2F7;
$emt-c-secondary-separator-bar:     #D7D7E4;
$emt-c-secondary-icon-2:              #9596AF;

.title {
  padding: 20px;
  font-weight: bold;
}

// PRIMARY classes
.emt-c-primary-default {
  padding: 20px;
  background-color: $emt-c-primary-default;
}

.emt-c-primary-action {
  padding: 20px;
  background-color: $emt-c-primary-action;
}

.emt-c-primary-black {
  padding: 20px;
  color: white;
  background-color: $emt-c-primary-black;
}

.emt-c-primary-white {
  padding: 20px;
  background-color: $emt-c-primary-white;
}

.emt-c-primary-background {
  padding: 20px;
  background-color: $emt-c-primary-background;
}

// SECONDARY classes
.emt-c-secondary-value-changed {
  padding: 20px;
  background-color: $emt-c-secondary-value-changed;
}

.emt-c-secondary-icon {
  padding: 20px;
  background-color: $emt-c-secondary-icon;
}

.emt-c-secondary-detail-tile {
  padding: 20px;
  background-color: $emt-c-secondary-detail-tile;
}

.emt-c-secondary-error-remove {
  padding: 20px;
  background-color: $emt-c-secondary-error-remove;
}

.emt-c-secondary-user-details {
  padding: 20px;
  background-color: $emt-c-secondary-user-details;
}

.emt-c-secondary-separator-bar {
  padding: 20px;
  background-color: $emt-c-secondary-separator-bar;
}

.emt-c-secondary-icon-2 {
  padding: 20px;
  background-color: $emt-c-secondary-icon-2;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.20/angular-material.min.css" rel="stylesheet" />

Draft to remove