Emmaboshi Studio Pattern Library

Colors 

<h2>Main</h2>

<div class="c-colorsPalette__list">
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #2F2332">
            <span>#2F2332</span>
        </div>
        <code>$color-melanzana</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #2E00FF">
            <span>#2E00FF</span>
        </div>
        <code>$color-blu</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #50E3C2">
            <span>#50E3C2</span>
        </div>
        <code>$color-verde-acqua</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #E37474">
            <span>#E37474</span>
        </div>
        <code>$color-corallo</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #EE695A">
            <span>#EE695A</span>
        </div>
        <code>$color-burnt-sienna</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #9F50E3">
            <span>#9F50E3</span>
        </div>
        <code>$color-violetto</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #202626">
            <span>#202626</span>
        </div>
        <code>$color-outer-space</code>
    </div>
</div>
</div>

<h2>Neutral</h2>

<div class="c-colorsPalette__list">
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FFFFFF">
            <span>#FFFFFF</span>
        </div>
        <code>$color-white</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #C4C4C4">
            <span>#C4C4C4</span>
        </div>
        <code>$color-grigino</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #6A6A6A">
            <span>#6A6A6A</span>
        </div>
        <code>$color-grigio</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #353535">
            <span>#353535</span>
        </div>
        <code>$color-mine-shaft</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #2F2332">
            <span>#2F2332</span>
        </div>
        <code>$color-black</code>
    </div>
</div>

<h2>Project colors</h2>

<div class="c-colorsPalette__list">
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FF9C8E">
            <span>#FF9C8E</span>
        </div>
        <code>$project-color1</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FD7974">
            <span>#FD7974</span>
        </div>
        <code>$project-color2</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FD74AD">
            <span>#FD74AD</span>
        </div>
        <code>$project-color3</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FD8EAE">
            <span>#FD8EAE</span>
        </div>
        <code>$project-color4</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FFFB58">
            <span>#FFFB58</span>
        </div>
        <code>$project-color5</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #F9EF45">
            <span>#F9EF45</span>
        </div>
        <code>$project-color6</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FED043">
            <span>#FED043</span>
        </div>
        <code>$project-color7</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #91FEE4">
            <span>#91FEE4</span>
        </div>
        <code>$project-color8</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #AFFED6">
            <span>#AFFED6</span>
        </div>
        <code>$project-color9</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FDAA7E">
            <span>#FDAA7E</span>
        </div>
        <code>$project-color10</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FED85E">
            <span>#FED85E</span>
        </div>
        <code>$project-color11</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #32EECA">
            <span>#32EECA</span>
        </div>
        <code>$project-color12</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #9FFD5B">
            <span>#9FFD5B</span>
        </div>
        <code>$project-color13</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #43FD9C">
            <span>#43FD9C</span>
        </div>
        <code>$project-color14</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #D5FD66">
            <span>#D5FD66</span>
        </div>
        <code>$project-color15</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #A2FD60">
            <span>#A2FD60</span>
        </div>
        <code>$project-color16</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #A2A2FC">
            <span>#A2A2FC</span>
        </div>
        <code>$project-color17</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #89F8FE">
            <span>#89F8FE</span>
        </div>
        <code>$project-color18</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #7EDEFD">
            <span>#7EDEFD</span>
        </div>
        <code>$project-color19</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #AF8CFC">
            <span>#AF8CFC</span>
        </div>
        <code>$project-color20</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #B1C3FD">
            <span>#B1C3FD</span>
        </div>
        <code>$project-color21</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #A6F9FE">
            <span>#A6F9FE</span>
        </div>
        <code>$project-color22</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #3CE6FD">
            <span>#3CE6FD</span>
        </div>
        <code>$project-color23</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #26D2FD">
            <span>#26D2FD</span>
        </div>
        <code>$project-color24</code>
    </div>
</div>
 
<h2>Main</h2>

<div class="c-colorsPalette__list">
  {% for key, value in mainColors %}
    <div class="c-colorsPalette__item">
      <div class="c-colorsPalette" style="background-color: {{ value }}">
          <span>{{ value }}</span>
      </div>
      <code>{{ key }}</code>
    </div>
  {% endfor %}
  </div>
</div>

<h2>Neutral</h2>

<div class="c-colorsPalette__list">
  {% for key, value in neutralColors %}
    <div class="c-colorsPalette__item">
      <div class="c-colorsPalette" style="background-color: {{ value }}">
          <span>{{ value }}</span>
      </div>
      <code>{{ key }}</code>
    </div>
  {% endfor %}
</div>


<h2>Project colors</h2>

<div class="c-colorsPalette__list">
  {% for key, value in projectColors %}
    <div class="c-colorsPalette__item">
      <div class="c-colorsPalette" style="background-color: {{ value }}">
          <span>{{ value }}</span>
      </div>
      <code>{{ key }}</code>
    </div>
  {% endfor %}
</div>
 
{
  "mainColors": {
    "$color-melanzana": "#2F2332",
    "$color-blu": "#2E00FF",
    "$color-verde-acqua": "#50E3C2",
    "$color-corallo": "#E37474",
    "$color-burnt-sienna": "#EE695A",
    "$color-violetto": "#9F50E3",
    "$color-outer-space": "#202626"
  },
  "neutralColors": {
    "$color-white": "#FFFFFF",
    "$color-grigino": "#C4C4C4",
    "$color-grigio": "#6A6A6A",
    "$color-mine-shaft": "#353535",
    "$color-black": "#2F2332"
  },
  "projectColors": {
    "$project-color1": "#FF9C8E",
    "$project-color2": "#FD7974",
    "$project-color3": "#FD74AD",
    "$project-color4": "#FD8EAE",
    "$project-color5": "#FFFB58",
    "$project-color6": "#F9EF45",
    "$project-color7": "#FED043",
    "$project-color8": "#91FEE4",
    "$project-color9": "#AFFED6",
    "$project-color10": "#FDAA7E",
    "$project-color11": "#FED85E",
    "$project-color12": "#32EECA",
    "$project-color13": "#9FFD5B",
    "$project-color14": "#43FD9C",
    "$project-color15": "#D5FD66",
    "$project-color16": "#A2FD60",
    "$project-color17": "#A2A2FC",
    "$project-color18": "#89F8FE",
    "$project-color19": "#7EDEFD",
    "$project-color20": "#AF8CFC",
    "$project-color21": "#B1C3FD",
    "$project-color22": "#A6F9FE",
    "$project-color23": "#3CE6FD",
    "$project-color24": "#26D2FD"
  }
}

No notes defined.