@ivds/core 0.1.1 → 1.0.0

package/src/svg/user.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2667 13C18.8082 13 20.8819 15.0031 20.9951 17.5167L21 17.7333V22H3V17.7333C3 15.1918 5.00309 13.1181 7.51667 13.0049L7.73333 13H16.2667ZM7.73333 15C6.27966 15 5.09104 16.1348 5.00499 17.5668L5 17.7333V20H19V17.7333C19 16.3172 17.8926 15.0973 16.54 15.0075L16.3766 15.0022L7.73333 15ZM12 2C14.7614 2 17 4.23858 17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2ZM12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4Z" fill="black"/>
+</svg>

package/src/svg/vaccine.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5429 4.4571L17.5 3.41421L18.9142 2L22.4142 5.5L21 6.91421L19.9571 5.87132L18.6753 7.15305L20.6213 9.099L11.099 18.6213L9.84437 17.3667L8.89843 18.3127L8.2071 17.6213L3.41421 22.4142L2 21L6.79289 16.2071L6.07 15.4842L7.01595 14.5383L5.79289 13.3152L15.3152 3.79289L17.2611 5.73884L18.5429 4.4571ZM8.62132 13.3152L11.099 15.7929L17.7929 9.099L15.3152 6.62132L8.62132 13.3152Z" fill="black"/>
+</svg>

package/src/svg/videocamera-crossed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7929 2.79291L21.2071 4.20712L4.70711 20.7071L3.29289 19.2929L19.7929 2.79291ZM23 6.61259V17.3874L16.9821 15.3809C16.7967 17.3437 15.193 18.8936 13.2068 18.9948L13 19H8.534L10.534 16.9999L13 17C14.0544 17 14.9182 16.1841 14.9945 15.1493L15 15V12.5339L19.882 7.65191L23 6.61259ZM13 5.00001C13.7103 5.00001 14.3773 5.18513 14.9554 5.50975L13.4207 7.04433C13.3302 7.02498 13.2376 7.01173 13.1431 7.00505L13 7.00001H5C3.94564 7.00001 3.08183 7.81589 3.00549 8.85075L3 9.00001V15C3 15.6712 3.33063 16.2652 3.83791 16.628L2.41396 18.0517C1.60664 17.3669 1.0746 16.3675 1.00725 15.2429L1 15V9.00001C1 6.85782 2.68397 5.10894 4.80036 5.00491L5 5.00001H13ZM21 9.38701L17 10.72V13.279L21 14.612V9.38701ZM6 9.00001C6.55228 9.00001 7 9.44773 7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44773 5.44772 9.00001 6 9.00001Z" fill="black"/>
+</svg>

package/src/svg/videocamera.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 5C15.0807 5 16.7903 6.58866 16.9821 8.61916L23 6.61257V17.3874L16.9821 15.3808C16.7967 17.3437 15.193 18.8936 13.2068 18.9947L13 19H5C2.8578 19 1.10892 17.316 1.0049 15.1996L1 15V9C1 6.8578 2.68397 5.10892 4.80036 5.0049L5 5H13ZM13 7H5C3.94564 7 3.08183 7.81588 3.00549 8.85074L3 9V15C3 16.0544 3.81588 16.9182 4.85074 16.9945L5 17H13C14.0544 17 14.9182 16.1841 14.9945 15.1493L15 15V9C15 7.94564 14.1841 7.08183 13.1493 7.00549L13 7ZM21 9.387L17 10.72V13.279L21 14.612V9.387ZM6 9C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44772 5.44772 9 6 9Z" fill="black"/>
+</svg>

package/src/svg/vimeo.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0714 3H4.92857C3.86384 3 3 3.86384 3 4.92857V19.0714C3 20.1362 3.86384 21 4.92857 21H19.0714C20.1362 21 21 20.1362 21 19.0714V4.92857C21 3.86384 20.1362 3 19.0714 3ZM18.4205 9.01071C18.3643 10.2603 17.4884 11.9759 15.7969 14.1496C14.0491 16.4196 12.5705 17.5567 11.3612 17.5567C10.6098 17.5567 9.97902 16.8656 9.46071 15.4835C8.44821 11.775 8.0183 9.60134 7.18259 9.60134C7.08616 9.60134 6.74866 9.80223 6.17411 10.208L5.57143 9.42857C7.05402 8.12679 8.4683 6.68036 9.35223 6.6C10.3527 6.50357 10.9674 7.18661 11.2004 8.65312C12.0241 13.8603 12.3897 14.6478 13.8844 12.2893C14.4228 11.4375 14.7121 10.7946 14.7482 10.3487C14.8848 9.0308 13.7196 9.1192 12.9321 9.4567C13.5629 7.3875 14.7723 6.38304 16.5522 6.43929C17.8741 6.47946 18.4969 7.33929 18.4205 9.01071Z" fill="black"/>
+</svg>

