> For the complete documentation index, see [llms.txt](https://docs.manifold.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/manifold-css-variables/list-of-manifold-css-variables.md).

# List of Manifold CSS Variables

## **Theme Colours**

* `--manifold-theme--color--primary`

  A primary colour used throughout the widgets. Set this to your primary brand colour. Used in main CTAs/links.
* `--manifold-theme--color--secondary`

  A secondary colour used throughout the widgets. Set this to your secondary brand colour. Used in secondary CTAs/links.
* `--manifold-theme--color--success`

  A success colour used throughout the widgets. Communicates that an action was completed without failure. Usually a shade of green.
* `--manifold-theme--color--error`

  An error colour used throughout the widgets. Communicates information and/or issues of high severity. Usually a shade of red.
* `--manifold-theme--color--warning`

  A warning colour used throughout the widgets. Communicates information and/or issues of medium severity. Usually a shade of orange or yellow.
* `--manifold-theme--color--info`

  An informational colour used throughout the widgets. Communicates information and/or issues of low severity. Usually a shade of blue.

## **Text**

* `--manifold-text--color--body`

  The default text colour for readable text. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-page--color--background)`.
* `--manifold-text--color--muted`

  The text colour when an element is less emphasised, such as label text for inputs or the label of an unselected tab.
* `--manifold-text--color--disabled`

  The text colour for disabled or non-actionable items. It is separated from `muted` so that users have a distinction between “actionable/clickable” (`muted`) and “non-actionable/non-clickable” (`disabled`) text displays.
* `--manifold-text--color--primary`

  The default text colour for elements with the primary theme colour as background. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-theme--color--primary)`.
* `--manifold-text--color--secondary`

  The colour used for text of secondary importance. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-theme--color--secondary)`.
* `--manifold-text--font-family--body`

  Font-family of the body text.
* `--manifold-text--font-family-header`

  Font-family of the header text.
* `--manifold-text--font-size--body`

  Font size of the body text.
* `--manifold-text--font-size-header`

  Font size of the header text.

## **Border**

* `--manifold-border--color`

  The colour used for the borders on elements.
* `--manifold-border--width`

  The width of the borders on elements.
* `--manifold-border--radius`

  The border-radius used for the borders on elements.
* `--manifold-border--style`

  The border-style used for the borders on elements.

## **Other**

* `--manifold-page--color--background`

  The colour used for the background of the page.
* `--manifold-element--color--background`

  The colour used for the background of elements placed on a higher z-index on the page, such as [card elements](https://mui.com/material-ui/react-card/#main-content) and popup menus.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.manifold.xyz/manifold-for-developers/resources/widgets/manifold-css-variables/list-of-manifold-css-variables.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.