# Colors ## PRIMARY | Token | value | preview | |- |- |- | | --primary | `#0070DD` | ![#0070DD](https://via.placeholder.com/15/0070DD/000000?text=+) | | --primary-dark | `#00509F` | ![#00509F](https://via.placeholder.com/15/00509F/000000?text=+) | | --primary-darker | `#003365` | ![#003365](https://via.placeholder.com/15/003365/000000?text=+) | | --primary-light | `#4F9DE7` | ![#4F9DE7](https://via.placeholder.com/15/4F9DE7/000000?text=+) | | --primary-lighter | `#97C5F0` | ![#97C5F0](https://via.placeholder.com/15/97C5F0/000000?text=+) | | --primary-lightest | `#DCECF9` | ![#DCECF9](https://via.placeholder.com/15/DCECF9/000000?text=+) | ## ALERT | Token | value | preview | |- |- |- | | --alert | `#D93737` | ![#D93737](https://via.placeholder.com/15/D93737/000000?text=+) | | --alert-dark | `#9C2828` | ![#9C2828](https://via.placeholder.com/15/9C2828/000000?text=+) | | --alert-darker | `#631919` | ![#631919](https://via.placeholder.com/15/631919/000000?text=+) | | --alert-light | `#EB776C` | ![#EB776C](https://via.placeholder.com/15/EB776C/000000?text=+) | | --alert-lighter | `#F7ADA5` | ![#F7ADA5](https://via.placeholder.com/15/F7ADA5/000000?text=+) | | --alert-lightest | `#F9E2E2` | ![#F9E2E2](https://via.placeholder.com/15/F9E2E2/000000?text=+) | ## SUCCESS | Token | value | preview | |- |- |- | | --success | `#2EA843` | ![#2EA843](https://via.placeholder.com/15/2EA843/000000?text=+) | | --success-dark | `#227934` | ![#227934](https://via.placeholder.com/15/227934/000000?text=+) | | --success-darker | `#154D26` | ![#154D26](https://via.placeholder.com/15/154D26/000000?text=+) | | --success-light | `#71C077` | ![#71C077](https://via.placeholder.com/15/71C077/000000?text=+) | | --success-lighter | `#A5D8AA` | ![#A5D8AA](https://via.placeholder.com/15/A5D8AA/000000?text=+) | | --success-lightest | `#D7EFDF` | ![#D7EFDF](https://via.placeholder.com/15/D7EFDF/000000?text=+) | ## WARNNING | Token | value | preview | |- |- |- | | --warning | `#FFC208` | ![#FFC208](https://via.placeholder.com/15/FFC208/000000?text=+) | | --warning-dark | `#B78707` | ![#B78707](https://via.placeholder.com/15/B78707/000000?text=+) | | --warning-darker | `#6B4A06` | ![#6B4A06](https://via.placeholder.com/15/6B4A06/000000?text=+) | | --warning-light | `#FFD462` | ![#FFD462](https://via.placeholder.com/15/FFD462/000000?text=+) | | --warning-lighter | `#FFE597` | ![#FFE597](https://via.placeholder.com/15/FFE597/000000?text=+) | | --warning-lightest | `#FFF5C7` | ![#FFF5C7](https://via.placeholder.com/15/FFF5C7/000000?text=+) | ## NEUTRALS | Token | value | preview | |- |- |- | | --inverse | `#1F1F1F` | ![#1F1F1F](https://via.placeholder.com/15/1F1F1F/000000?text=+) | | --inverse-light | `#494949` | ![#494949](https://via.placeholder.com/15/494949/000000?text=+) | | --inverse-lighter | `#707070` | ![#707070](https://via.placeholder.com/15/707070/000000?text=+) | | --inverse-lightest | `#A6A6A6` | ![#A6A6A6](https://via.placeholder.com/15/A6A6A6/000000?text=+) | | --secondary | `#D5D5D5` | ![#D5D5D5](https://via.placeholder.com/15/D5D5D5/000000?text=+) | | --secondary-dark | `#C5C5C5` | ![#C5C5C5](https://via.placeholder.com/15/C5C5C5/000000?text=+) | | --secondary-light | `#E5E5E5` | ![#E5E5E5](https://via.placeholder.com/15/E5E5E5/000000?text=+) | | --secondary-lighter | `#ECECEC` | ![#ECECEC](https://via.placeholder.com/15/ECECEC/000000?text=+) | | --secondary-lightest | `#F4F4F4` | ![#F4F4F4](https://via.placeholder.com/15/F4F4F4/000000?text=+) | ## ACCENT1 | Token | value | preview | |- |- |- | | --accent1 | `#F07D00` | ![#F07D00](https://via.placeholder.com/15/F07D00/000000?text=+) | | --accent1-dark | `#B35F13` | ![#B35F13](https://via.placeholder.com/15/B35F13/000000?text=+) | | --accent1-darker | `#743208` | ![#743208](https://via.placeholder.com/15/743208/000000?text=+) | | --accent1-light | `#FEAC5F` | ![#FEAC5F](https://via.placeholder.com/15/FEAC5F/000000?text=+) | | --accent1-lighter | `#FFC998` | ![#FFC998](https://via.placeholder.com/15/FFC998/000000?text=+) | | --accent1-lightest | `#FDE6CE` | ![#FDE6CE](https://via.placeholder.com/15/FDE6CE/000000?text=+) | ## ACCENT2 | Token | value | preview | |- |- |- | | --accent2 | `#7A53B2` | ![#7A53B2](https://via.placeholder.com/15/7A53B2/000000?text=+) | | --accent2-dark | `#644491` | ![#644491](https://via.placeholder.com/15/644491/000000?text=+) | | --accent2-darker | `#4E3572` | ![#4E3572](https://via.placeholder.com/15/4E3572/000000?text=+) | | --accent2-light | `#9D7EC6` | ![#9D7EC6](https://via.placeholder.com/15/9D7EC6/000000?text=+) | | --accent2-lighter | `#BFAADA` | ![#BFAADA](https://via.placeholder.com/15/BFAADA/000000?text=+) | | --accent2-lightest | `#E0D8EE` | ![#E0D8EE](https://via.placeholder.com/15/E0D8EE/000000?text=+) | ## ACCENT3 | Token | value | preview | |- |- |- | | --accent3 | `#3D51D4` | ![#3D51D4](https://via.placeholder.com/15/3D51D4/000000?text=+) | | --accent3-dark | `#2C3A98` | ![#2C3A98](https://via.placeholder.com/15/2C3A98/000000?text=+) | | --accent3-darker | `#1C2561` | ![#1C2561](https://via.placeholder.com/15/1C2561/000000?text=+) | | --accent3-light | `#7583E1` | ![#7583E1](https://via.placeholder.com/15/7583E1/000000?text=+) | | --accent3-lighter | `#ABB4ED` | ![#ABB4ED](https://via.placeholder.com/15/ABB4ED/000000?text=+) | | --accent3-lightest | `#E2E5F9` | ![#E2E5F9](https://via.placeholder.com/15/E2E5F9/000000?text=+) | ## ACCENT4 | Token | value | preview | |- |- |- | | --accent4 | `#82C91E` | ![#82C91E](https://via.placeholder.com/15/82C91E/000000?text=+) | | --accent4-dark | `#578715` | ![#578715](https://via.placeholder.com/15/578715/000000?text=+) | | --accent4-darker | `#304A0B` | ![#304A0B](https://via.placeholder.com/15/304A0B/000000?text=+) | | --accent4-light | `#A6D763` | ![#A6D763](https://via.placeholder.com/15/A6D763/000000?text=+) | | --accent4-lighter | `#C6E599` | ![#C6E599](https://via.placeholder.com/15/C6E599/000000?text=+) | | --accent4-lightest | `#E3F3CE` | ![#E3F3CE](https://via.placeholder.com/15/E3F3CE/000000?text=+) | # > UTILITIES # SPACING | token | value | |-------------- |------- | | --spacing-2-5 | 1px | | --spacing-05 | 2px | | --spacing-10 | 4px | | --spacing-15 | 6px | | --spacing-20 | 8px | | --spacing-30 | 12px | | --spacing-40 | 16px | | --spacing-60 | 24px | | --spacing-80 | 32px | | --spacing-120 | 48px | | --spacing-160 | 64px | | --spacing-240 | 96px | | --spacing-320 | 128px | | --spacing-440 | 176px | | --spacing-640 | 256px | ### Notation The classes are named using the format {property}{sides}-{size} Where property is one of: m - for classes that set margin p - for classes that set padding Where sides is one of: t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of: | value | properties | | ----- | ---------- | | **0** | 0 ; | | **1** | --spacing-2-5 ;| | **2** | --spacing-05 ; | | **3** | --spacing-10 ; | | **3-5** | --spacing-15 ; | | **4** | --spacing-20 ; | | **5** | --spacing-30 ; | | **6** | --spacing-40 ; | | **7** | --spacing-60 ; | | **8** | --spacing-80 ; | | **9** | --spacing-120 ; | | **10** | --spacing-160 ; | | **11** | --spacing-240 ; | | **12** | --spacing-320 ; | | **13** | --spacing-440 ; | | **14** | --spacing-640 ; | | **auto** | auto ; | | MARGIN CLASSES | PADDING CLASSES | |- |- | | **.m-0** | **.p-0** | | **.m-1** | **.p-1** | | **.m-2** | **.p-2** | | **.m-3** | **.p-3** | | **.m-3-5** | **.p-3-5** | | **.m-4** | **.p-4** | | **.m-5** | **.p-5** | | **.m-6** | **.p-6** | | **.m-7** | **.p-7** | | **.m-8** | **.p-8** | | **.m-9** | **.p-9** | | **.m-10** | **.p-10** | | **.m-11** | **.p-11** | | **.m-12** | **.p-12** | | **.m-13** | **.p-13** | | **.m-14** | **.p-14** | | **.m-auto** | **.p-auto** | | **.mx-0** | **.px-0** | | **.mx-1** | **.px-1** | | **.mx-2** | **.px-2** | | **.mx-3** | **.px-3** | | **.mx-3-5** | **.px-3-5** | | **.mx-4** | **.px-4** | | **.mx-5** | **.px-5** | | **.mx-6** | **.px-6** | | **.mx-7** | **.px-7** | | **.mx-8** | **.px-8** | | **.mx-9** | **.px-9** | | **.mx-10** | **.px-10** | | **.mx-11** | **.px-11** | | **.mx-12** | **.px-12** | | **.mx-13** | **.px-13** | | **.mx-14** | **.px-14** | | **.mx-auto** | **.px-auto** | | **.my-0** | **.py-0** | | **.my-1** | **.py-1** | | **.my-2** | **.py-2** | | **.my-3** | **.py-3** | | **.my-3-5** | **.py-3-5** | | **.my-4** | **.py-4** | | **.my-5** | **.py-5** | | **.my-6** | **.py-6** | | **.my-7** | **.py-7** | | **.my-8** | **.py-8** | | **.my-9** | **.py-9** | | **.my-10** | **.py-10** | | **.my-11** | **.py-11** | | **.my-12** | **.py-12** | | **.my-13** | **.py-13** | | **.my-14** | **.py-14** | | **.my-auto** | **.py-auto** | | **.mt-0** | **.pt-0** | | **.mt-1** | **.pt-1** | | **.mt-2** | **.pt-2** | | **.mt-3** | **.pt-3** | | **.mt-3-5** | **.pt-3-5** | | **.mt-4** | **.pt-4** | | **.mt-5** | **.pt-5** | | **.mt-6** | **.pt-6** | | **.mt-7** | **.pt-7** | | **.mt-8** | **.pt-8** | | **.mt-9** | **.pt-9** | | **.mt-10** | **.pt-10** | | **.mt-11** | **.pt-11** | | **.mt-12** | **.pt-12** | | **.mt-13** | **.pt-13** | | **.mt-14** | **.pt-14** | | **.mt-auto** | **.pt-auto** | | **.mb-0** | **.pb-0** | | **.mb-1** | **.pb-1** | | **.mb-2** | **.pb-2** | | **.mb-3** | **.pb-3** | | **.mb-3-5** | **.pb-3-5** | | **.mb-4** | **.pb-4** | | **.mb-5** | **.pb-5** | | **.mb-6** | **.pb-6** | | **.mb-7** | **.pb-7** | | **.mb-8** | **.pb-8** | | **.mb-9** | **.pb-9** | | **.mb-10** | **.pb-10** | | **.mb-11** | **.pb-11** | | **.mb-12** | **.pb-12** | | **.mb-13** | **.pb-13** | | **.mb-14** | **.pb-14** | | **.mb-auto** | **.pb-auto** | | **.mr-0** | **.pr-0** | | **.mr-1** | **.pr-1** | | **.mr-2** | **.pr-2** | | **.mr-3** | **.pr-3** | | **.mr-3-5** | **.pr-3-5** | | **.mr-4** | **.pr-4** | | **.mr-5** | **.pr-5** | | **.mr-6** | **.pr-6** | | **.mr-7** | **.pr-7** | | **.mr-8** | **.pr-8** | | **.mr-9** | **.pr-9** | | **.mr-10** | **.pr-10** | | **.mr-11** | **.pr-11** | | **.mr-12** | **.pr-12** | | **.mr-13** | **.pr-13** | | **.mr-14** | **.pr-14** | | **.mr-auto** | **.pr-auto** | | **.ml-0** | **.pl-0** | | **.ml-1** | **.pl-1** | | **.ml-2** | **.pl-2** | | **.ml-3** | **.pl-3** | | **.ml-3-5** | **.pl-3-5** | | **.ml-4** | **.pl-4** | | **.ml-5** | **.pl-5** | | **.ml-6** | **.pl-6** | | **.ml-7** | **.pl-7** | | **.ml-8** | **.pl-8** | | **.ml-9** | **.pl-9** | | **.ml-10** | **.pl-10** | | **.ml-11** | **.pl-11** | | **.ml-12** | **.pl-12** | | **.ml-13** | **.pl-13** | | **.ml-14** | **.pl-14** | | **.ml-auto** | **.pl-auto** | # ALIGN | Class Name | properties | | ----- | ---------- | | .align-baseline | vertical-align: baseline ; | | .align-top | vertical-align: top ; | | .align-middle | vertical-align: middle ; | | .align-bottom | vertical-align: bottom ; | | .align-text-bottom | vertical-align: text-bottom ; | | .align-text-top | vertical-align: text-top ; | # BACKGROUND | Class Name | properties | | ----- | ---------- | | .bg-primary | background-color: --primary ; | | .bg-secondary | background-color: --secondary ; | | .bg-success | background-color: --success ; | | .bg-warning | background-color: --warning ; | | .bg-danger | background-color: --alert ; | | .bg-light | background-color: --white ; | | .bg-dark | background-color: --inverse ; | | .bg-transparent | background-color: transparent ; | # FLEX | Class Name | properties | | ----- | ---------- | | .flex-fill | flex: 1 1 auto ; | | .flex-row | flex-direction: row ; | | .flex-column | flex-direction: column ; | | .flex-row-reverse | flex-direction: row-reverse ; | | .flex-column-reverse | flex-direction: column-reverse ; | | .flex-grow-0 | flex-grow: 0 ; | | .flex-grow-1 | flex-grow: 1 ; | | .flex-shrink-0 | flex-shrink: 0 ; | | .flex-shrink-1 | flex-shrink: 1 ; | | .flex-wrap | flex-wrap: wrap ; | | .flex-nowrap | flex-wrap: nowrap ; | | .flex-wrap-reverse | flex-wrap: wrap-reverse ; | | .justify-content-start | justify-content: flex-start ; | | .justify-content-end | justify-content: flex-end ; | | .justify-content-center | justify-content: center ; | | .justify-content-between | justify-content: space-between ; | | .justify-content-around | justify-content: space-around ; | | .justify-content-evenly | justify-content: space-evenly ; | | .align-items-start | align-items: flex-start ; | | .align-items-end | align-items: flex-end ; | | .align-items-center | align-items: center ; | | .align-items-baseline | align-items: baseline ; | | .align-items-stretch | align-items: stretch ; | | .align-content-start | align-content: flex-start ; | | .align-content-end | align-content: flex-end ; | | .align-content-center | align-content: center ; | | .align-content-between | align-content: space-between ; | | .align-content-around | align-content: space-around ; | | .align-content-stretch | align-content: stretch ; | | .align-self-auto | align-self: auto ; | | .align-self-start | align-self: flex-start ; | | .align-self-end | align-self: flex-end ; | | .align-self-center | align-self: center ; | | .align-self-baseline | align-self: baseline ; | | .align-self-stretch | align-self: stretch ; | | .order-first | order: -1 ; | | .order-0 | order: 0 ; | | .order-1 | order: 1 ; | | .order-2 | order: 2 ; | | .order-3 | order: 3 ; | | .order-4 | order: 4 ; | | .order-5 | order: 5 ; | | .order-last | order: 6 ; | # OVERFLOW | Class Name | properties | | ----- | ---------- | | .overflow-auto | overflow: auto !important; | | .overflow-hidden | overflow: hidden !important; | # POSITION | Class Name | properties | | ----- | ---------- | | .position-static | position: static ; | | .position-relative | position: relative ; | | .position-absolute | position: absolute ; | | .position-fixed | position: fixed ; | | .position-sticky | position: -webkit-sticky ;
position: sticky ; | # SIZING Width and height utilities includes support for 25%, 50%, 75%, and 100% by default. ## WIDTH | Class Name | properties | | ----- | ---------- | | .w-25 | width: 25% ; | | .w-50 | width: 50% ; | | .w-75 | width: 75% ; | | .w-100 | width: 100% ; | | .w-auto | width: auto ; | | .mw-100 | max-width: 100% ; | | .vw-100 | width: 100vw ; | ## HEIGHT | Class Name | properties | | ----- | ---------- | | .h-25 | height: 25% ;| | .h-50 | height: 50% ;| | .h-75 | height: 75% ; | | .h-100 | height: 100% ; | | .h-auto | height: auto ; | | .mh-100 | max-height: 100% ; | | .vh-100 | height: 100vh ; | | .min-vh-100 | min-height: 100vh ; | # DISPLAY | Class Name | properties | | ----- | ---------- | | d-none | display: none ; | | d-inline | display: inline ; | | d-inline-block | display: inline-block ; | | d-block | display: block ; | | d-table | display: table ; | | d-table-row | display: table-row ; | | d-table-cell | display: table-cell ; | | d-flex | display: flex ; | | d-inline-flex | display: inline-flex ;| # UTILITY | value | properties | | ----- | ---------- | | hide-scroll-bar::-webkit-scrollbar | height: 0px;

