# How to force values (Design System)

**URL:** <https://forum.builder.io/t/how-to-force-values-design-system/3197>\
**Category:** Feature Requests\
**Created:** [February 2, 2023, 11:44am UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197 "2023-02-02T11:44:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Detzler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/detzler/32/1189_2.png) [@Detzler](https://forum.builder.io/u/Detzler)\
**Post date:** [February 2, 2023, 11:44am UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/1 "2023-02-02T11:44:41Z")

</div>

Hi,

As a frontend dev, I build stuff via Builderio. Afterwards, the content manager has the ability not only to change the content (text, images) but also add new elements (blocks, grids) and apply some basic styling like margin, font-size, column gaps.

Currently, the content manager has the freedom to set e.g. the margin to what ever he likes to pixel value. This I want to restrict to keep the overall website styling according to the my design system, which allows only a restricted set of values. So in concrete words: I would like to give the content manager only a set of possible values that he can set (like only 14px, 18px, 22px, 28px - that’s all).

Is it possibly to achieve this with current functionality? If not, I would like to raise a feature request herewith.

Thx

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 3, 2023, 1:59pm UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/2 "2023-02-03T13:59:26Z")

</div>

Hi @Detzler,

Currently, this feature is not available but as a workaround, you can certainly create a data model with those fixed values and use it across your space or you can use custom CSS targeting builder block classes, i.e., builder-text, builder-content, builder-blocks etc.

Please raise a feature request for the same at [Builder.io Ideas](https://ideas.builder.io/ideas/)

> **[Create a Site Theme - Builder.io](https://www.builder.io/c/docs/site-theme#create-a-site-theme)**
>
> Build and optimize digital experiences for any tech stack, visually.

> **[Adding custom code in the Builder.io visual editor - Builder.io](https://www.builder.io/c/docs/guides/custom-code#custom-css)**
>
> Add custom JavaScript and CSS to your Builder content. Learn how to access browser events, state properties and add custom CSS to your pages.

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [May 31, 2024, 4:34pm UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/3 "2024-05-31T16:34:44Z")

</div>

Design tokens is now a built-in feature 🎉 [Design Tokens - Builder.io](https://www.builder.io/c/docs/design-tokens)

---

<div class="post-metadata">

**Author:** ![Detzler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/detzler/32/1189_2.png) [@Detzler](https://forum.builder.io/u/Detzler)\
**Post date:** [June 1, 2024, 11:26am UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/4 "2024-06-01T11:26:51Z")

</div>

Hi @steve

thank you very much. This feature enables a lot, e.g. Tailwind integration.

Does it work when fetching html+css via HTML API?

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [June 1, 2024, 2:11pm UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/5 "2024-06-01T14:11:59Z")

</div>

ya! for use with the HTML API, you’ll pass the configuration like [this](https://www.builder.io/c/docs/webcomponents-api#registering-custom-elements)

```html
<script>
window.builderWcLoadCallbacks = [
  (context) => {
    context.Builder.register('editor.settings', {
      designTokens: { ... }
    })
  }
]
</script>

```

That just tells the Visual Editor what tokens are available, and then they’ll be used in the HTML API response as expected anywhere they are used

---

<div class="post-metadata">

**Author:** ![Detzler](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/detzler/32/1189_2.png) [@Detzler](https://forum.builder.io/u/Detzler)\
**Post date:** [June 2, 2024, 9:42am UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/6 "2024-06-02T09:42:27Z")

</div>

Hi @steve ,

please help me to understand. I thought the [HTML API](https://www.builder.io/c/docs/html-api) initializes it’s own Builder JS SDK where no one can’t access it except of via the HTTP GET parameter.

In other words, I can add builderWcLoadCallbacks to the Web Component on my own page. But it will be only available in the Visual Editor, not in the HTML API runtime. Isn’ it?

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [June 4, 2024, 4:25pm UTC](https://forum.builder.io/t/how-to-force-values-design-system/3197/7 "2024-06-04T16:25:21Z")

</div>

the HTML API uses our webcomponents SDK under the hood to ensure any interactive elements are interactive

so any time you use the HTML API you are also using the webcomponents SDK

you could choose to strip out the tag from the response if you want purely static HTML, and are ok with 0 interactivity (and no or minimal dynamic content). in that case, be sure to only do that in production and not when loading in our visual editor so our editor will pick up your designs tokens