Vebego Component Library

Colors 

<div class="mb-12">
    <h4 class="atm-heading ">Base - Schoonmaak</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #EBF5FA"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#EBF5FA</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #3399CC"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#3399CC</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #1f5c7a"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#1f5c7a</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #0A1F29"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#0A1F29</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Zorg</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #FFEBCC"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#FFEBCC</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #FF9900"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#FF9900</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #995c00"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#995c00</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #190F00"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#190F00</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Facilitaire Dienstverlening</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #EED0DE"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#EED0DE</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #AC145A"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#AC145A</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #670c36"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#670c36</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #220412"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#220412</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Facilitair Management Duurzaam</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #E3EBDB"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#E3EBDB</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #719949"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#719949</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #445c2c"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#445c2c</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #171F0F"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#171F0F</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Vebego</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #E7E6DC"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#E7E6DC</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #B0AB8A"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#B0AB8A</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #6a6753"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#6a6753</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #23221C"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#23221C</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - STMG</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #F4ECF3"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#F4ECF3</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #914183"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#914183</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #57274f"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#57274f</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #1D0D1A"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#1D0D1A</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Move</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #d1d4d4"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#d1d4d4</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #677072"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#677072</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #3a3d3e"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#3a3d3e</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #252829"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#252829</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Base - Landscaping</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #EFF4D4"></div>
        <div class="p-4">
            <div class="font-bold">Primary 100</div>
            <div>#EFF4D4</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #B0C629"></div>
        <div class="p-4">
            <div class="font-bold">Primary 500</div>
            <div>#B0C629</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #6a7719"></div>
        <div class="p-4">
            <div class="font-bold">Primary 700</div>
            <div>#6a7719</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #232808"></div>
        <div class="p-4">
            <div class="font-bold">Primary 900</div>
            <div>#232808</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - Link</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #008DCA"></div>
        <div class="p-4">
            <div class="font-bold">Link primary</div>
            <div>#008DCA</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #000066"></div>
        <div class="p-4">
            <div class="font-bold">Link secondary</div>
            <div>#000066</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - Text</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #1E1E1E"></div>
        <div class="p-4">
            <div class="font-bold">Titles</div>
            <div>#1E1E1E</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #525252"></div>
        <div class="p-4">
            <div class="font-bold">Body</div>
            <div>#525252</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - Shades</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #FFFFFF"></div>
        <div class="p-4">
            <div class="font-bold">Shade 100</div>
            <div>#FFFFFF</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #D8D8D8"></div>
        <div class="p-4">
            <div class="font-bold">Shade 500</div>
            <div>#D8D8D8</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #1E1E1E"></div>
        <div class="p-4">
            <div class="font-bold">Shade 900</div>
            <div>#1E1E1E</div>
        </div>
    </div>
</div>
 
{{#each colorGroup}}
<div class="mb-12">
    {{render '@heading--h4' this merge=true}}
    {{#each color}}
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 {{#if tailwindName}}bg-{{tailwindName}}{{/if}}" {{#unless tailwindName}}style="background: {{hex}}"{{/unless}}></div>
        <div class="p-4">
            <div class="font-bold">{{friendlyName}}</div>
            <div>{{hex}}</div>
        </div>
    </div>
    {{/each}}
</div>
{{/each}}
 
{
  "colorGroup": [
    {
      "text": "Base - Schoonmaak",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#EBF5FA"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#3399CC"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#1f5c7a"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#0A1F29"
        }
      ]
    },
    {
      "text": "Base - Zorg",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#FFEBCC"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#FF9900"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#995c00"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#190F00"
        }
      ]
    },
    {
      "text": "Base - Facilitaire Dienstverlening",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#EED0DE"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#AC145A"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#670c36"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#220412"
        }
      ]
    },
    {
      "text": "Base - Facilitair Management Duurzaam",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#E3EBDB"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#719949"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#445c2c"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#171F0F"
        }
      ]
    },
    {
      "text": "Base - Vebego",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#E7E6DC"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#B0AB8A"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#6a6753"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#23221C"
        }
      ]
    },
    {
      "text": "Base - STMG",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#F4ECF3"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#914183"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#57274f"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#1D0D1A"
        }
      ]
    },
    {
      "text": "Base - Move",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#d1d4d4"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#677072"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#3a3d3e"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#252829"
        }
      ]
    },
    {
      "text": "Base - Landscaping",
      "color": [
        {
          "friendlyName": "Primary 100",
          "tailwindName": "",
          "hex": "#EFF4D4"
        },
        {
          "friendlyName": "Primary 500",
          "tailwindName": "",
          "hex": "#B0C629"
        },
        {
          "friendlyName": "Primary 700",
          "tailwindName": "",
          "hex": "#6a7719"
        },
        {
          "friendlyName": "Primary 900",
          "tailwindName": "",
          "hex": "#232808"
        }
      ]
    },
    {
      "text": "Tokens - Link",
      "color": [
        {
          "friendlyName": "Link primary",
          "tailwindName": "",
          "hex": "#008DCA"
        },
        {
          "friendlyName": "Link secondary",
          "tailwindName": "",
          "hex": "#000066"
        }
      ]
    },
    {
      "text": "Tokens - Text",
      "color": [
        {
          "friendlyName": "Titles",
          "tailwindName": "",
          "hex": "#1E1E1E"
        },
        {
          "friendlyName": "Body",
          "tailwindName": "",
          "hex": "#525252"
        }
      ]
    },
    {
      "text": "Tokens - Shades",
      "color": [
        {
          "friendlyName": "Shade 100",
          "tailwindName": "",
          "hex": "#FFFFFF"
        },
        {
          "friendlyName": "Shade 500",
          "tailwindName": "",
          "hex": "#D8D8D8"
        },
        {
          "friendlyName": "Shade 900",
          "tailwindName": "",
          "hex": "#1E1E1E"
        }
      ]
    }
  ]
}
  • Content: 
    .sector-schoonmaak {
    --primary-100: #ebf5fa;
    --primary-500: #3399cc;
    --primary-700: #1f5c7a;
    --primary-900: #0a1f29;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-zorg {
    --primary-100: #ffebcc;
    --primary-500: #ff9900;
    --primary-700: #995c00;
    --primary-900: #190f00;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-facdienstverlening {
    --primary-100: #eed0de;
    --primary-500: #ac145a;
    --primary-700: #670c36;
    --primary-900: #220412;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-facmanagement {
    --primary-100: #e3ebdb;
    --primary-500: #719949;
    --primary-700: #445c2c;
    --primary-900: #171f0f;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-vebego {
    --primary-100: #e7e6dc;
    --primary-500: #b0ab8a;
    --primary-700: #6a6753;
    --primary-900: #23221c;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-stmg {
    --primary-100: #f4ecf3;
    --primary-500: #914183;
    --primary-700: #57274f;
    --primary-900: #1d0d1a;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}

.sector-move {
    --primary-100: #dfe0e2;
    --primary-500: #677072;
    --primary-700: #3a3d3e;
    --primary-900: #252829;
    --cta-100: #daedf8;
    --cta-300: #7cbee6;
    --cta-500: #45a3db;
    --cta-900: #2f7299;
}

.sector-landscaping {
    --primary-100: #eff4d4;
    --primary-500: #b0c629;
    --primary-700: #6a7719;
    --primary-900: #232808;
    --cta-100: #ebf5fa;
    --cta-300: #7fc6e4;
    --cta-500: #008dca;
    --cta-900: #212b36;
}
  • URL: /components/raw/colors/colors.css
  • Filesystem Path: src\components\01-base\colors\colors.css
  • Size: 1.9 KB

No notes defined.