> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onlyform.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme tokens

> Complete theme schema for colors, assets, layout, inputs, buttons, and custom CSS.

Pass visual configuration under `definition.theme`. All theme controls are available on Free except `customCss`, which is Pro.

## Top-level tokens

| Token           | Type          | Accepted values                                   | Plan |
| --------------- | ------------- | ------------------------------------------------- | ---- |
| `logo`          | asset or null | Object containing a `url` and optional dimensions | Free |
| `background`    | object        | `brightness`, `layout`, `image`                   | Free |
| `colors`        | object        | Light semantic tokens plus `dark`                 | Free |
| `alignment`     | object        | Welcome, question, and logo alignment             | Free |
| `size`          | object        | Welcome and question text size                    | Free |
| `font`          | string        | Font family, for example `Inter`                  | Free |
| `corners`       | integer       | `0` rounded, `1` square, `2` pill                 | Free |
| `logoPlacement` | object        | `align`, `vertical`                               | Free |
| `layout`        | object        | `pageWidth`, `baseFontSize` CSS values            | Free |
| `logoSize`      | object        | Numeric `width`, `height`, `radius`               | Free |
| `coverHeight`   | string        | CSS height                                        | Free |
| `inputs`        | object        | Input dimensions, colors, spacing, and radius     | Free |
| `buttons`       | object        | Button dimensions, colors, alignment, and spacing | Free |
| `customCss`     | string        | CSS applied to the form                           | Pro  |
| `theme`         | string        | `light` or `dark` initial mode                    | Free |

## Background

| Token        | Type          | Values                                                                         |
| ------------ | ------------- | ------------------------------------------------------------------------------ |
| `brightness` | number        | `0` through `100`                                                              |
| `layout`     | string        | `fullscreen`, `right`, `left`, `split`                                         |
| `image`      | asset or null | `id`, `url`, `width`, `height`, `base64`; additional asset metadata is allowed |

## Alignment and size

| Token                         | Values                                                                                            |
| ----------------------------- | ------------------------------------------------------------------------------------------------- |
| `alignment.welcomeAndEndings` | `0` left, `1` center, `2` right                                                                   |
| `alignment.questions`         | `0` left, `1` center, `2` right                                                                   |
| `alignment.logo`              | `1` top-left, `2` top-center, `3` top-right, `4` bottom-left, `5` bottom-center, `6` bottom-right |
| `size.welcomeAndEndings`      | `0` small, `1` medium, `2` large                                                                  |
| `size.questions`              | `0` small, `1` medium, `2` large                                                                  |
| `logoPlacement.align`         | `left`, `center`, `right`                                                                         |
| `logoPlacement.vertical`      | `inside`, `overlap`, `below`                                                                      |

## Semantic colors

Every color accepts a CSS color string. The same tokens may be repeated inside `colors.dark` for dark mode.

| Group               | Tokens                                           |
| ------------------- | ------------------------------------------------ |
| Page                | `background`, `foreground`, `text`               |
| Cards               | `card`, `cardForeground`                         |
| Popovers            | `popover`, `popoverForeground`                   |
| Primary actions     | `primary`, `primaryForeground`                   |
| Secondary actions   | `secondary`, `secondaryForeground`               |
| Muted surfaces      | `muted`, `mutedForeground`                       |
| Accents             | `accent`, `accentForeground`                     |
| Destructive actions | `destructive`, `destructiveForeground`           |
| Controls            | `border`, `input`, `ring`                        |
| Charts              | `chart1`, `chart2`, `chart3`, `chart4`, `chart5` |
| Sidebar base        | `sidebar`, `sidebarForeground`                   |
| Sidebar primary     | `sidebarPrimary`, `sidebarPrimaryForeground`     |
| Sidebar accent      | `sidebarAccent`, `sidebarAccentForeground`       |
| Sidebar controls    | `sidebarBorder`, `sidebarRing`                   |

```json theme={null}
{
  "colors": {
    "primary": "#3969D9",
    "primaryForeground": "#FFFFFF",
    "background": "#F8FAFF",
    "foreground": "#111827",
    "dark": {
      "primary": "#3969D9",
      "primaryForeground": "#FFFFFF",
      "background": "#0B1020",
      "foreground": "#F8FAFC"
    }
  }
}
```

## Input tokens

| Token          | Type   | Meaning                      |
| -------------- | ------ | ---------------------------- |
| `width`        | string | CSS width                    |
| `height`       | string | CSS height                   |
| `background`   | string | CSS background color         |
| `placeholder`  | string | CSS placeholder color        |
| `border`       | string | CSS border color             |
| `borderWidth`  | number | Pixels                       |
| `radius`       | number | Corner radius in pixels      |
| `marginBottom` | number | Bottom margin in pixels      |
| `paddingX`     | number | Horizontal padding in pixels |

## Button tokens

| Token        | Type   | Meaning                      |
| ------------ | ------ | ---------------------------- |
| `width`      | string | CSS width                    |
| `height`     | string | CSS height                   |
| `alignment`  | string | `left`, `center`, or `right` |
| `fontSize`   | number | Pixels                       |
| `radius`     | number | Corner radius in pixels      |
| `background` | string | CSS background color         |
| `text`       | string | CSS text color               |
| `marginY`    | number | Vertical margin in pixels    |
| `paddingX`   | number | Horizontal padding in pixels |

## Complete example

```json theme={null}
{
  "definition": {
    "theme": {
      "font": "Inter",
      "corners": 0,
      "theme": "light",
      "background": {
        "brightness": 100,
        "layout": "fullscreen",
        "image": null
      },
      "alignment": {
        "welcomeAndEndings": 1,
        "questions": 0,
        "logo": 1
      },
      "size": {
        "welcomeAndEndings": 2,
        "questions": 1
      },
      "layout": {
        "pageWidth": "720px",
        "baseFontSize": "16px"
      },
      "inputs": {
        "height": "48px",
        "background": "#FFFFFF",
        "border": "#CBD5E1",
        "borderWidth": 1,
        "radius": 10,
        "paddingX": 14
      },
      "buttons": {
        "height": "48px",
        "alignment": "left",
        "fontSize": 16,
        "radius": 10,
        "background": "#3969D9",
        "text": "#FFFFFF",
        "paddingX": 20
      },
      "colors": {
        "primary": "#3969D9",
        "primaryForeground": "#FFFFFF",
        "ring": "#3969D9",
        "dark": {
          "primary": "#3969D9",
          "primaryForeground": "#FFFFFF",
          "ring": "#3969D9"
        }
      }
    }
  }
}
```

## Custom CSS

`customCss` is Pro. Free-plan requests that add or change non-empty custom CSS return `403 PLAN_RESTRICTION`. Sending an empty string is allowed to remove existing CSS.