package/src/svg/virus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.3807 0 14.5 1.11929 14.5 2.5C14.5 3.52484 13.8833 4.40565 13.0008 4.79162L13.0009 5.57659C13.9875 5.72906 14.9007 6.10336 15.6882 6.64693L16.9217 5.41241C16.8109 5.12974 16.75 4.82198 16.75 4.5C16.75 3.11929 17.8693 2 19.25 2C20.6307 2 21.75 3.11929 21.75 4.5C21.75 5.88071 20.6307 7 19.25 7C18.928 7 18.6203 6.93913 18.3376 6.82827L17.142 8.02333C17.8001 8.87299 18.2522 9.8902 18.4236 11.0001L19.2079 11.0002C19.5937 10.1171 20.4748 9.5 21.5 9.5C22.8807 9.5 24 10.6193 24 12C24 13.3807 22.8807 14.5 21.5 14.5C20.4752 14.5 19.5944 13.8833 19.2084 13.0008L18.4234 13.0009C18.2614 14.0489 17.8492 15.0142 17.2496 15.8338L19.6451 18.231C19.9833 18.0824 20.357 18 20.75 18C22.2688 18 23.5 19.2312 23.5 20.75C23.5 22.2688 22.2688 23.5 20.75 23.5C19.2312 23.5 18 22.2688 18 20.75C18 20.357 18.0824 19.9833 18.231 19.6451L15.8338 17.2496C15.0142 17.8492 14.0489 18.2614 13.0009 18.4234L13.0008 19.2084C13.8833 19.5944 14.5 20.4752 14.5 21.5C14.5 22.8807 13.3807 24 12 24C10.6193 24 9.5 22.8807 9.5 21.5C9.5 20.4748 10.1171 19.5937 11.0002 19.2079L11.0001 18.4236C9.95174 18.2617 8.98608 17.8493 8.1662 17.2496L7.00216 18.4134C7.16097 18.742 7.25 19.1106 7.25 19.5C7.25 20.8807 6.13071 22 4.75 22C3.36929 22 2.25 20.8807 2.25 19.5C2.25 18.1193 3.36929 17 4.75 17C5.00273 17 5.24671 17.0375 5.47666 17.1072L6.75045 15.8338C6.15085 15.0142 5.73856 14.0489 5.57659 13.0009L4.79162 13.0008C4.40565 13.8833 3.52484 14.5 2.5 14.5C1.11929 14.5 0 13.3807 0 12C0 10.6193 1.11929 9.5 2.5 9.5C3.52523 9.5 4.40632 10.1171 4.79205 11.0002L5.57643 11.0001C5.7383 9.95174 6.15066 8.98608 6.75045 8.1662L4.29273 5.70796C3.90127 5.89517 3.46287 6 3 6C1.34315 6 0 4.65685 0 3C0 1.34315 1.34315 0 3 0C4.65685 0 6 1.34315 6 3C6 3.46287 5.89517 3.90127 5.70796 4.29273L8.1662 6.75045C8.98608 6.15066 9.95174 5.7383 11.0001 5.57643L11.0002 4.79205C10.1171 4.40632 9.5 3.52523 9.5 2.5C9.5 1.11929 10.6193 0 12 0V0ZM12 21C11.7239 21 11.5 21.2239 11.5 21.5C11.5 21.7761 11.7239 22 12 22C12.2761 22 12.5 21.7761 12.5 21.5C12.5 21.2239 12.2761 21 12 21ZM20.75 20C20.3358 20 20 20.3358 20 20.75C20 21.1642 20.3358 21.5 20.75 21.5C21.1642 21.5 21.5 21.1642 21.5 20.75C21.5 20.3358 21.1642 20 20.75 20ZM4.75 19C4.47386 19 4.25 19.2239 4.25 19.5C4.25 19.7761 4.47386 20 4.75 20C5.02614 20 5.25 19.7761 5.25 19.5C5.25 19.2239 5.02614 19 4.75 19ZM12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5ZM2.5 11.5C2.22386 11.5 2 11.7239 2 12C2 12.2761 2.22386 12.5 2.5 12.5C2.77614 12.5 3 12.2761 3 12C3 11.7239 2.77614 11.5 2.5 11.5ZM21.5 11.5C21.2239 11.5 21 11.7239 21 12C21 12.2761 21.2239 12.5 21.5 12.5C21.7761 12.5 22 12.2761 22 12C22 11.7239 21.7761 11.5 21.5 11.5ZM19.25 4C18.9739 4 18.75 4.22386 18.75 4.5C18.75 4.77614 18.9739 5 19.25 5C19.5261 5 19.75 4.77614 19.75 4.5C19.75 4.22386 19.5261 4 19.25 4ZM3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2ZM12 2C11.7239 2 11.5 2.22386 11.5 2.5C11.5 2.77614 11.7239 3 12 3C12.2761 3 12.5 2.77614 12.5 2.5C12.5 2.22386 12.2761 2 12 2Z" fill="black"/>
+</svg>

package/src/svg/volume-high.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2.5V21.5L9.273 17H6C3.23858 17 1 14.7614 1 12C1 9.28538 3.16334 7.07603 5.86005 7.00192L9.273 7L15 2.5ZM20.0711 4.92893C23.9053 8.76317 23.975 14.9364 20.2802 18.8557L20.0711 19.0711L18.6569 17.6569C21.7146 14.5991 21.7796 9.68201 18.852 6.54516L18.6569 6.34315L20.0711 4.92893ZM13 6.8115L10 8.926V15.073L13 17.188V6.8115ZM17.2218 7.73654C19.5049 10.0196 19.5634 13.6848 17.3974 16.0388L17.2218 16.2218L15.8076 14.8076C17.3176 13.2976 17.368 10.8806 15.9586 9.31013L15.8076 9.15076L17.2218 7.73654ZM6.02745 8.99981L5.91499 9.00117C4.29498 9.04569 3 10.3746 3 12C3 13.6192 4.28279 14.9388 5.88753 14.9979L6 15H8V9L6.02745 8.99981Z" fill="black"/>
+</svg>

package/src/svg/volume-low.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2.5V21.5L9.273 17H6C3.23858 17 1 14.7614 1 12C1 9.28538 3.16334 7.07603 5.86005 7.00192L9.273 7L15 2.5ZM13 6.8115L10 8.926V15.073L13 17.188V6.8115ZM17.2218 7.73654C19.5049 10.0196 19.5634 13.6848 17.3974 16.0388L17.2218 16.2218L15.8076 14.8076C17.3176 13.2976 17.368 10.8806 15.9586 9.31013L15.8076 9.15076L17.2218 7.73654ZM6.02745 8.99981L5.91499 9.00117C4.29498 9.04569 3 10.3746 3 12C3 13.6192 4.28279 14.9388 5.88753 14.9979L6 15H8V9L6.02745 8.99981Z" fill="black"/>
+</svg>

package/src/svg/volume-minus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2.5V21.5L9.273 17H6C3.23858 17 1 14.7614 1 12C1 9.28538 3.16334 7.07603 5.86005 7.00192L9.273 7L15 2.5ZM13 6.8115L10 8.926V15.073L13 17.188V6.8115ZM8 9L6.02745 8.99981L5.91499 9.00117C4.29498 9.04569 3 10.3746 3 12C3 13.6192 4.28279 14.9388 5.88753 14.9979L6 15H8V9ZM24 11V13H17V11H24Z" fill="black"/>
+</svg>

package/src/svg/volume-mute.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2.5V21.5L9.273 17H6C3.23858 17 1 14.7614 1 12C1 9.28538 3.16334 7.07603 5.86005 7.00192L9.273 7L15 2.5ZM13 6.8115L10 8.926V15.073L13 17.188V6.8115ZM22.5 8.5L24 10L22 12L24 14L22.5 15.5L20.5 13.5L18.5 15.5L17 14L19 12L17 10L18.5 8.5L20.5 10.5L22.5 8.5ZM8 9L6.02745 8.99981L5.91499 9.00117C4.29498 9.04569 3 10.3746 3 12C3 13.6192 4.28279 14.9388 5.88753 14.9979L6 15H8V9Z" fill="black"/>
+</svg>

