@wonderflow/tokens/platforms/web/tokens.css

Design tokens from Wonderflow design language

/**
 * Do not edit directly
 * Generated on Wed, 02 Jul 2025 10:23:06 GMT
 */

:root {
  --color-blue-0: 180 100% 95%;
  --color-blue-5: 187 100% 89%;
  --color-blue-10: 200 100% 83%;
  --color-blue-20: 206 72% 67%;
  --color-blue-30: 210 60% 54%;
  --color-blue-40: 214 66% 44%;
  --color-blue-50: 217 80% 35%;
  --color-blue-60: 219 93% 27%;
  --color-blue-70: 221 100% 22%;
  --color-blue-80: 222 100% 17%;
  --color-blue-90: 223 100% 12%;
  --color-blue-100: 223 100% 7%;
  --color-cyan-0: 186 100% 96%;
  --color-cyan-5: 187 69% 85%;
  --color-cyan-10: 187 65% 74%;
  --color-cyan-20: 187 57% 58%;
  --color-cyan-30: 187 52% 48%;
  --color-cyan-40: 187 60% 40%;
  --color-cyan-50: 187 64% 33%;
  --color-cyan-60: 187 66% 27%;
  --color-cyan-70: 187 66% 22%;
  --color-cyan-80: 186 67% 18%;
  --color-cyan-90: 187 66% 15%;
  --color-cyan-100: 186 64% 12%;
  --color-dipsy-0: 81 55% 94%;
  --color-dipsy-5: 82 54% 84%;
  --color-dipsy-10: 83 53% 74%;
  --color-dipsy-20: 83 54% 64%;
  --color-dipsy-30: 83 54% 49%;
  --color-dipsy-40: 83 56% 43%;
  --color-dipsy-50: 83 60% 38%;
  --color-dipsy-60: 83 60% 32%;
  --color-dipsy-70: 83 80% 24%;
  --color-dipsy-80: 82 80% 20%;
  --color-dipsy-90: 82 68% 17%;
  --color-dipsy-100: 84 77% 12%;
  --color-green-0: 149 100% 91%;
  --color-green-5: 145 95% 84%;
  --color-green-10: 145 76% 75%;
  --color-green-20: 146 62% 59%;
  --color-green-30: 147 63% 46%;
  --color-green-40: 149 83% 35%;
  --color-green-50: 152 100% 28%;
  --color-green-60: 156 100% 23%;
  --color-green-70: 160 100% 18%;
  --color-green-80: 166 100% 13%;
  --color-green-90: 170 100% 8%;
  --color-green-100: 177 100% 4%;
  --color-indigo-0: 240 60% 98%;
  --color-indigo-5: 240 60% 95%;
  --color-indigo-10: 240 57% 90%;
  --color-indigo-20: 240 58% 85%;
  --color-indigo-30: 240 52% 74%;
  --color-indigo-40: 241 60% 63%;
  --color-indigo-50: 241 60% 56%;
  --color-indigo-60: 242 60% 48%;
  --color-indigo-70: 241 60% 38%;
  --color-indigo-80: 241 61% 27%;
  --color-indigo-90: 241 61% 16%;
  --color-indigo-100: 240 61% 12%;
  --color-magenta-0: 327 73% 97%;
  --color-magenta-5: 324 70% 91%;
  --color-magenta-10: 324 70% 84%;
  --color-magenta-20: 324 70% 74%;
  --color-magenta-30: 324 60% 64%;
  --color-magenta-40: 324 60% 44%;
  --color-magenta-50: 324 70% 38%;
  --color-magenta-60: 324 70% 31%;
  --color-magenta-70: 324 70% 25%;
  --color-magenta-80: 323 71% 20%;
  --color-magenta-90: 324 71% 16%;
  --color-magenta-100: 324 70% 12%;
  --color-mint-0: 165 62% 95%;
  --color-mint-5: 165 61% 90%;
  --color-mint-10: 165 60% 82%;
  --color-mint-20: 166 59% 71%;
  --color-mint-30: 166 60% 55%;
  --color-mint-40: 166 60% 40%;
  --color-mint-50: 165 60% 35%;
  --color-mint-60: 165 59% 30%;
  --color-mint-70: 165 61% 24%;
  --color-mint-80: 165 63% 17%;
  --color-mint-90: 166 64% 13%;
  --color-mint-100: 166 61% 10%;
  --color-primary-0: 210 20% 98%;
  --color-primary-5: 220 19% 91%;
  --color-primary-10: 220 16% 85%;
  --color-primary-20: 219 14% 75%;
  --color-primary-30: 220 12% 66%;
  --color-primary-40: 221 10% 56%;
  --color-primary-50: 221 9% 49%;
  --color-primary-60: 221 10% 39%;
  --color-primary-70: 221 10% 30%;
  --color-primary-80: 219 13% 22%;
  --color-primary-90: 218 11% 14%;
  --color-primary-100: 225 11% 7%;
  --color-purple-0: 300 100% 98%;
  --color-purple-5: 298 94% 93%;
  --color-purple-10: 299 65% 87%;
  --color-purple-20: 298 47% 75%;
  --color-purple-30: 297 39% 64%;
  --color-purple-40: 298 32% 54%;
  --color-purple-50: 298 32% 46%;
  --color-purple-60: 298 35% 38%;
  --color-purple-70: 298 38% 31%;
  --color-purple-80: 298 41% 25%;
  --color-purple-90: 297 42% 18%;
  --color-purple-100: 298 43% 12%;
  --color-red-0: 343 100% 96%;
  --color-red-5: 351 100% 88%;
  --color-red-10: 351 100% 81%;
  --color-red-20: 351 77% 64%;
  --color-red-30: 351 66% 49%;
  --color-red-40: 351 92% 37%;
  --color-red-50: 351 100% 31%;
  --color-red-60: 351 100% 25%;
  --color-red-70: 351 100% 20%;
  --color-red-80: 350 100% 15%;
  --color-red-90: 350 100% 10%;
  --color-red-100: 351 100% 5%;
  --color-salmon-0: 16 73% 97%;
  --color-salmon-5: 15 70% 91%;
  --color-salmon-10: 15 70% 83%;
  --color-salmon-20: 15 69% 77%;
  --color-salmon-30: 15 70% 68%;
  --color-salmon-40: 14 70% 60%;
  --color-salmon-50: 14 63% 53%;
  --color-salmon-60: 15 66% 45%;
  --color-salmon-70: 15 70% 37%;
  --color-salmon-80: 14 70% 29%;
  --color-salmon-90: 14 69% 19%;
  --color-salmon-100: 14 70% 12%;
  --color-support-brand: 0 100% 44%;
  --color-support-black: 0 0% 0%;
  --color-support-white: 0 0% 100%;
  --color-violet-0: 257 47% 97%;
  --color-violet-5: 263 51% 92%;
  --color-violet-10: 262 50% 85%;
  --color-violet-20: 263 50% 75%;
  --color-violet-30: 263 50% 62%;
  --color-violet-40: 263 50% 49%;
  --color-violet-50: 263 50% 40%;
  --color-violet-60: 262 50% 34%;
  --color-violet-70: 262 49% 30%;
  --color-violet-80: 262 50% 24%;
  --color-violet-90: 263 50% 18%;
  --color-violet-100: 263 51% 12%;
  --color-yellow-0: 60 100% 89%;
  --color-yellow-5: 46 100% 83%;
  --color-yellow-10: 38 100% 77%;
  --color-yellow-20: 31 89% 65%;
  --color-yellow-30: 28 72% 53%;
  --color-yellow-40: 26 82% 42%;
  --color-yellow-50: 25 100% 34%;
  --color-yellow-60: 24 100% 29%;
  --color-yellow-70: 22 100% 24%;
  --color-yellow-80: 22 100% 19%;
  --color-yellow-90: 22 100% 15%;
  --color-yellow-100: 21 100% 10%;
  --breakpoint-extra-small: 30em;
  --breakpoint-small: 48em;
  --breakpoint-medium: 60em;
  --breakpoint-large: 80em;
  --breakpoint-extra-large: 100em;
  --container-extra-large: 95.000rem;
  --container-large: 76.000rem;
  --container-medium: 57.000rem;
  --container-small: 45.000rem;
  --container-extra-small: 27.000rem;
  --icon-size-12: 0.750rem;
  --icon-size-16: 1.000rem;
  --icon-size-18: 1.125rem;
  --icon-size-24: 1.500rem;
  --icon-size-32: 2.000rem;
  --icon-size-40: 2.500rem;
  --icon-size-48: 3.000rem;
  --icon-size-56: 3.500rem;
  --radius-4: 0.250rem;
  --radius-8: 0.500rem;
  --radius-16: 1.000rem;
  --radius-24: 1.500rem;
  --radius-32: 2.000rem;
  --radius-40: 2.500rem;
  --radius-48: 3.000rem;
  --space-2: 0.125rem;
  --space-4: 0.250rem;
  --space-8: 0.500rem;
  --space-16: 1.000rem;
  --space-24: 1.500rem;
  --space-32: 2.000rem;
  --space-40: 2.500rem;
  --space-48: 3.000rem;
  --space-56: 3.500rem;
  --space-64: 4.000rem;
  --space-72: 4.500rem;
  --space-80: 5.000rem;
  --space-88: 5.500rem;
  --space-96: 6.000rem;
  --space-104: 6.500rem;
  --space-112: 7.000rem;
  --space-120: 7.500rem;
  --space-128: 8.000rem;
  --space-136: 8.500rem;
  --space-144: 9.000rem;
  --space-152: 9.500rem;
  --space-160: 10.000rem;
  --space-168: 10.500rem;
  --space-176: 11.000rem;
  --space-184: 11.500rem;
  --space-192: 12.000rem;
  --space-200: 12.500rem;
  --duration-100: 0.10s;
  --duration-200: 0.20s;
  --duration-250: 0.25s;
  --duration-300: 0.30s;
  --duration-500: 0.50s;
  --duration-750: 0.75s;
  --duration-1000: 1.00s;
  --easing-standard: cubic-bezier(0.3, 0.07, 0.34, 1);
  --easing-entrance: cubic-bezier(0, 0, 0.34, 1);
  --easing-exit: cubic-bezier(0.3, 0.07, 1, 1);
  --wds-font-family-sans: system-ui, sans-serif;
  --wds-font-family-mono: monospace;
  --wds-font-size-12: 0.75rem;
  --wds-font-size-14: 0.875rem;
  --wds-font-size-16: 1rem;
  --wds-font-size-20: 1.25rem;
  --wds-font-size-24: 1.5rem;
  --wds-font-size-28: 1.75rem;
  --wds-font-size-32: 2rem;
  --wds-font-size-40: 2.5rem;
  --wds-font-size-48: 3rem;
  --wds-font-size-56: 3.5rem;
  --wds-font-size-68: 4rem;
  --wds-font-size-80: 5rem;
  --wds-font-size-96: 6rem;
  --wds-font-weight-heavy: 800;
  --wds-font-weight-bold: 700;
  --wds-font-weight-semibold: 600;
  --wds-font-weight-regular: 400;
  --wds-font-weight-light: 300;
  --wds-line-height-16: 1rem;
  --wds-line-height-20: 1.25rem;
  --wds-line-height-24: 1.5rem;
  --wds-line-height-28: 1.75rem;
  --wds-line-height-32: 2rem;
  --wds-line-height-36: 2.25rem;
  --wds-line-height-40: 2.5rem;
  --wds-line-height-48: 3rem;
  --wds-line-height-56: 3.5rem;
  --wds-line-height-64: 4rem;
  --wds-line-height-80: 5rem;
  --wds-line-height-96: 6rem;
  --wds-line-height-108: 6.75rem;
  --wds-letter-spacing-0: 0;
  --wds-letter-spacing-16: 0.01rem;
  --wds-letter-spacing-24: 0.015rem;
  --wds-letter-spacing-32: 0.02rem;
}