# Yespark Group — Design System · Colors

Palette officielle des tokens de couleur, par marque. Utilise le nom de token
exact et la valeur hex. Conventions d'identifiant par plateforme : CSS `--{prefix}-{token}`,
SCSS `${prefix}-{token}`, Android `{prefix}_{token_snake}`, iOS/Compose namespace par marque.
Préfixes : Yespark = `ys`, Zenpark = `zp`.

Source Figma : https://www.figma.com/design/zBvDuye9gg2y6Jdi7ZNiv9/Design-System-%E2%80%A2-Brand?node-id=2307-6603

## Yespark (prefix `ys`)

| token | hex | rgb | css | swift | android |
| --- | --- | --- | --- | --- | --- |
| black-1 | #000000 | 0, 0, 0 | --ys-black-1 | black1 | ys_black_1 |
| white-1 | #FFFFFF | 255, 255, 255 | --ys-white-1 | white1 | ys_white_1 |
| grey-0 | #4D4D4D | 77, 77, 77 | --ys-grey-0 | grey0 | ys_grey_0 |
| grey-1 | #898989 | 137, 137, 137 | --ys-grey-1 | grey1 | ys_grey_1 |
| grey-2 | #DDDDDD | 221, 221, 221 | --ys-grey-2 | grey2 | ys_grey_2 |
| grey-3 | #FAFAFA | 250, 250, 250 | --ys-grey-3 | grey3 | ys_grey_3 |
| fushia-0 | #BD295A | 189, 41, 90 | --ys-fushia-0 | fushia0 | ys_fushia_0 |
| fushia-1 | #D72660 | 215, 38, 96 | --ys-fushia-1 | fushia1 | ys_fushia_1 |
| fushia-2 | #E85A93 | 232, 90, 147 | --ys-fushia-2 | fushia2 | ys_fushia_2 |
| fushia-3 | #F791BA | 247, 145, 186 | --ys-fushia-3 | fushia3 | ys_fushia_3 |
| fushia-4 | #FEC3DB | 254, 195, 219 | --ys-fushia-4 | fushia4 | ys_fushia_4 |
| navy-0 | #19314A | 25, 49, 74 | --ys-navy-0 | navy0 | ys_navy_0 |
| navy-1 | #1B3D61 | 27, 61, 97 | --ys-navy-1 | navy1 | ys_navy_1 |
| navy-2 | #19314A | 25, 49, 74 | --ys-navy-2 | navy2 | ys_navy_2 |
| navy-3 | #84A6C5 | 132, 166, 197 | --ys-navy-3 | navy3 | ys_navy_3 |
| navy-4 | #DAEBF8 | 218, 235, 248 | --ys-navy-4 | navy4 | ys_navy_4 |
| navy-5 | #E6F0F2 | 230, 240, 242 | --ys-navy-5 | navy5 | ys_navy_5 |
| navy-6 | #F3F7F8 | 243, 247, 248 | --ys-navy-6 | navy6 | ys_navy_6 |
| cyan-1 | #5BCCD6 | 91, 204, 214 | --ys-cyan-1 | cyan1 | ys_cyan_1 |
| yellow-1 | #F8C137 | 248, 193, 55 | --ys-yellow-1 | yellow1 | ys_yellow_1 |
| yellow-2 | #F8C138 | 248, 193, 56 | --ys-yellow-2 | yellow2 | ys_yellow_2 |
| fail-0 | #D72514 | 215, 37, 20 | --ys-fail-0 | fail0 | ys_fail_0 |
| fail-1 | #EC4838 | 236, 72, 56 | --ys-fail-1 | fail1 | ys_fail_1 |
| fail-2 | #FACECA | 250, 206, 202 | --ys-fail-2 | fail2 | ys_fail_2 |
| fail-3 | #FDF0EF | 253, 240, 239 | --ys-fail-3 | fail3 | ys_fail_3 |
| success-0 | #248222 | 36, 130, 34 | --ys-success-0 | success0 | ys_success_0 |
| success-1 | #4ACE47 | 74, 206, 71 | --ys-success-1 | success1 | ys_success_1 |
| success-2 | #D0F2CE | 208, 242, 206 | --ys-success-2 | success2 | ys_success_2 |
| success-3 | #F1FBF0 | 241, 251, 240 | --ys-success-3 | success3 | ys_success_3 |
| info-0 | #1058DD | 16, 88, 221 | --ys-info-0 | info0 | ys_info_0 |
| info-1 | #3478F6 | 52, 120, 246 | --ys-info-1 | info1 | ys_info_1 |
| info-2 | #D6E4FD | 214, 228, 253 | --ys-info-2 | info2 | ys_info_2 |
| info-3 | #EFF4FE | 239, 244, 254 | --ys-info-3 | info3 | ys_info_3 |
| warning-0 | #B85110 | 184, 81, 16 | --ys-warning-0 | warning0 | ys_warning_0 |
| warning-1 | #ED7B33 | 237, 123, 51 | --ys-warning-1 | warning1 | ys_warning_1 |
| warning-2 | #FBE5D6 | 251, 229, 214 | --ys-warning-2 | warning2 | ys_warning_2 |
| warning-3 | #FEF4EF | 254, 244, 239 | --ys-warning-3 | warning3 | ys_warning_3 |
| new-0 | #5329D1 | 83, 41, 209 | --ys-new-0 | new0 | ys_new_0 |
| new-1 | #7950F2 | 121, 80, 242 | --ys-new-1 | new1 | ys_new_1 |
| new-2 | #E1D9F7 | 225, 217, 247 | --ys-new-2 | new2 | ys_new_2 |
| new-3 | #F3F0FC | 243, 240, 252 | --ys-new-3 | new3 | ys_new_3 |
| yellow-0 | #956C05 | 149, 108, 5 | --ys-yellow-0 | yellow0 | ys_yellow_0 |
| yellow-3 | #FEFAEF | 254, 250, 239 | --ys-yellow-3 | yellow3 | ys_yellow_3 |
| beige-0 | #7B746E | 123, 116, 110 | --ys-beige-0 | beige0 | ys_beige_0 |
| beige-1 | #E9E4DF | 233, 228, 223 | --ys-beige-1 | beige1 | ys_beige_1 |
| purple | #DB1EF8 | 219, 30, 248 | --ys-purple | purple | ys_purple |