package/src/svg/volume-plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2.5V21.5L9.273 17H6C3.23858 17 1 14.7614 1 12C1 9.28538 3.16334 7.07603 5.86005 7.00192L9.273 7L15 2.5ZM13 6.8115L10 8.926V15.073L13 17.188V6.8115ZM21 8V11H24V13H21V16H19V13H16V11H19V8H21ZM8 9L6.02745 8.99981L5.91499 9.00117C4.29498 9.04569 3 10.3746 3 12C3 13.6192 4.28279 14.9388 5.88753 14.9979L6 15H8V9Z" fill="black"/>
+</svg>

package/src/svg/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0714 3C20.0855 3 20.9173 3.78353 20.9942 4.7779L21 4.92857V19.0714C21 20.0855 20.2165 20.9173 19.2221 20.9942L19.0714 21H4.92857C3.91454 21 3.08273 20.2165 3.0058 19.2221L3 19.0714V4.92857C3 3.91454 3.78353 3.08273 4.7779 3.0058L4.92857 3H19.0714ZM11.9732 6C8.70536 6 6.02679 8.67857 6.02679 11.9464C6.02679 12.9286 6.27437 13.8657 6.70764 14.6959L6.83036 14.9196L6 18L9.13393 17.1964L9.37695 17.3159C10.1934 17.6983 11.0722 17.9196 11.9732 17.9196C15.2679 17.9196 18 15.2411 18 11.9732C18 10.3661 17.3036 8.89286 16.1786 7.76786C15.0804 6.64286 13.5804 6 11.9732 6ZM10.2235 9.21414C10.2973 9.21774 10.3739 9.24477 10.4617 9.405L10.5 9.48214L10.5691 9.66022L10.9554 10.5804C10.9821 10.6607 11.0089 10.7411 10.9554 10.8482C10.8839 10.9982 10.8087 11.1063 10.7398 11.1892L10.6895 11.247L10.5998 11.3405L10.5311 11.4152C10.4754 11.4847 10.4625 11.5447 10.5268 11.6518C11.0768 12.5768 11.6034 12.9418 12.3899 13.3348L12.6254 13.4511C12.7043 13.4819 12.7653 13.469 12.8322 13.4283L12.8839 13.3929L13.2279 12.9602L13.3109 12.8473C13.3221 12.831 13.3317 12.8163 13.3393 12.8036C13.433 12.663 13.5268 12.6659 13.6385 12.7047L13.6875 12.7232L14.0574 12.8929L14.7054 13.2054L14.8498 13.2829C14.8966 13.3075 14.9336 13.3299 14.9559 13.36L14.9732 13.3929L14.989 13.4194C15.0252 13.5126 15.0119 13.7798 14.8929 14.0893C14.7701 14.4085 14.2647 14.7052 13.975 14.773L13.7131 14.8114C13.3096 14.8518 12.9196 14.7822 12.1071 14.4107C11.5821 14.1857 11.1228 13.8557 10.7439 13.5183L10.5866 13.3736L10.3559 13.1443L10.1523 12.9242L10.0609 12.8197L9.97671 12.72L9.83026 12.5389L9.5625 12.1875L9.47036 12.0568L9.37401 11.9038C9.1994 11.6101 8.97321 11.1339 8.97321 10.6339C8.97321 10.1332 9.15295 9.81229 9.30799 9.60885L9.35848 9.54531L9.48214 9.40179C9.59694 9.26403 9.73141 9.22467 9.83497 9.21624L9.88393 9.21429L10.2235 9.21414Z" fill="black"/>
+</svg>

package/src/svg/wifi-crossed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7929 2.79291L21.2071 4.20712L4.70711 20.7071L3.29289 19.2929L19.7929 2.79291ZM12 17.5338C12.8284 17.5338 13.5 18.2054 13.5 19.0338C13.5 19.8623 12.8284 20.5338 12 20.5338C11.1716 20.5338 10.5 19.8623 10.5 19.0338C10.5 18.2054 11.1716 17.5338 12 17.5338ZM13.5254 14.0084C14.4727 14.2859 15.374 14.7918 16.1404 15.5229L16.2517 15.6315L14.8375 17.0457C13.9784 16.1867 12.8661 15.7562 11.7777 15.7561L13.5254 14.0084ZM10.9645 9.50061L7.98999 12.475C7.34406 12.8278 6.73438 13.2713 6.17967 13.8055L6.06399 13.9191L4.64977 12.5049C6.41692 10.7377 8.65951 9.73614 10.9645 9.50061ZM16.889 10.6459C17.7398 11.0949 18.5412 11.67 19.2659 12.3713L19.3899 12.4933L17.9757 13.9075C17.2083 13.1402 16.3293 12.5523 15.3908 12.1438L16.889 10.6459ZM20.13 7.40669C20.9125 7.91739 21.6574 8.50937 22.3528 9.18262L22.5281 9.35508L21.1139 10.7693C20.3646 10.02 19.5459 9.38245 18.6785 8.85658L20.13 7.40669ZM15.1352 5.32947L13.392 7.07355C9.7214 6.68056 5.91411 7.86273 3.06592 10.62L2.91421 10.7693L1.5 9.35508C5.20194 5.65314 10.3702 4.31128 15.1352 5.32947Z" fill="black"/>
+</svg>

package/src/svg/wifi.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.5338C12.8284 17.5338 13.5 18.2054 13.5 19.0338C13.5 19.8623 12.8284 20.5338 12 20.5338C11.1716 20.5338 10.5 19.8623 10.5 19.0338C10.5 18.2054 11.1716 17.5338 12 17.5338ZM16.1404 15.5229L16.2517 15.6315L14.8375 17.0457C13.209 15.4172 10.6706 15.3288 9.11001 16.7933L9.02274 16.8778L7.60852 15.4636C9.92086 13.1513 13.7088 13.2034 16.1404 15.5229ZM19.2659 12.3713L19.3899 12.4933L17.9757 13.9075C14.728 10.6599 9.48052 10.6266 6.17967 13.8055L6.06399 13.9191L4.64977 12.5048C8.68192 8.4727 15.1894 8.42636 19.2659 12.3713ZM22.3528 9.18261L22.5281 9.35507L21.1139 10.7693C16.1385 5.79383 8.10258 5.74407 3.06592 10.62L2.91421 10.7693L1.5 9.35507C7.24869 3.60638 16.5334 3.54889 22.3528 9.18261Z" fill="black"/>
+</svg>

