[Design Tokens] Text Styles?

[findheadway]

Is it possible to define design tokens that are similar to Figma’s Text Styles? That is, the tokens represent a set of CSS properties rather than an individual property. Specifically we’d like to expose a value like “Headline level 2” that determines the fontFamily, fontSize, lineHeight, etc.

[alexander]

Currently design tokens map to specific values, like color or fontName. I would recommend using custom CSS classes to achieve styling multiple properties at once.

[ricky-resil]

There’s another post saying the typography.headings property can be used to modify the text styles in the editor using the design tokens. However, when I try this the entire typography section disappears from the Builder UI without any errors.

export const designTokens = {
  colors: [
    { name: 'PrimaryText', value: '#333333' },
    { name: 'SecondaryText', value: '#666666' },
  ],
  typography: {
    headings: {
      h1: {
        fontSize: '32px',
        color: 'var(--colors-primaryText)',
      },
      h2: {
        fontSize: '28px',
        color: 'var(--colors-secondaryText)',
      },
    },
  },
};

How to Change Default Styles for Headings in Builder.io?

Hey @yourator, welcome to the Builder.io forum. You can set your default styles using Builder’s design tokens or Custom CSS. Here is a general guide you can follow- Option 1: Use Design Tokens Design tokens allow you to create consistent styles across your site. In Builder.io, you can use design tokens to define default styles for headings. Define Design Tokens for Headings: Create a design-tokens.ts file if you don’t already have it. Example: design-tokens.ts export const designTokens =…

Is this valid? It’s difficult to find out what can and can’t be used as the docs are pretty sparse and there aren’t any TypeScript types for the tokens.