# Rich Text + Design Tokens

**URL:** <https://forum.builder.io/t/rich-text-design-tokens/6564>\
**Category:** Visual Editor Help\
**Created:** [October 9, 2024, 3:12pm UTC](https://forum.builder.io/t/rich-text-design-tokens/6564 "2024-10-09T15:12:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![findheadway](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@findheadway](https://forum.builder.io/u/findheadway)\
**Post date:** [October 9, 2024, 3:12pm UTC](https://forum.builder.io/t/rich-text-design-tokens/6564/1 "2024-10-09T15:12:36Z")

</div>

This question is very similar to the one in [How to Change Default Styles for Headings in Builder.io?](https://forum.builder.io/t/how-to-change-default-styles-for-headings-in-builder-io/6090).

Following the advice there (passing a typography object along with my design tokens) breaks _all_ of my design tokens and does not accomplish the goal of styling rich text with my provided brand tokens.

Could you please advise what is the suggested way to style rich text?

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [October 11, 2024, 1:13pm UTC](https://forum.builder.io/t/rich-text-design-tokens/6564/2 "2024-10-11T13:13:37Z")

</div>

Hello @findheadway, would you be able to share your SDK and versioning as well as the implementation code?

---

<div class="post-metadata">

**Author:** ![findheadway](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@findheadway](https://forum.builder.io/u/findheadway)\
**Post date:** [October 14, 2024, 6:27pm UTC](https://forum.builder.io/t/rich-text-design-tokens/6564/3 "2024-10-14T18:27:29Z")

</div>

Definitely!

```json
"name": "@builder.io/sdk-react",
"version": "2.0.14",

```

Implementation:

```auto
register("editor.settings", {
  hideAnimateTab: true,
  designTokens: {
    colors,
    // returns base typographic properties like fontFamily, fontSize, etc
    ...typography(),
    // per the linked example, this should apply to inline text/rich text.
    typography: {
      headings: {
        h1: {
          fontSize: "32px",
          color: "red",
        },
        h2: {
          fontSize: "28px",
          color: "green",
        },
      },
    },
  },
});

```

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [November 5, 2024, 4:12pm UTC](https://forum.builder.io/t/rich-text-design-tokens/6564/4 "2024-11-05T16:12:29Z")

</div>

Hello findheadway,

Builder has just made an update to it’s Gen 2 SDK `sdk-react`. I may suggest updating your SDK.  
If the issue is still unresolved, I would suggest switching to the Gen 1 SDK which is the recommended Builder SDK for React application.

Please see below for more info:

> **[SDK Comparison - Builder.io](https://www.builder.io/c/docs/sdk-comparison)**
>
> Covers the differences between the Gen 1 and Gen 2 Builder Javascript framework SDKs. Includes package references, helpers, and fetching references and Symbols.