package/src/svg/x.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C4 3 3 4 3 5V19C3 20 4 21 5 21H19C20 21 21 20 21 19V5C21 4 20 3 19 3H5ZM16.9092 7H15.2128L12.4174 10.1954L10.0005 7H6.5L10.6826 12.4692L6.71846 17H8.4159L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7Z" fill="black"/>
+<path d="M14.6174 15.9846H15.5574L9.48974 7.96205H8.48103L14.6174 15.9846Z" fill="black"/>
+</svg>

package/src/svg/yle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0714 3H4.92857C3.86384 3 3 3.86384 3 4.92857V19.0714C3 20.1362 3.86384 21 4.92857 21H19.0714C20.1362 21 21 20.1362 21 19.0714V4.92857C21 3.86384 20.1362 3 19.0714 3ZM5.78124 9.20665H5.43353L5.34502 9.21206C5.12161 9.24077 5 9.38314 5 9.62035C5 9.75978 5.03211 9.95706 5.10093 10.2363L5.13842 10.3828L6.12414 13.8987L6.16491 14.0351C6.33956 14.5578 6.65484 14.8062 7.18905 14.8414L7.32721 14.8457H7.72257L7.61702 15.3684C7.58804 15.501 7.55906 15.6221 7.53592 15.6944C7.35489 16.2562 7.07459 16.375 6.59262 16.375C6.30817 16.375 6.09373 16.3593 5.9248 16.3421L5.74236 16.3215C5.62777 16.3086 5.53642 16.2979 5.45262 16.2979C5.25419 16.2979 5.13022 16.4025 5.10233 16.5885L5.09632 16.6731V16.9049L5.10244 16.996C5.12574 17.1575 5.21251 17.2321 5.31048 17.2818L5.37019 17.3092C5.60479 17.4159 5.89949 17.4736 6.78594 17.4736C7.67442 17.4736 8.33369 16.9976 8.54931 16.1984L8.82744 15.1182L10.0344 10.1512C10.0696 9.99584 10.1177 9.7579 10.1177 9.62035C10.1177 9.40055 9.9929 9.24866 9.79347 9.21413L9.70358 9.20665H9.37522L9.29452 9.21104C9.09116 9.23479 8.98002 9.35801 8.89695 9.65212L8.86699 9.77057L7.93895 13.8049H7.73232L7.65124 13.8027C7.42369 13.7892 7.30554 13.7075 7.21143 13.4073L7.17709 13.2842L6.21547 9.64024C6.15786 9.433 6.08467 9.2516 5.86903 9.21385L5.78124 9.20665ZM16.6599 9.05168C14.9176 9.05168 14.1397 10.002 14.1397 12.1325C14.1397 14.2087 14.8651 14.9807 16.8147 14.9807C17.6846 14.9807 18.2564 14.8616 18.479 14.7601C18.6015 14.7076 18.7206 14.6403 18.7485 14.4457L18.7546 14.3542V14.1419L18.7486 14.0572C18.7208 13.8709 18.5971 13.7661 18.3988 13.7661C18.3461 13.7661 18.2923 13.7733 18.2321 13.784L17.8948 13.8458C17.7022 13.8752 17.4374 13.9015 17.0462 13.9015C15.6425 13.9015 15.4175 13.6588 15.3645 12.5706L15.3587 12.4302H18.1216L18.2574 12.4258C18.8167 12.388 19 12.1093 19 11.705L18.9961 11.4746C18.9573 10.3802 18.6017 9.05168 16.6599 9.05168ZM12.1383 6.25H11.3075C11.1714 6.25 10.8292 6.25 10.7681 6.54637L10.7587 6.64447V7.01233L10.7605 7.05288C10.7732 7.19396 10.8594 7.38697 11.2269 7.4209L11.3458 7.42609H11.5503V14.3349L11.5523 14.4315C11.5652 14.7083 11.6436 14.8692 11.9219 14.8986L12.0223 14.9036H12.2932L12.3884 14.898C12.6495 14.8655 12.7289 14.6917 12.7434 14.435L12.7459 14.3349L12.7451 7.05037C12.7367 6.63213 12.6594 6.25 12.1383 6.25ZM16.6808 9.97473C17.4842 9.97441 17.8334 10.4219 17.8921 11.2874L17.8998 11.4546L15.3808 11.4567L15.3913 11.2797C15.4676 10.3683 15.8653 9.97512 16.6808 9.97473Z" fill="black"/>
+</svg>

package/src/svg/youth.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 17V22H14V17H16V24H8V17H10ZM15.3333 9C16.8061 9 18 10.1939 18 11.6667V17H16V11.6667C16 11.2985 15.7015 11 15.3333 11H8.66667C8.33195 11 8.05485 11.2467 8.00723 11.5682L8 11.6667V17H6V11.67C6 10.1972 7.19391 9 8.66667 9H15.3333ZM13.5 0C14.6046 0 15.5 0.895431 15.5 2H18V4H15.5V5C15.5 5.98703 15.2478 6.9091 14.5784 7.57843C13.9091 8.24776 12.987 8.5 12 8.5C11.013 8.5 10.0909 8.24776 9.42157 7.57843C8.75224 6.9091 8.5 5.98703 8.5 5V2C8.5 0.895431 9.39543 0 10.5 0H13.5ZM13.5 4H10.5V5C10.5 5.66982 10.6693 5.99776 10.8358 6.16421C11.0022 6.33067 11.3302 6.5 12 6.5C12.6698 6.5 12.9978 6.33067 13.1642 6.16421C13.3307 5.99776 13.5 5.66982 13.5 5V4Z" fill="black"/>
+</svg>

package/src/svg/youtube.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0714 3C20.0855 3 20.9173 3.78353 20.9942 4.7779L21 4.92857V19.0714C21 20.0855 20.2165 20.9173 19.2221 20.9942L19.0714 21H4.92857C3.91454 21 3.08273 20.2165 3.0058 19.2221L3 19.0714V4.92857C3 3.91454 3.78353 3.08273 4.7779 3.0058L4.92857 3H19.0714ZM12.4663 7.00151L11.7079 7.00026C10.7113 7.0063 7.45039 7.04495 6.52908 7.29231C5.92669 7.45366 5.45224 7.92904 5.29122 8.53266C5.06455 9.38031 5.01349 10.9414 5.00199 11.6017V12.2173C5.01349 12.8776 5.06455 14.4387 5.29122 15.2864C5.45224 15.89 5.92669 16.3456 6.52908 16.5069C7.36319 16.7309 10.115 16.7837 11.368 16.7962H12.6307C13.8837 16.7837 16.6355 16.7309 17.4696 16.5069C18.072 16.3456 18.5464 15.89 18.7074 15.2864C18.8713 14.6737 18.9434 13.6882 18.9751 12.9396L18.9995 11.8169C18.9958 11.3788 18.9649 9.49548 18.7074 8.53266C18.5464 7.92904 18.072 7.45364 17.4696 7.29231C16.5968 7.05797 13.6241 7.01095 12.4663 7.00151ZM10.5992 9.79942L14.0995 11.8997L10.5992 13.9998V9.79942Z" fill="black"/>
+</svg>

