Emmaboshi 2019 Styleguide

Colors 

<h2>Main</h2>

<div class="c-colorsPalette__list">
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #433446">
            <span>#433446</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: #9F50E3">
            <span>#9F50E3</span>
        </div>
        <code>$color-violetto</code>
    </div>
</div>
</div>

<h2>Neutral</h2>

<div class="c-colorsPalette__list">
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #FFF">
            <span>#FFF</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: #000">
            <span>#000</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: #fc8079">
            <span>#fc8079</span>
        </div>
        <code>$project-color1</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #acffd5">
            <span>#acffd5</span>
        </div>
        <code>$project-color2</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #e6df37">
            <span>#e6df37</span>
        </div>
        <code>$project-color3</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #2cf2ff">
            <span>#2cf2ff</span>
        </div>
        <code>$project-color4</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #1aefca">
            <span>#1aefca</span>
        </div>
        <code>$project-color5</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #96c6e7">
            <span>#96c6e7</span>
        </div>
        <code>$project-color6</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #bfe86c">
            <span>#bfe86c</span>
        </div>
        <code>$project-color7</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #ff89ab">
            <span>#ff89ab</span>
        </div>
        <code>$project-color8</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #fba06c">
            <span>#fba06c</span>
        </div>
        <code>$project-color9</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #f1edb6">
            <span>#f1edb6</span>
        </div>
        <code>$project-color10</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #f1c59f">
            <span>#f1c59f</span>
        </div>
        <code>$project-color11</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #00bcd4">
            <span>#00bcd4</span>
        </div>
        <code>$project-color12</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #a6baff">
            <span>#a6baff</span>
        </div>
        <code>$project-color13</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #738ffe">
            <span>#738ffe</span>
        </div>
        <code>$project-color14</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #fdf1d7">
            <span>#fdf1d7</span>
        </div>
        <code>$project-color15</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #f06c93">
            <span>#f06c93</span>
        </div>
        <code>$project-color16</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #ffc207">
            <span>#ffc207</span>
        </div>
        <code>$project-color17</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #fffd46">
            <span>#fffd46</span>
        </div>
        <code>$project-color18</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #7adeff">
            <span>#7adeff</span>
        </div>
        <code>$project-color19</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #b0ffc8">
            <span>#b0ffc8</span>
        </div>
        <code>$project-color20</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #def6dd">
            <span>#def6dd</span>
        </div>
        <code>$project-color21</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #00ff9b">
            <span>#00ff9b</span>
        </div>
        <code>$project-color22</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #ffcac3">
            <span>#ffcac3</span>
        </div>
        <code>$project-color23</code>
    </div>
    <div class="c-colorsPalette__item">
        <div class="c-colorsPalette" style="background-color: #ff9321">
            <span>#ff9321</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>
 
{
  "items": [
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Bollettino Boshi",
      "abstract": "Il Bollettino è la mia newsletter informale, spedita a cadenza imprevedibile. "
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/bottiato.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/bottiato.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Franco Bottiato",
      "abstract": "Un bot per Facebook Messenger, con la personalità di Franco Bottiato."
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Radio Boshi",
      "abstract": "Un canale Telegram di messaggi vocali inaspettati."
    }
  ],
  "_keys": [
    "type",
    "items"
  ],
  "type": "post-preview",
  "mainColors": {
    "$color-melanzana": "#433446",
    "$color-blu": "#2E00FF",
    "$color-verde-acqua": "#50E3C2",
    "$color-corallo": "#E37474",
    "$color-violetto": "#9F50E3"
  },
  "neutralColors": {
    "$color-white": "#FFF",
    "$color-grigino": "#C4C4C4",
    "$color-black": "#000"
  },
  "projectColors": {
    "$project-color1": "#fc8079",
    "$project-color2": "#acffd5",
    "$project-color3": "#e6df37",
    "$project-color4": "#2cf2ff",
    "$project-color5": "#1aefca",
    "$project-color6": "#96c6e7",
    "$project-color7": "#bfe86c",
    "$project-color8": "#ff89ab",
    "$project-color9": "#fba06c",
    "$project-color10": "#f1edb6",
    "$project-color11": "#f1c59f",
    "$project-color12": "#00bcd4",
    "$project-color13": "#a6baff",
    "$project-color14": "#738ffe",
    "$project-color15": "#fdf1d7",
    "$project-color16": "#f06c93",
    "$project-color17": "#ffc207",
    "$project-color18": "#fffd46",
    "$project-color19": "#7adeff",
    "$project-color20": "#b0ffc8",
    "$project-color21": "#def6dd",
    "$project-color22": "#00ff9b",
    "$project-color23": "#ffcac3",
    "$project-color24": "#ff9321"
  }
}

There are no notes for this item.