Genstyl — Design System tool | Primitive composition
#DesignSystems #UIDesign #FrontEnd #BuildInPublic #WebDesign #Typography #DesignToCodebase
Join the waitlist 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
Years of web typography-specific code has shown me many examples of what to do and what not to do, written by myself or someone else. Here’s what I landed on: something that works, proved to be scalable and inspired the backbone of my own typography engine in Genstyl.
Of course, we start with the modular scale and decide what our body copy size is (keeping in mind that we most likely need a few sizes smaller in some situations).
We can then go up the scale and pick the sizes matching the hierarchy that is right for the project, but we don’t forget that hierarchy can also be established with the help of colour, typeface, weight, caps vs no-caps, and also surrounding whitespace.
We then start building something!
As soon as you have a few elements on the page, the canvas will start to inform your decisions, and the next step is to establish meaning. Some refer to these as semantic tokens. We can separate the meaning and associated context (where we use them) from the underlying structure (font-size/line-height from the scale) by having snippets of typographic properties that we can then apply to any step on the scale. Examples: main heading, tagline, section subheading, button label, input value, etc.
We end up with the following formula:
*[Scale step] + [Semantics] = (Semantic Primitive)*
This works quite nicely and in terms of codebase maintenance (CSS) is quite straightforward and easy to do. But we can take it one step further. Inheritance!
The inheritance formula:
*[Sem. P1] + [Custom Props] = (Sem. P2)*
We can create new Semantic Primitives by starting from an existing one and only overriding a few properties. I like this because it is non-destructive and it helps maintain consistency.
We can take it even further: Composition!
Inheritance can only take us so far, but composition allows us to combine multiple Semantic Primitives into one, and make overrides on that final result.
*[Sem. P2] + [Sem. P1] + [Sem. P3] + [Custom Props] = (Sem. P4)*
We can control the order in which they are combined—changing the priority of the overlapping properties—and giving us ultimate control and flexibility, without reinventing the wheel, and with the added benefit of keeping everything in sync. Changing the underlying properties will ensure that everything is updated and consistent across the board.
How do you approach typography tokens in your systems?