package/src/svg/zoom-in.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2C18.4183 2 22 5.58172 22 10C22 14.4183 18.4183 18 14 18C12.1298 18 10.4095 17.3583 9.04729 16.283L3.41421 21.9142L2 20.5L7.64217 14.8564C6.61203 13.5098 6 11.8264 6 10C6 5.58172 9.58172 2 14 2ZM14 4C10.6863 4 8 6.68629 8 10C8 13.3137 10.6863 16 14 16C17.3137 16 20 13.3137 20 10C20 6.68629 17.3137 4 14 4ZM15 6V9H18V11H15V14H13V11H10V9H13V6H15Z" fill="black"/>
+</svg>

package/src/svg/zoom-out.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2C18.4183 2 22 5.58172 22 10C22 14.4183 18.4183 18 14 18C12.1298 18 10.4095 17.3583 9.04729 16.283L3.41421 21.9142L2 20.5L7.64217 14.8564C6.61203 13.5098 6 11.8264 6 10C6 5.58172 9.58172 2 14 2ZM14 4C10.6863 4 8 6.68629 8 10C8 13.3137 10.6863 16 14 16C17.3137 16 20 13.3137 20 10C20 6.68629 17.3137 4 14 4ZM18 9V11H10V9H18Z" fill="black"/>
+</svg>

package/src/svg/zoom-text.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2C19.4183 2 23 5.58172 23 10C23 14.4183 19.4183 18 15 18C13.1298 18 11.4095 17.3583 10.0473 16.283L4.41421 21.9142L3 20.5L8.64217 14.8564C7.61203 13.5098 7 11.8264 7 10C7 5.58172 10.5817 2 15 2ZM15 4C11.6863 4 9 6.68629 9 10C9 13.3137 11.6863 16 15 16C18.3137 16 21 13.3137 21 10C21 6.68629 18.3137 4 15 4ZM16.0646 6.5L18.25 13H16.4491L16.0552 11.7601H13.8604L13.4758 13H11.75L13.9354 6.5H16.0646ZM4.65079 7.5L6.5 13H4.97619L4.64286 11.9509H2.78571L2.46032 13H1L2.84921 7.5H4.65079ZM3.7381 8.91474H3.70635L3.65164 9.15923C3.6376 9.2168 3.62107 9.2813 3.60233 9.34907L3.53968 9.55853L3.16667 10.7428H4.26984L3.89683 9.55853C3.79365 9.24061 3.7381 8.91474 3.7381 8.91474ZM14.9859 8.17197H14.9484L14.8735 8.50268C14.8575 8.5667 14.8392 8.63666 14.8188 8.7094L14.7514 8.9328L14.3106 10.3324H15.6144L15.1735 8.9328C15.0516 8.55708 14.9859 8.17197 14.9859 8.17197Z" fill="black"/>
+</svg>

package/src/variables/_colors.scss

@@ -1,97 +1,154 @@
 // Color design token imports
 // This file provides SCSS variable mappings for color tokens from @ivds/design-tokens
-// The CSS custom properties are imported at the top level in all.scss
+// Import the new Ivory Coast themed brand colors from design tokens
+@import '../../../ivds-design-tokens/lib/color/brand.scss';
+@import '../../../ivds-design-tokens/lib/color/ui/base.scss';
+@import '../../../ivds-design-tokens/lib/color/ui/feedback.scss';
 
 // SCSS variable mappings for easier development
 // These provide fallback values and easier SCSS usage
 
