Design of sizes props

[airen]

Although the current size props design is very good, I think he still lacks a little something. It is now neither based on 4-point grid nor 8-point grid. in the use of size (such as font size, spacing, etc.) is in many cases a multiple of them. I prefer the 4-point grid because it is more flexible.

Can the design of size props in open props take these rules into account?

4-point grid

:root{
    --size-base-point: .25rem;
    --sizes-1: calc(var(--size-base-point) * 1);
    --sizes-2: calc(var(--size-base-point) * 2);
    --sizes-3: calc(var(--size-base-point) * 3);
    --sizes-4: calc(var(--size-base-point) * 4);
    /* ... */
    --sizes-N: calc(var(--size-base-point) * N);
}

8-point grid

:root{
    --size-base-point: .5rem;
    --sizes-1: calc(var(--size-base-point) * 1);
    --sizes-2: calc(var(--size-base-point) * 2);
    --sizes-3: calc(var(--size-base-point) * 3);
    --sizes-4: calc(var(--size-base-point) * 4);
    /* ... */
    --sizes-N: calc(var(--size-base-point) * N);
}

Resources

• The 8-Point Grid
• How to manage space in Figma using tokens
• The Comprehensive 8pt Grid Guide
• Goodbye 8-point grid, hello 4-point grid?

[argyleink]

interesting idea to offer different size sets. like, there could be the default sizes, like exist today, but offer individual prop packs for both 4-point, 8-point, and many of the other ratio techniques people like to use. ready to go typography scales.

i'll add a feature ticket to track work on it, sounds interesting!