Color coding of cards - Githubissues

potsdam-pnp / pf2e-cards

Playing cards for pf2e items etc.

https://potsdam-pnp.github.io/pf2e-cards/

MIT License

4 stars 1 forks source link

Color coding of cards #42

Open skaldarnar opened 1 year ago

skaldarnar commented 1 year ago

Goals

[ ] What are we color coding? Currently we color code (some) types(?)/categories(?)/kind(?) of cards. I think this is a good start, but we should figure out which categories we have and select colors.
[ ] What color scheme should we use? The colors should be distinguishable. The colors should work well with the colors used for boxes (damage rolls, check rolls, …)

Context

Currently cards are color coded in the following way:

Actions — yellow
Items — blue
Spells — green (including Cantrips and Focus spells)

https://github.com/potsdam-pnp/pf2e-cards/blob/b05c448b59fda3d6d99c42d0c8db951a8ba94960/card-style.cls#L39-L55

Follow Ups

encode more information on the card, for instance the rarity of an Item or in which slot the card belongs. For instance, https://rpg-cards.vercel.app/ uses icons for item categories on the top-right corner and on the back of the card.

Observed on b05c448b59fda3d6d99c42d0c8db951a8ba94960.

skaldarnar commented 1 year ago

Looking a bit at existing color schemes for reference. Also, https://lospec.com/palette-list is a pretty cool page for color palettes.

We are currently using red (damage), blue (checks), green (healing) for colored boxes, and should ensure that these colors don't clash with the card border colors.

Maybe use saturated colors for one (border) and desaturated colors for the other (boxes with text)?

Solarized

The Solarized color scheme comes with 8 accent colors

Tango

The Tango color palette has 7 accent colors, however, 4 are form the yellow/red spectrum.

Nord

Based on https://www.nordtheme.com/ and https://lospec.com/palette-list/nord-theme.

See #54

Material Design

https://m3.material.io/styles/color/overview

Bootstrap

https://getbootstrap.com/docs/5.0/customize/color/