-// Brand colors - Primary
-$color-brand-primary-50: var(--color-brand-primary-50) !default;
-$color-brand-primary-100: var(--color-brand-primary-100) !default;
-$color-brand-primary-200: var(--color-brand-primary-200) !default;
-$color-brand-primary-300: var(--color-brand-primary-300) !default;
-$color-brand-primary-400: var(--color-brand-primary-400) !default;
-$color-brand-primary-500: var(--color-brand-primary-500) !default;
-$color-brand-primary-600: var(--color-brand-primary-600) !default;
-$color-brand-primary-700: var(--color-brand-primary-700) !default;
-$color-brand-primary-800: var(--color-brand-primary-800) !default;
-$color-brand-primary-900: var(--color-brand-primary-900) !default;
-$color-brand-primary-950: var(--color-brand-primary-950) !default;
-
-// Brand colors - Secondary
-$color-brand-secondary-50: var(--color-brand-secondary-50) !default;
-$color-brand-secondary-100: var(--color-brand-secondary-100) !default;
-$color-brand-secondary-200: var(--color-brand-secondary-200) !default;
-$color-brand-secondary-300: var(--color-brand-secondary-300) !default;
-$color-brand-secondary-400: var(--color-brand-secondary-400) !default;
-$color-brand-secondary-500: var(--color-brand-secondary-500) !default;
-$color-brand-secondary-600: var(--color-brand-secondary-600) !default;
-$color-brand-secondary-700: var(--color-brand-secondary-700) !default;
-$color-brand-secondary-800: var(--color-brand-secondary-800) !default;
-$color-brand-secondary-900: var(--color-brand-secondary-900) !default;
-$color-brand-secondary-950: var(--color-brand-secondary-950) !default;
-
-// Semantic colors - Neutral
-$color-semantic-neutral-50: var(--color-semantic-neutral-50) !default;
-$color-semantic-neutral-100: var(--color-semantic-neutral-100) !default;
-$color-semantic-neutral-200: var(--color-semantic-neutral-200) !default;
-$color-semantic-neutral-300: var(--color-semantic-neutral-300) !default;
-$color-semantic-neutral-400: var(--color-semantic-neutral-400) !default;
-$color-semantic-neutral-500: var(--color-semantic-neutral-500) !default;
-$color-semantic-neutral-600: var(--color-semantic-neutral-600) !default;
-$color-semantic-neutral-700: var(--color-semantic-neutral-700) !default;
-$color-semantic-neutral-800: var(--color-semantic-neutral-800) !default;
-$color-semantic-neutral-900: var(--color-semantic-neutral-900) !default;
-$color-semantic-neutral-950: var(--color-semantic-neutral-950) !default;
-
-// Semantic colors - Success
-$color-semantic-success-50: var(--color-semantic-success-50) !default;
-$color-semantic-success-100: var(--color-semantic-success-100) !default;
-$color-semantic-success-200: var(--color-semantic-success-200) !default;
-$color-semantic-success-300: var(--color-semantic-success-300) !default;
-$color-semantic-success-400: var(--color-semantic-success-400) !default;
-$color-semantic-success-500: var(--color-semantic-success-500) !default;
-$color-semantic-success-600: var(--color-semantic-success-600) !default;
-$color-semantic-success-700: var(--color-semantic-success-700) !default;
-$color-semantic-success-800: var(--color-semantic-success-800) !default;
-$color-semantic-success-900: var(--color-semantic-success-900) !default;
-$color-semantic-success-950: var(--color-semantic-success-950) !default;
-
-// Semantic colors - Warning
-$color-semantic-warning-50: var(--color-semantic-warning-50) !default;
-$color-semantic-warning-100: var(--color-semantic-warning-100) !default;
-$color-semantic-warning-200: var(--color-semantic-warning-200) !default;
-$color-semantic-warning-300: var(--color-semantic-warning-300) !default;
-$color-semantic-warning-400: var(--color-semantic-warning-400) !default;
-$color-semantic-warning-500: var(--color-semantic-warning-500) !default;
-$color-semantic-warning-600: var(--color-semantic-warning-600) !default;
-$color-semantic-warning-700: var(--color-semantic-warning-700) !default;
-$color-semantic-warning-800: var(--color-semantic-warning-800) !default;
-$color-semantic-warning-900: var(--color-semantic-warning-900) !default;
-$color-semantic-warning-950: var(--color-semantic-warning-950) !default;
-
-// Semantic colors - Error
-$color-semantic-error-50: var(--color-semantic-error-50) !default;
-$color-semantic-error-100: var(--color-semantic-error-100) !default;
-$color-semantic-error-200: var(--color-semantic-error-200) !default;
-$color-semantic-error-300: var(--color-semantic-error-300) !default;
-$color-semantic-error-400: var(--color-semantic-error-400) !default;
-$color-semantic-error-500: var(--color-semantic-error-500) !default;
-$color-semantic-error-600: var(--color-semantic-error-600) !default;
-$color-semantic-error-700: var(--color-semantic-error-700) !default;
-$color-semantic-error-800: var(--color-semantic-error-800) !default;
-$color-semantic-error-900: var(--color-semantic-error-900) !default;
-$color-semantic-error-950: var(--color-semantic-error-950) !default;
-
-// Semantic colors - Info
-$color-semantic-info-50: var(--color-semantic-info-50) !default;
-$color-semantic-info-100: var(--color-semantic-info-100) !default;
-$color-semantic-info-200: var(--color-semantic-info-200) !default;
-$color-semantic-info-300: var(--color-semantic-info-300) !default;
-$color-semantic-info-400: var(--color-semantic-info-400) !default;
-$color-semantic-info-500: var(--color-semantic-info-500) !default;
-$color-semantic-info-600: var(--color-semantic-info-600) !default;
-$color-semantic-info-700: var(--color-semantic-info-700) !default;
-$color-semantic-info-800: var(--color-semantic-info-800) !default;
-$color-semantic-info-900: var(--color-semantic-info-900) !default;
-$color-semantic-info-950: var(--color-semantic-info-950) !default;
+// ============================================
+// IVORY COAST BRAND COLORS
+// ============================================
+
+// Orange (Primary) - From Ivory Coast flag
+$color-brand-orange: $color-brand-orange !default;
+$color-brand-orange-light: $color-brand-orange-light !default;
+$color-brand-orange-medium-light: $color-brand-orange-medium-light !default;
+$color-brand-orange-dark: $color-brand-orange-dark !default;
+
+// Green (Secondary) - From Ivory Coast flag
+$color-brand-green: $color-brand-green !default;
+$color-brand-green-light: $color-brand-green-light !default;
+$color-brand-green-medium-light: $color-brand-green-medium-light !default;
+$color-brand-green-dark: $color-brand-green-dark !default;
+
+// Cocoa - Representing cocoa production
+$color-brand-cocoa: $color-brand-cocoa !default;
+$color-brand-cocoa-light: $color-brand-cocoa-light !default;
+$color-brand-cocoa-medium-light: $color-brand-cocoa-medium-light !default;
+$color-brand-cocoa-dark: $color-brand-cocoa-dark !default;
+
+// Gold - Representing savanna landscapes
+$color-brand-gold: $color-brand-gold !default;
+$color-brand-gold-light: $color-brand-gold-light !default;
+$color-brand-gold-medium-light: $color-brand-gold-medium-light !default;
+$color-brand-gold-dark: $color-brand-gold-dark !default;
+
+// Lagoon - Representing coastal lagoons
+$color-brand-lagoon: $color-brand-lagoon !default;
+$color-brand-lagoon-light: $color-brand-lagoon-light !default;
+$color-brand-lagoon-medium-light: $color-brand-lagoon-medium-light !default;
+$color-brand-lagoon-dark: $color-brand-lagoon-dark !default;
+
+// ============================================
+// BACKWARDS COMPATIBILITY ALIASES
+// ============================================
+// Map old primary/secondary to new orange/green for backwards compatibility
+$color-brand-primary: $color-brand-orange !default;
+$color-brand-primary-light: $color-brand-orange-light !default;
+$color-brand-primary-dark: $color-brand-orange-dark !default;
+
+$color-brand-secondary: $color-brand-green !default;
+$color-brand-secondary-light: $color-brand-green-light !default;
+$color-brand-secondary-dark: $color-brand-green-dark !default;
+
+// ============================================
+// UI COLORS - BASE (Neutrals, Black, White)
+// ============================================
+$color-ui-black: $color-ui-black !default;
+$color-ui-white: $color-ui-white !default;
+
+// Neutral scale (50-950)
+$color-ui-neutral-50: $color-ui-neutral-50 !default;
+$color-ui-neutral-100: $color-ui-neutral-100 !default;
+$color-ui-neutral-200: $color-ui-neutral-200 !default;
+$color-ui-neutral-300: $color-ui-neutral-300 !default;
+$color-ui-neutral-400: $color-ui-neutral-400 !default;
+$color-ui-neutral-500: $color-ui-neutral-500 !default;
+$color-ui-neutral-600: $color-ui-neutral-600 !default;
+$color-ui-neutral-700: $color-ui-neutral-700 !default;
+$color-ui-neutral-800: $color-ui-neutral-800 !default;
+$color-ui-neutral-900: $color-ui-neutral-900 !default;
+$color-ui-neutral-950: $color-ui-neutral-950 !default;
+
+// ============================================
+// UI COLORS - FEEDBACK (Success, Error, Warning, Info)
+// ============================================
+
+// Success scale (50-950)
+$color-ui-success-50: $color-ui-success-50 !default;
+$color-ui-success-100: $color-ui-success-100 !default;
+$color-ui-success-200: $color-ui-success-200 !default;
+$color-ui-success-300: $color-ui-success-300 !default;
+$color-ui-success-400: $color-ui-success-400 !default;
+$color-ui-success-500: $color-ui-success-500 !default;
+$color-ui-success-600: $color-ui-success-600 !default;
+$color-ui-success-700: $color-ui-success-700 !default;
+$color-ui-success-800: $color-ui-success-800 !default;
+$color-ui-success-900: $color-ui-success-900 !default;
+$color-ui-success-950: $color-ui-success-950 !default;
+
+// Error scale (50-950)
+$color-ui-error-50: $color-ui-error-50 !default;
+$color-ui-error-100: $color-ui-error-100 !default;
+$color-ui-error-200: $color-ui-error-200 !default;
+$color-ui-error-300: $color-ui-error-300 !default;
+$color-ui-error-400: $color-ui-error-400 !default;
+$color-ui-error-500: $color-ui-error-500 !default;
+$color-ui-error-600: $color-ui-error-600 !default;
+$color-ui-error-700: $color-ui-error-700 !default;
+$color-ui-error-800: $color-ui-error-800 !default;
+$color-ui-error-900: $color-ui-error-900 !default;
+$color-ui-error-950: $color-ui-error-950 !default;
+
+// Warning scale (50-950)
+$color-ui-warning-50: $color-ui-warning-50 !default;
+$color-ui-warning-100: $color-ui-warning-100 !default;
+$color-ui-warning-200: $color-ui-warning-200 !default;
+$color-ui-warning-300: $color-ui-warning-300 !default;
+$color-ui-warning-400: $color-ui-warning-400 !default;
+$color-ui-warning-500: $color-ui-warning-500 !default;
+$color-ui-warning-600: $color-ui-warning-600 !default;
+$color-ui-warning-700: $color-ui-warning-700 !default;
+$color-ui-warning-800: $color-ui-warning-800 !default;
+$color-ui-warning-900: $color-ui-warning-900 !default;
+$color-ui-warning-950: $color-ui-warning-950 !default;
+
+// Info scale (50-950)
+$color-ui-info-50: $color-ui-info-50 !default;
+$color-ui-info-100: $color-ui-info-100 !default;
+$color-ui-info-200: $color-ui-info-200 !default;
+$color-ui-info-300: $color-ui-info-300 !default;
+$color-ui-info-400: $color-ui-info-400 !default;
+$color-ui-info-500: $color-ui-info-500 !default;
+$color-ui-info-600: $color-ui-info-600 !default;
+$color-ui-info-700: $color-ui-info-700 !default;
+$color-ui-info-800: $color-ui-info-800 !default;
+$color-ui-info-900: $color-ui-info-900 !default;
+$color-ui-info-950: $color-ui-info-950 !default;
+
+// ============================================
+// BACKWARDS COMPATIBILITY - Semantic Colors
+// ============================================
+// Map old semantic naming to new UI feedback colors (using 600 as default)
+$color-semantic-success: $color-ui-success-600 !default;
+$color-semantic-success-light: $color-ui-success-100 !default;
+$color-semantic-success-dark: $color-ui-success-900 !default;
+
+$color-semantic-error: $color-ui-error-600 !default;
+$color-semantic-error-light: $color-ui-error-100 !default;
+$color-semantic-error-dark: $color-ui-error-900 !default;
+
+$color-semantic-warning: $color-ui-warning-600 !default;
+$color-semantic-warning-light: $color-ui-warning-100 !default;
+$color-semantic-warning-dark: $color-ui-warning-900 !default;
+
+$color-semantic-info: $color-ui-info-600 !default;
+$color-semantic-info-light: $color-ui-info-100 !default;
+$color-semantic-info-dark: $color-ui-info-900 !default;
+
+$color-semantic-neutral: $color-ui-neutral-500 !default;
+$color-semantic-neutral-light: $color-ui-neutral-100 !default;
+$color-semantic-neutral-dark: $color-ui-neutral-900 !default;

