À propos Polaris
Polaris, le design system de Shopify, propose des tokens de couleur sémantiques comme --p-color-brand-* sur les rôles surface, texte et bordure, avec une échelle claire et sombre complète.
Utilisation
Utilisez les tokens Polaris plutôt que du hex brut pour garder les UI marchandes cohérentes. L’échelle de tokens va de 1 à 16 pour un contrôle fin de l’emphase.
Documentation officielle ↗
Azure
#51C0FF
Nuances
1 #FBF 2 #F2F 3 #EAF 4 #E0F 5 #D5E 6 #CAE 7 #C0E 8 #A8D 9 #91D 10 #51C 11 #009 12 #007 13 #006 14 #005 15 #003 16 #002
Blue
#97ADFF
Nuances
1 #FCF 2 #F6F 3 #F0F 4 #EAE 5 #E2E 6 #DBE 7 #D5D 8 #C5D 9 #BAC 10 #97A 11 #418 12 #007 13 #005 14 #004 15 #002 16 #001
Teal
#1EC7BC
Nuances
1 #F8F 2 #E8F 3 #D7F 4 #C3F 5 #AAF 6 #89F 7 #70F 8 #5AE 9 #2CE 10 #1EC 11 #00A 12 #128 13 #0C6 14 #0C5 15 #033 16 #062
Green
#18BF79
Nuances
1 #FAF 2 #E6F 3 #CDF 4 #AFF 5 #92F 6 #6EF 7 #52F 8 #2CE 9 #11D 10 #18B 11 #0D9 12 #047 13 #035 14 #014 15 #073 16 #022
Lime
#20CF27
Nuances
1 #FAF 2 #E4F 3 #D0F 4 #BBF 5 #9DF 6 #77F 7 #38F 8 #28F 9 #25E 10 #20C 11 #18A 12 #118 13 #0C7 14 #0B5 15 #033 16 #032
Yellow
#C5B200
Nuances
1 #FFF 2 #FFF 3 #FFF 4 #FFE 5 #FFE 6 #FFE 7 #F7D 8 #EAD 9 #E1C 10 #C5B 11 #998 12 #827 13 #695 14 #4F4 15 #332 16 #1F1
Orange
#E5A500
Nuances
1 #FFF 2 #FFF 3 #FFF 4 #FFE 5 #FFE 6 #FFD 7 #FFD 8 #FFC 9 #FFB 10 #E5A 11 #B28 12 #956 13 #7C5 14 #5E4 15 #412 16 #251
Red
#F78086
Nuances
1 #FFF 2 #FFF 3 #FFE 4 #FEE 5 #FEE 6 #FED 7 #FED 8 #FEC 9 #FDA 10 #F78 11 #E22 12 #C70 13 #A30 14 #8E0 15 #5F0 16 #2F0
Magenta
#F68DF6
Nuances
1 #FFF 2 #FFF 3 #FDE 4 #FEE 5 #FCD 6 #FBD 7 #FBC 8 #F9B 9 #F8B 10 #F68 11 #E15 12 #C53 13 #9F2 14 #791 15 #561 16 #340
Purple
#AA95FF
Nuances
1 #FDF 2 #F8F 3 #F3F 4 #EFE 5 #E9E 6 #E4D 7 #DFD 8 #D4C 9 #C7B 10 #AA9 11 #947 12 #805 13 #712 14 #570 15 #3B0 16 #1C0
Rose
#FE8EB1
Nuances
1 #FFF 2 #FFF 3 #FFE 4 #FFE 5 #FFE 6 #FFD 7 #FED 8 #FEC 9 #FEB 10 #FE8 11 #FD4 12 #E30 13 #B90 14 #8D0 15 #640 16 #3E0
Gray
#CCCCCC
Nuances
1 #FFF 2 #FDF 3 #FAF 4 #F7F 5 #F3F 6 #F1F 7 #EBE 8 #E3E 9 #D4D 10 #CCC 11 #B5B 12 #8A8 13 #616 14 #4A4 15 #303 16 #1A1
Aucune couleur correspondante
Source: Shopify Polaris · polaris-tokens 9.4.2
