---
title: Design tokens and custom CSS
description: Fine-tune every color, size and spacing value, or write your own CSS.
icon: swatch-book
sidebar:
  badge: Pro
search:
  keywords:
    [
      custom css,
      design system,
      tokens,
      spacing,
      radius,
      page width,
      input width,
    ]
---

The **Design system** panel (in **Customize**) exposes every design value of your form as a token. Colors are saved as OKLCH, so they look consistent on every screen.

## Color tokens

| Group | Tokens |
| --- | --- |
| **Brand** | Primary, Primary foreground, Accent, Caret |
| **Neutrals** | Background, Foreground, Surface, Muted, Border |
| **Feedback** | Error, Error surface, Colorful error, Colorful error surface |
| **Inputs** Pro | Input background, Input text, Placeholder, Input border, Selection background, Selection text |

## Layout tokens Pro

| Token | Range |
| --- | --- |
| Page width | 320–1200 px |
| Page padding | 0–96 px |
| Base font size | 12–24 px |
| Cover height | 10–100 % |
| Field gap / Section spacing | 0–64 px / 0–96 px |
| Input margin / Input padding | 0–64 px / 0–48 px |
| Radius / Input radius | 0–32 px / 0–48 px |
| Logo width, height, radius | up to 400 px |
| Input width mode | **Full** width, or **Fixed** at an input width of 160–960 px |
| Input height / Input border | 32–96 px / 0–8 px |

## Custom CSS Pro

Write your own CSS for anything tokens don't cover, up to 25,000 characters.

:::note[Plan requirement] Input color tokens, layout tokens and custom CSS need **Pro** or above. You can try them on any plan, but on lower plans they're removed when you publish. :::

**[Themes gallery and Theme Studio](/design/themes-gallery-and-theme-studio)**

Save and share your design.

**[Plans](/plans)**

Compare what each plan includes.