package/src/variables/colors.stories.js

@@ -0,0 +1,212 @@
+/**
+ * IVDS Color System - Ivory Coast Theme
+ * 
+ * This story showcases the new Ivory Coast themed brand colors
+ * that replace the previous pink/purple palette.
+ */
+
+export default {
+  title: 'Design Tokens/Colors',
+  parameters: {
+    docs: {
+      description: {
+        component: 'The IVDS color system features Ivory Coast themed brand colors inspired by the nation\'s flag, culture, and natural beauty.',
+      },
+    },
+  },
+};
+
+const ColorSwatch = ({ name, value, description }) => `
+  <div style="margin-bottom: 24px;">
+    <div style="display: flex; align-items: center; gap: 16px;">
+      <div style="
+        width: 80px;
+        height: 80px;
+        background-color: ${value};
+        border-radius: 8px;
+        border: 1px solid #e5e5e5;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      "></div>
+      <div>
+        <div style="font-weight: 600; font-size: 16px; margin-bottom: 4px;">${name}</div>
+        <div style="font-family: monospace; color: #666; font-size: 14px; margin-bottom: 4px;">${value}</div>
+        <div style="color: #666; font-size: 14px;">${description}</div>
+      </div>
+    </div>
+  </div>
+`;
+
+const ColorScale = ({ name, colors, description }) => `
+  <div style="margin-bottom: 48px;">
+    <h3 style="margin-bottom: 8px; font-size: 20px; font-weight: 600;">${name}</h3>
+    <p style="color: #666; margin-bottom: 24px;">${description}</p>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+      ${colors.map(color => ColorSwatch(color)).join('')}
+    </div>
+  </div>
+`;
+
+export const BrandColors = () => {
+  const container = document.createElement('div');
+  container.style.padding = '32px';
+  container.style.maxWidth = '1200px';
+  
+  container.innerHTML = `
+    <h1 style="margin-bottom: 16px; font-size: 32px; font-weight: 700;">Ivory Coast Brand Colors</h1>
+    <p style="color: #666; margin-bottom: 48px; font-size: 16px; line-height: 1.6;">
+      Our brand colors are inspired by Ivory Coast's rich culture, natural beauty, and national identity. 
+      Each color tells a story and connects to the nation's heritage.
+    </p>
+
+    ${ColorScale({
+      name: '🇨🇮 Orange (Primary)',
+      description: 'From the Ivory Coast flag - represents the savanna and the spirit of the nation',
+      colors: [
+        { name: 'Orange', value: '#ff8c00', description: 'Primary brand color' },
+        { name: 'Orange Light', value: '#fff4e6', description: 'Backgrounds and subtle accents' },
+        { name: 'Orange Medium Light', value: '#ffd699', description: 'Hover states and highlights' },
+        { name: 'Orange Dark', value: '#cc7000', description: 'Text and emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '🇨🇮 Green (Secondary)',
+      description: 'From the Ivory Coast flag - represents hope, forests, and natural resources',
+      colors: [
+        { name: 'Green', value: '#009e60', description: 'Secondary brand color' },
+        { name: 'Green Light', value: '#e6f7f0', description: 'Backgrounds and subtle accents' },
+        { name: 'Green Medium Light', value: '#99e6c7', description: 'Hover states and highlights' },
+        { name: 'Green Dark', value: '#007a4d', description: 'Text and emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '🍫 Cocoa',
+      description: 'Representing Ivory Coast\'s position as the world\'s largest cocoa producer',
+      colors: [
+        { name: 'Cocoa', value: '#6b4423', description: 'Rich brown accent' },
+        { name: 'Cocoa Light', value: '#f5f0eb', description: 'Warm backgrounds' },
+        { name: 'Cocoa Medium Light', value: '#d4b8a0', description: 'Subtle accents' },
+        { name: 'Cocoa Dark', value: '#4a2f18', description: 'Deep emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '✨ Gold',
+      description: 'Representing the golden savanna landscapes and prosperity',
+      colors: [
+        { name: 'Gold', value: '#d4af37', description: 'Warm metallic accent' },
+        { name: 'Gold Light', value: '#faf7ed', description: 'Elegant backgrounds' },
+        { name: 'Gold Medium Light', value: '#ead9a8', description: 'Soft highlights' },
+        { name: 'Gold Dark', value: '#a88c2c', description: 'Rich emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '🌊 Lagoon',
+      description: 'Representing the coastal lagoons and Atlantic Ocean',
+      colors: [
+        { name: 'Lagoon', value: '#0077be', description: 'Cool blue accent' },
+        { name: 'Lagoon Light', value: '#e6f4fb', description: 'Fresh backgrounds' },
+        { name: 'Lagoon Medium Light', value: '#99d5f0', description: 'Calm highlights' },
+        { name: 'Lagoon Dark', value: '#005f98', description: 'Deep water emphasis' },
+      ]
+    })}
+
+    <div style="margin-top: 48px; padding: 24px; background-color: #f5f5f5; border-radius: 8px;">
+      <h3 style="margin-bottom: 12px; font-size: 18px; font-weight: 600;">Usage Guidelines</h3>
+      <ul style="color: #666; line-height: 1.8; padding-left: 24px;">
+        <li><strong>Orange</strong> - Use for primary actions, CTAs, and key brand moments</li>
+        <li><strong>Green</strong> - Use for secondary actions, success states, and environmental themes</li>
+        <li><strong>Cocoa</strong> - Use for warm accents, agricultural themes, and earthy tones</li>
+        <li><strong>Gold</strong> - Use for premium features, achievements, and celebratory moments</li>
+        <li><strong>Lagoon</strong> - Use for informational content, calm states, and coastal themes</li>
+      </ul>
+    </div>
+  `;
+  
+  return container;
+};
+
+BrandColors.parameters = {
+  docs: {
+    description: {
+      story: 'The complete Ivory Coast brand color palette with all shades and usage guidelines.',
+    },
+  },
+};
+
+export const UIColors = () => {
+  const container = document.createElement('div');
+  container.style.padding = '32px';
+  container.style.maxWidth = '1200px';
+  
+  container.innerHTML = `
+    <h1 style="margin-bottom: 16px; font-size: 32px; font-weight: 700;">UI Colors</h1>
+    <p style="color: #666; margin-bottom: 48px; font-size: 16px; line-height: 1.6;">
+      Semantic colors for user interface feedback and neutral tones.
+    </p>
+
+    ${ColorScale({
+      name: '✅ Success',
+      description: 'For positive feedback, confirmations, and successful actions',
+      colors: [
+        { name: 'Success 600', value: '#16a34a', description: 'Default success' },
+        { name: 'Success 100', value: '#dcfce7', description: 'Light background' },
+        { name: 'Success 900', value: '#14532d', description: 'Dark emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '❌ Error',
+      description: 'For errors, warnings, and destructive actions',
+      colors: [
+        { name: 'Error 600', value: '#dc2626', description: 'Default error' },
+        { name: 'Error 100', value: '#fee2e2', description: 'Light background' },
+        { name: 'Error 900', value: '#7f1d1d', description: 'Dark emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '⚠️ Warning',
+      description: 'For cautions, alerts, and important notices',
+      colors: [
+        { name: 'Warning 600', value: '#d97706', description: 'Default warning' },
+        { name: 'Warning 100', value: '#fef3c7', description: 'Light background' },
+        { name: 'Warning 900', value: '#78350f', description: 'Dark emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: 'ℹ️ Info',
+      description: 'For informational messages and helpful tips',
+      colors: [
+        { name: 'Info 600', value: '#2563eb', description: 'Default info' },
+        { name: 'Info 100', value: '#dbeafe', description: 'Light background' },
+        { name: 'Info 900', value: '#1e3a8a', description: 'Dark emphasis' },
+      ]
+    })}
+
+    ${ColorScale({
+      name: '⚪ Neutrals',
+      description: 'For text, borders, backgrounds, and UI elements',
+      colors: [
+        { name: 'White', value: '#ffffff', description: 'Pure white' },
+        { name: 'Neutral 100', value: '#f5f5f5', description: 'Light backgrounds' },
+        { name: 'Neutral 500', value: '#737373', description: 'Medium gray' },
+        { name: 'Neutral 900', value: '#171717', description: 'Dark text' },
+        { name: 'Black', value: '#000000', description: 'Pure black' },
+      ]
+    })}
+  `;
+  
+  return container;
+};
+
+UIColors.parameters = {
+  docs: {
+    description: {
+      story: 'Semantic UI colors for feedback states and neutral tones.',
+    },
+  },
+};