background: transparent;
| | hide-scroll-bar | -ms-overflow-style: none;
scrollbar-width: none;
| | ellipsis | overflow: hidden;
text-overflow: ellipsis;
| | ellipsis--noWrap | white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
| ## SHADOW #### Color-mod() Function lets you modify colors using the color-mod() function in CSS. Note: For more details [color-mod](https://www.npmjs.com/package/postcss-color-mod-function) | value | properties | | ----- | ---------- | | --primary-shadow | color-mod((--primary) a(0.16)) ; | | --secondary-shadow | color-mod((--secondary) a(0.16)) ; | | --success-shadow | color-mod((--success) a(0.16)) ; | | --alert-shadow | color-mod((--alert) a(0.16)) ; | | --warning-shadow | color-mod((--warning) a(0.16)) ; | | --accent1-shadow | color-mod((--accent1) a(0.16)) ; | | --accent2-shadow | color-mod((--accent2) a(0.16)) ; | | --accent3-shadow | color-mod((--accent3) a(0.16)) ; | | --accent4-shadow | color-mod((--accent4) a(0.16)) ; | | --inverse-shadow | color-mod((--inverse) a(0.16)) ; | ## TEXT-COLORS | value | properties | | ----- | ---------- | | --text | --night ; | | --text-subtle | --night-lighter ; | | --text-link | --primary ; | | --text-disabled | --inverse-lightest ; | | --text-destructive | --alert ; | | --text-white | --white ; | ## FONT-SIZE | value | properties | | ----- | ---------- | | --font-size-xxs | 4px; | | --font-size-xs | 8px; | | --font-size-s | 12px; | | --font-size | 14px; | | --font-size-m | 16px; | | --font-size-l | 20px; | | --font-size-xl | 28px; | | --font-size-xxl | 32px; | | --font-size-xxxl | 40px; | ## FONT-WEIGHT | value | properties | | ----- | ---------- | | --font-weight-normal | 400; | | --font-weight-medium | 600; | | --font-weight-bold | 700; | | --font-weight-bolder | 800; | ## Line height or Font height | value | properties | | ----- | ---------- | | --font-height-normal | normal; | | --font-height-s | 16px; | | --font-height | 20px; | | --font-height-m | 24px; | | --font-height-l | 32px; | | --font-height-xl | 40px; | | --font-height-xxl | 48px; | ## Letter spacing | value | properties | | ----- | ---------- | | --letter-spacing | 0.5px; | ## border | value | properties | | ----- | ---------- | | --border | (--border-width-2-5) solid (--secondary); | | --border-s | (--border-width-05) solid (--secondary); | ## SHADOW | value | properties | | ----- | ---------- | | --shadow-s | 0 1px 4px 0 rgba(0, 0, 0, 0.16); | | --shadow-m | 0 2px 8px 0 rgba(0, 0, 0, 0.16); | | --shadow-l | 0 4px 16px 0 rgba(0, 0, 0, 0.16); | | --shadow-spread | 0 0 0 3px; | ## GRID COLUMNS ##### Set the number of columns and specify the width of the gutters. | value | properties | | ----- | ---------- | | --grid-columns | 12; |