Code output

How does one variable become four languages?

Appetite UI holds its values once, as a token file, and generates the rest. One variable, four languages, no second copy to keep in step.

The export reads the first three names off the variable, which stores a code name for web, iOS and Android.

What is the token source?

One JSON file in the W3C Design Tokens format, run through Style Dictionary v5. Primitives hold the values. Semantic tokens point at primitives. Nothing holds a value twice.

{
  "colors": {
    "blue": {
      "500": { "$type": "color", "$value": "#155DFC" }
    }
  },
  "brand": {
    "base": { "$type": "color", "$value": "{colors.blue.500}" }
  }
}

Figma writes a path with slashes, brand/base. The token file writes the same path with dots, so the reference reads {colors.blue.500}. Same token, two notations, and the export is where they meet.

The format is a public standard, so other design token tools can read the same values.

Which languages does the export produce?

Four outputs off the one source. These are examples of what the export produces, cut to three tokens so the four sit side by side: a color, a spacing step and a duration.

:root {
  --ap-brand-base: #155DFC;
  --ap-space-4: 16px;
  --ap-duration-fast: 120ms;
}

extension Color {
  static let apBrandBase = Color.apDynamic(
    light: Color(apHex: 0x155DFC),
    dark: Color(apHex: 0x2B7FFF))
}
enum AppetiteSpacing { static let space4: CGFloat = 16 }
enum AppetiteMotion { static let durationFast = 0.12 }

internal val BrandBase = Color(0xFF155DFC)
internal val Space4 = 16.dp
internal val DurationFast = 120

// read as AppetiteTheme.colors.brandBase

const apBrandBase = Color(0xFF155DFC);
const apSpace4 = 16.0;
const apDurationFast = Duration(milliseconds: 120);

The file has no slot for Dart, so the export derives the Flutter names above. The other three are read off the variables.

The SwiftUI output emits Dynamic Type anchors for its text sizes, and the Compose output includes a ready Material 3 typography object. The Flutter output builds ThemeData for Light and Dark with AppetiteTheme.light() and AppetiteTheme.dark().

The source also carries the chart series colors, bg/raised, the glass tokens, the radius steps of 40 and 48, the Duo platform variables, and the heading family typography/fontFamily/Heading, Inter Display.

How do I use the tokens in my project?

Take the source and the four outputs that come with the file you buy, add the output for your platform to the project, and use the generated names. There is no package to install and no public repository.

1. Take the source and the four outputs from the file you buy.

2. Add the output for your platform to the project: the CSS file to a web build, the Swift file to an Xcode target, the Kotlin file to a Compose module, the Dart file to a Flutter package.

3. Use the generated name: var(--ap-brand-base) in CSS, Color.apBrandBase in SwiftUI, AppetiteTheme.colors.brandBase in Compose and apBrandBase in Flutter.

4. Change a value in the source, not in an output. The outputs are generated from the source with Style Dictionary v5, so an edit in an output file is lost at the next export.

The table gives the color and the spacing step of the samples above in each output.

How do modes reach the code?

A mode is a second value on the same token, in the same file. Light and Dark on color, Brand and System on the platform mirrors, five Platform modes on the platform metrics. One source carries all of them.

The on-color tokens resolve to white in both modes. A label on a filled button keeps its color when the theme flips.

The last two rows are the minimum touch target: 44 pt on iOS and 48 dp on Android, read from one variable.

: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;
  }
}

Can a coding agent read the design system?

Yes. The Appetite UI Core Skill is an instruction file included with your purchase. It teaches a coding agent which token and which pattern to use, so Claude, Cursor or anything else that reads project instructions works from the same source the export runs on.

Those descriptions are carried on the variables themselves: the guidance travels with the value. Figma Code Connect maps one component to one snippet. An agent also has to know which token to reach for, and that is what the Core Skill supplies.