<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ccolakuool-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#ccolakuool-design-gradient-1)">
<defs>
<linearGradient id="ccolakuool-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="ccolakuool-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="kfunvquaqa-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#kfunvquaqa-design-gradient-2)">
<defs>
<linearGradient id="kfunvquaqa-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="kfunvquaqa-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="kfunvquaqa-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#kfunvquaqa-design-gradient-2)">
<defs>
<linearGradient id="kfunvquaqa-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="kfunvquaqa-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ccolakuool-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#ccolakuool-design-gradient-1)">
<defs>
<linearGradient id="ccolakuool-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="ccolakuool-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ccolakuool-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#ccolakuool-design-gradient-1)">
<defs>
<linearGradient id="ccolakuool-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="ccolakuool-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="kfunvquaqa-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#kfunvquaqa-design-gradient-2)">
<defs>
<linearGradient id="kfunvquaqa-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="kfunvquaqa-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
Starting a buzz about B2B beauty
A stunning, responsive website showcases the scope of a chemical producer’s portfolio
Starting a buzz about B2B beauty
A stunning, responsive website showcases the scope of a chemical producer’s portfolio
Ask
BASF Care Creations, a producer of chemical ingredients for beauty formulations, set out to showcase its vast product portfolio in an outside-the-box way. The goal: create a website modeled after consumer beauty brands with the functionality to help users discover market trends, navigate products and view content manageable by the client.
Solution
As a hub for ingredients used in endless varieties of moisturizers, lotions and cleansers, the website required complex relational content to connect different products, stories and resources. We built a rich navigation bar and made it easy for users to find what they need.
The site’s off-grid style makes it possible to build each page differently while staying aligned with its airy, editorial aesthetic — a feat made easy with the Craft CMS interface we built, allowing users on the client’s side to create content entries without the need to learn code. To top it all off, a user portal adds tiers of access for different users and regulates their access to specific types of content.
Ask us how to show off products in a more impactful, user-friendly way.
Show me the wayMore Work Like This
