---
title: Figma tokens to CSS custom properties: Appetite UI
source: https://www.appetiteui.com/works-with/css
---

# Figma variables as CSS custom properties.

Appetite UI works with CSS through a generated file of custom properties, one --ap name for each token, with the dark values written as a second block under the same names.

## What the file gives

- One custom property a token. brand/base is var(--ap-brand-base) and spacing/4 is var(--ap-space-4). The durations are there too, for example --ap-duration-fast.
- Dark values under the same names. The export writes the dark values once under [data-theme="dark"] and .dark, and again under prefers-color-scheme, which a data-theme="light" on the page overrides.

## How to wire it up

1. Take the CSS output from the file you buy. The token source and all four outputs come with the purchase. There is no package to install and no public repository.
2. Add the CSS file to the web build. Load it before the styles that read it.
3. Read the properties with var(). var(--ap-brand-base) instead of a hex. Change values in the source, not in the CSS file.

### What the CSS export does with two modes (one name, two values)

```css
:root {
  --ap-brand-base: #155DFC;
}

[data-theme="dark"],
.dark {
  --ap-brand-base: #2B7FFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --ap-brand-base: #2B7FFF;
  }
}
```

### Using the properties (a rule)

```css
.button {
  background: var(--ap-brand-base);
  padding: var(--ap-space-4);
}
```

## What to check

- Tokens only. Appetite UI is a kit for iOS and Android apps, so it draws no web components. The CSS output carries the values, not a web interface. Appetite UI Code, the coded components, is upcoming and is not part of the file today.
- Some values do not translate. Liquid Glass has no CSS equivalent and backdrop blur is approximated, so a glass surface needs a decision on the web.
- Edit the source. A value changed by hand in the CSS file is overwritten when the outputs are generated again.

## FAQ

### Is Appetite UI a web UI kit?

No. It is a Figma UI kit for iOS and Android apps. The CSS output exists so a web surface can read the same token values.

### How do dark values arrive in CSS?

As a second block under the same property names. The export writes them under [data-theme="dark"] and .dark and under prefers-color-scheme.

## Official documentation (30 October 2026)

- [Using CSS custom properties, MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), read 30 October 2026

## On this site

- [Code output in the docs](https://www.appetiteui.com/docs/code-output)
- [How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css)
- [The token source on /tokens](https://www.appetiteui.com/tokens)