---
title: Code output
description: One W3C DTCG token source generates CSS, SwiftUI, Jetpack Compose and Flutter, and a coding agent reads the same names. How to use the outputs.
group: Foundations
source: https://www.appetiteui.com/docs/code-output
dateModified: 2026-10-08
---

# Code output

Updated: October 8, 2026.

One token source generates CSS, SwiftUI, Compose and Flutter. The same file is what a coding agent reads, so the name in the design and the name in the code are the same name.

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

Specimen: brand/base, from one variable to four generated names. 6 collections, 2 modes on color, 1 source file.

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.

The token file, two entries, one reference.

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

| Collection | Variables | Modes |
| --- | --- | --- |
| `Foundations` | 202 | Default |
| `Color Tokens` | 190 | Light, Dark |
| `Typography` | 33 | Default |
| `Motion` | 31 | Default |
| `Platform` | 20 | ios-md, ios-lg, android, ios-duo-outer, ios-duo-inner |
| `Platform Bridge` | 113 | Brand, System |

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.

CSS custom properties, web.

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

SwiftUI, iOS.

```swift
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 }
```

Jetpack Compose, Android.

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

// read as AppetiteTheme.colors.brandBase
```

Flutter, Dart.

```dart
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.

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

| Output | brand/base | spacing/4 |
| --- | --- | --- |
| CSS | `var(--ap-brand-base)` | `var(--ap-space-4)` |
| SwiftUI | `Color.apBrandBase` | `AppetiteSpacing.space4` |
| Jetpack Compose | `AppetiteTheme.colors.brandBase` | `AppetiteTheme.spacing.space4` |
| Flutter | `apBrandBase` | `apSpace4` |

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

| Token | Mode | Resolves to | Value |
| --- | --- | --- | --- |
| `brand/base` | Light | colors/blue/500 | #155DFC |
| `brand/base` | Dark | colors/blue/400 | #2B7FFF |
| `text/on-color/strong` | Light | static/static-white-0 | #FFFFFF |
| `text/on-color/strong` | Dark | static/static-white-0 | #FFFFFF |
| `M3/sys/color/primary` | Brand | brand/base | #155DFC |
| `M3/sys/color/primary` | System | platform/m3/primary | #6750A4 |
| `platform/min-touch-target` | ios-md, ios-lg, ios-duo-outer, ios-duo-inner | the value itself | 44 |
| `platform/min-touch-target` | android | the value itself | 48 |

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.

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

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

Figure: What a variable says about itself.

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.

[How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css) and [How to rebrand a mobile app in Figma with variables](https://www.appetiteui.com/blog/rebrand-mobile-app-figma-variables).

## In the screens and the glossary

- Glossary: [Design tokens](https://www.appetiteui.com/academy/glossary/design-tokens)
- Glossary: [DTCG tokens](https://www.appetiteui.com/academy/glossary/dtcg)