Novicell Frontend

Colors 

<section class="colors">
    <div class="container">
        <h1 class="heading-page  ">Brand colors</h1>
        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__red"></div>
                <h3 class="colors--name">red</h3>
                <span>RGB 200 0 7</span>
                <span>HEX #c80046</span>
                <span>CMYK 20 100 65 0</span>
            </div>
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__berry"></div>
                <h3 class="colors--name">berry</h3>
                <span>RGB 124 4 53</span>
                <span>HEX #7c0435</span>
                <span>CMYK 40 100 55 35</span>
            </div>
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__plum"></div>
                <h3 class="colors--name">plum</h3>
                <span>RGB 81 0 53</span>
                <span>HEX #510035</span>
                <span>CMYK 60 100 40 50</span>
            </div>
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__spearmint"></div>
                <h3 class="colors--name">spearmint</h3>
                <span>RGB 117 188 127</span>
                <span>HEX #75bc7f</span>
                <span>CMYK 60 0 60 0</span>
            </div>
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__longfarm-blue"></div>
                <h3 class="colors--name">longfarm-blue</h3>
                <span>RGB 192 227 222</span>
                <span>HEX #c0e3de</span>
                <span>CMYK 25 0 10 0</span>
            </div>
        </div>
    </div>
</section>
 
<section class="colors">
    <div class="container">
        {{> '@heading-page' heading }}    
        <div class="row">
            {{#each colors}}
            <div class="col-xs-12 col-sm-2">
                <div class="colors--palette colors--palette__{{ name }}"></div>
                <h3 class="colors--name">{{ name }}</h3>
                <span>RGB {{ rgb }}</span>
                <span>HEX {{ hex }}</span>
                <span>CMYK {{ cmyk }}</span>
            </div>
            {{/each}}
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Brand colors"
  },
  "colors": {
    "red": {
      "name": "red",
      "rgb": "200 0 7",
      "hex": "#c80046",
      "cmyk": "20 100 65 0"
    },
    "berry": {
      "name": "berry",
      "rgb": "124 4 53",
      "hex": "#7c0435",
      "cmyk": "40 100 55 35"
    },
    "plum": {
      "name": "plum",
      "rgb": "81 0 53",
      "hex": "#510035",
      "cmyk": "60 100 40 50"
    },
    "spearmint": {
      "name": "spearmint",
      "rgb": "117 188 127",
      "hex": "#75bc7f",
      "cmyk": "60 0 60 0"
    },
    "longfarm-blue": {
      "name": "longfarm-blue",
      "rgb": "192 227 222",
      "hex": "#c0e3de",
      "cmyk": "25 0 10 0"
    }
  }
}
  • Content: 
    /*
 * Color
 */

:root {
    /* Novicell color */
    --color-red: #c80046;
    --color-berry: #7c0435;
    --color-plum: #510035;
    --color-spearmint: #75bc7f;
    --color-longfarm-blue: #c0e3de;

    /* Semantic names */
    --color-primary: var(--color-red);
    --color-secondary: #363636;

    /* Grayscale */
    --color-gray-dark: #4b4b4b;
    --color-gray: #acacac;
    --color-gray-light: #d7d7d7;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Text */
    --color-text: #363636;

    /* Social */
    --color-facebook: #3b5998;
    --color-twitter: #00aced;
    --color-google-plus: #d34836;

    /* States */
    --color-success: #2ecc71;
    --color-warning: #f1c40f;
    --color-danger: #e74c3c;
}

.colors {
    &--palette {
        height: 250px;
        width: 100%;
    }

    &--palette__red {
        background-color: var(--color-red);
    }

    &--palette__berry {
        background-color: var(--color-berry);
    }

    &--palette__plum {
        background-color: var(--color-plum);
    }

    &--palette__spearmint {
        background-color: var(--color-spearmint);
    }

    &--palette__longfarm-blue {
        background-color: var(--color-longfarm-blue);
    }

    &--name {
        font-size: 30px;
        text-transform: capitalize;
    }
}
  • URL: /components/raw/colors/colors.css
  • Filesystem Path: patterns/design-guidelines/colors/colors.css
  • Size: 1.3 KB

There are no notes for this item.