Nuxt UI: How to Link Typography & Spacing Scales?
Using Nuxt UI Figma kit + building design system.
Problem: Typography and spacing scales aren't linked, so spacing looks off when font sizes change.
Example:
- Button with text-base (12px) + px-4 padding = looks good ✓
- Button with text-lg (14px) + px-4 padding = too much space ✗
Nuxt UI has:
- Typography variables:
- Spacing scale: Independent from typography
Question: How do I use specific Typography styles in that case? The components look off when I do so.
thanks for your time.
Problem: Typography and spacing scales aren't linked, so spacing looks off when font sizes change.
Example:
- Button with text-base (12px) + px-4 padding = looks good ✓
- Button with text-lg (14px) + px-4 padding = too much space ✗
Nuxt UI has:
- Typography variables:
text-xstext-9xl- Spacing scale: Independent from typography
Question: How do I use specific Typography styles in that case? The components look off when I do so.
thanks for your time.