### Dégradés Yespark
- fushia-gradient : #FF4A85 → #D72660 (linear 135°)
- navy-gradient : #2B5786 → #1B3D61 (linear 135°)
- navy-0-gradient : #26486C → #19314A (linear 135°)
- yellow-gradient : #FFD774 → #F8C137 (linear 135°)

> Collisions dans le Figma actuel (valeur gardée = 1re occurrence) : yellow-2 (#F8C138 vs #FEF3D7)

## Zenpark (prefix `zp`)

| token | hex | rgb | css | swift | android |
| --- | --- | --- | --- | --- | --- |
| black-1 | #000000 | 0, 0, 0 | --zp-black-1 | black1 | zp_black_1 |
| white-1 | #FFFFFF | 255, 255, 255 | --zp-white-1 | white1 | zp_white_1 |
| grey-2 | #4F4F4F | 79, 79, 79 | --zp-grey-2 | grey2 | zp_grey_2 |
| grey-3 | #757575 | 117, 117, 117 | --zp-grey-3 | grey3 | zp_grey_3 |
| green-3 | #D6E6DE | 214, 230, 222 | --zp-green-3 | green3 | zp_green_3 |
| green-0 | #085132 | 8, 81, 50 | --zp-green-0 | green0 | zp_green_0 |
| green-1 | #366D56 | 54, 109, 86 | --zp-green-1 | green1 | zp_green_1 |
| green-2 | #94BAA7 | 148, 186, 167 | --zp-green-2 | green2 | zp_green_2 |
| green-4 | #EDF3F0 | 237, 243, 240 | --zp-green-4 | green4 | zp_green_4 |
| green-5 | #F5FAF8 | 245, 250, 248 | --zp-green-5 | green5 | zp_green_5 |
| beige-1 | #FDF9F1 | 253, 249, 241 | --zp-beige-1 | beige1 | zp_beige_1 |
| yellow-2 | #F8C138 | 248, 193, 56 | --zp-yellow-2 | yellow2 | zp_yellow_2 |
| fail-0 | #9F1C0F | 159, 28, 15 | --zp-fail-0 | fail0 | zp_fail_0 |
| fail-1 | #EC4838 | 236, 72, 56 | --zp-fail-1 | fail1 | zp_fail_1 |
| fail-2 | #FACECA | 250, 206, 202 | --zp-fail-2 | fail2 | zp_fail_2 |
| fail-3 | #FDF0EF | 253, 240, 239 | --zp-fail-3 | fail3 | zp_fail_3 |
| success-0 | #1B611A | 27, 97, 26 | --zp-success-0 | success0 | zp_success_0 |
| success-1 | #4ACE47 | 74, 206, 71 | --zp-success-1 | success1 | zp_success_1 |
| success-2 | #D0F2CE | 208, 242, 206 | --zp-success-2 | success2 | zp_success_2 |
| success-3 | #F1FBF0 | 241, 251, 240 | --zp-success-3 | success3 | zp_success_3 |
| info-0 | #1058DD | 16, 88, 221 | --zp-info-0 | info0 | zp_info_0 |
| info-1 | #3478F6 | 52, 120, 246 | --zp-info-1 | info1 | zp_info_1 |
| info-2 | #D6E4FD | 214, 228, 253 | --zp-info-2 | info2 | zp_info_2 |
| info-3 | #EFF4FE | 239, 244, 254 | --zp-info-3 | info3 | zp_info_3 |
| warning-0 | #8A3C0C | 138, 60, 12 | --zp-warning-0 | warning0 | zp_warning_0 |
| warning-1 | #ED7B33 | 237, 123, 51 | --zp-warning-1 | warning1 | zp_warning_1 |
| warning-2 | #FBE5D6 | 251, 229, 214 | --zp-warning-2 | warning2 | zp_warning_2 |
| warning-3 | #FEF4EF | 254, 244, 239 | --zp-warning-3 | warning3 | zp_warning_3 |
| new-0 | #5329D1 | 83, 41, 209 | --zp-new-0 | new0 | zp_new_0 |
| new-1 | #7950F2 | 121, 80, 242 | --zp-new-1 | new1 | zp_new_1 |
| new-2 | #E1D9F7 | 225, 217, 247 | --zp-new-2 | new2 | zp_new_2 |
| new-3 | #F3F0FC | 243, 240, 252 | --zp-new-3 | new3 | zp_new_3 |
| yellow-0 | #956C05 | 149, 108, 5 | --zp-yellow-0 | yellow0 | zp_yellow_0 |
| yellow-1 | #F8C137 | 248, 193, 55 | --zp-yellow-1 | yellow1 | zp_yellow_1 |
| yellow-3 | #FEFAEF | 254, 250, 239 | --zp-yellow-3 | yellow3 | zp_yellow_3 |
| beige-0 | #7B746E | 123, 116, 110 | --zp-beige-0 | beige0 | zp_beige_0 |
| purple | #DB1EF8 | 219, 30, 248 | --zp-purple | purple | zp_purple |

> Collisions dans le Figma actuel (valeur gardée = 1re occurrence) : grey-3 (#757575 vs #FAFAFA), yellow-2 (#F8C138 vs #FEF3D7), beige-1 (#FDF9F1 vs #5BCCD6), beige-1 (#FDF9F1 vs #E9E4DF)