Skip to content

Works with

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.Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system. One token source drives Apple and Material components in light and dark mode, and exports to SwiftUI, Jetpack Compose, Flutter and CSS.

Code output in the docsAll tools

What you get

What the file gives CSS.

As the file ships today.

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.

Set up

How to wire it up for CSS.

  1. 01

    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. 02

    Add the CSS file to the web build.

    Load it before the styles that read it.
  3. 03

    Read the properties with var().

    var(--ap-brand-base) instead of a hex. Change values in the source, not in the CSS file.

Sample

What it looks like.

In code.

What the CSS export does with two modes: one name, two values. Using the properties: a rule.
What the CSS export does with two modesone name, two values
: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 propertiesa rule
.button {
  background: var(--ap-brand-base);
  padding: var(--ap-space-4);
}

Watch for

What to check before you rely on it.

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

Questions about CSS.

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.

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

CSS's own documentation.

Where the tool says how it works. The date is the day it was read or linked.

Read 30 October 2026

Using CSS custom properties, MDN Web Docs

Check it against the tool.

This page states what the file does today and follows the documentation beside it. Where the two differ, the tool’s own page wins.

Keep reading

On this site.

Read

Code output in the docs

Read

How one Figma token becomes SwiftUI, Compose, Flutter and CSS

Read

The token source on /tokens

Bring your own stack.

Find your tool on the list, then open the preview and see how the kit sits next to it.

Get lifetime accessOpen the Figma preview