Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

Update colors to be smaller #28

Closed
jonborchardt opened this issue Feb 16, 2023 · 3 comments
Closed

Update colors to be smaller #28

jonborchardt opened this issue Feb 16, 2023 · 3 comments
Assignees

Comments

@jonborchardt
Copy link
Collaborator

jonborchardt commented Feb 16, 2023

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

@jonborchardt jonborchardt self-assigned this Feb 16, 2023
@samstuesser
Copy link

samstuesser commented Feb 17, 2023

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

@samstuesser
Copy link

samstuesser commented Feb 24, 2023

Good afternoon. The base + light theme component-level color tokens are available in the below document or here

Additionally, I've gone through and labeled each component-level token with its base color token in parentheses.

Varnish2_Complete Colors

@jonborchardt
Copy link
Collaborator Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants