You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.
Sam edit 2/17: After auditing all of our middle Aquas, Teals, Oranges, and Purples against #FFFFFF (they all failed) I upped the contrast in P3, which now passes on white. This change, and the change to Magenta/Fuchsia's naming convention have all been updated in the token list below. Stuff that's changed in bold.
Awesome, thanks. I've baked these colors and their tokens into Figma.
What I'm currently tackling are the component-level color tokens, which inherit any one of these.
I'm doing some accessibility/contrast auditing to determine our main secondary color.
Right now, it's looking to be Purple, or Aqua, but I'm trying to get a satisfactory contrast ratio and make sure it's a value that's distinct from the Blue color group, even for those with decreased color vision. I'm trying to avoid using either Green or Red for our secondary value, as those are used so frequently in data visualization to indicate pass/fail.
tl;dr The main color tokens above are ready to implement (with Magenta renamed to Fuchsia-- F1, F2, etc) and I'm working on the more specific ones now
i have added the colors as defined above.
many of the colors in the swatch image i had trouble mapping to components.
so there will likely be more work on this, but im going to call this ticket done and we can open new ones as we hit components that need visitation.
Sam edit 2/17: After auditing all of our middle Aquas, Teals, Oranges, and Purples against #FFFFFF (they all failed) I upped the contrast in P3, which now passes on white. This change, and the change to Magenta/Fuchsia's naming convention have all been updated in the token list below. Stuff that's changed in bold.
Neutral
N1 #F8F9FA
N2 #E8ECF2
N3 #AEB7C4
N4 #616C7A
N5 #47515C
Blue
B1 #F0F7FF
B2 #80BDFF
B3 #265ED4
B4 #1B4596
B5 #223367
Aqua (Teen Hunger Force)
A1 #F2FCFF
A2 #B5F0FF
A3 #4DE1FF
A4 #01A2CA
A5 #054976
Teal
T1 #E6FDFE
T2 #9AE7EC
T3 #16C4CF
T4 #078E9E
T5 # 004752
Green
G1 #C1F7E6
G2 #70DDBA
G3 #1EC28E
G4 #0A8F6B
G5 # 005340
Orange/Gold/Burnt Sienna
O1 #FFF1C4
O2 #FFD45D
O3 #FFBB00
O4 #FF9100
O5 #DD6502
Red
R1 #FFE1E0
R2 #FF9F9E
R3 #F7605F
R4 #D63F3F
R5 #932222
Fuchsia
F1 #F6DFF3
F2 #E7A2DE
F3 #D864C9
F4 #A44397
F5 #65295D
Purple
P1 #E6E3F7
P2 #B7AFEB
P3 #7446F2
P4 #5C50A4
P5 #271F55
The text was updated successfully, but these errors were encountered: