Did someone say typography tokens...? Here's a sneak peek!"

Creating font scales with our upcoming font-size token :smiley:

21 Likes

You’re right, it works! I think you can do your color scaling by increasing the Lightness parameter of the HSL color model. Have you already done that?

1 Like

Looks amazing, can’t wait to use that missing token puzzle! Any estimate for the offical release?

2 Likes

:heart_eyes: I can’t wait to use these tokens!

2 Likes

Yeah, you can totally do that, here is an example:

5 Likes

Finally I am going to get rid of copy/pasting styling from reference typography elements in my designs. It is going to be a delight to use.

4 Likes

oklch or oklab before Figma would also be a nice move :slight_smile:

4 Likes

@don I agree!
However, it will not be an easy task to scale colors that way via those models to maintain good consistency in lightness and contrast :thinking:

@a-ng-d Do you mean on a conceptional level or coding that into Penpot?
Here are some good articles on that topic:

2 Likes

@don Thanks a lot for your resources, they are appreciated!

And sorry I wasn’t clear :laughing:
I was discussing scaling a color using the LCH or OKLCH color model. As they are bound to the P3 gamut, some colors cannot be interpreted by the navigator and are adjusted to get them inside the gamut.
Nevertheless, scaling a color into tints and shades without keeping them inside the gamut can bring unexpected results. Whereas OKLCH provides a nice fallback if the color is outside the gamut, the result with HSL can be really unexpected (with the same values).

My point is: don’t use HSL first, OKLCH makes it better

1 Like

Totally, this has been discussed and asked for some time in another forum as well :wink:

I think quite a few people (me for sure) will have to upgrade their monitors to see (literally) the benefits of these improvements! :rofl:
But the world is moving forward, and OKLCH has real advantages in color management…