Skip to content

Tokens

The tokens you design with are the values that ship.

Every color, space, radius and type step lives once as a token, and your code reads the same values. Nobody retypes a hex.

Get lifetime accessRead the code output docs

Architecture

Which token level do I edit when my brand changes?

Edit the primitive. The aliases that point at it follow, and so does every component built on them.

The kit's Fitness dashboard in Light mode in Blue: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Blue: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Purple: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Purple: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Pink: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Pink: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Red: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Red: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Orange: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Orange: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Green: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Green: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Blue at a 16 corner: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Blue at a 16 corner: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Light mode in Blue at a 48 corner: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab barThe kit's Fitness dashboard in Dark mode in Blue at a 48 corner: a brand header greeting Coach Noemi, step and minute cards, workout cards and a tab bar
AppetiteTokens.swift
extension Color {
  static let apBrandBase = Color.apDynamic(
    light: Color(apHex: 0x155DFC7D52F4FB4BA3FB2C36FF690022C55E),
    dark: Color(apHex: 0x2B7FFF693EE0E9358FFB2C36F5490016A34A))
}

public enum AppetiteRadius {
  public static let xl3: CGFloat = 163248
}
AppetiteTokens.kt
internal val BrandBase = Color(0xFF155DFC7D52F4FB4BA3FB2C36FF690022C55E)
internal val BrandBaseDark = Color(0xFF2B7FFF693EE0E9358FFB2C36F5490016A34A)

object AppetiteShapes {
  val xl3: Shape = RoundedCornerShape(163248.dp)
}

// read as AppetiteTheme.colors.brandBase
appetite_tokens.dart
const apBrandBase = Color(0xFF155DFC7D52F4FB4BA3FB2C36FF690022C55E);
const apBrandBaseDark = Color(0xFF2B7FFF693EE0E9358FFB2C36F5490016A34A);
const apRadius3xl = 163248.0;
appetite.css
:root {
  --ap-brand-base: #155DFC7D52F4FB4BA3FB2C36FF690022C55E;
  --ap-radius-3xl: 163248px;
}

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

  1. Pick a mode.

    Light and Dark are two modes of one collection. The same names point at other steps.

    Mode

  2. Edit one primitive.

    No component reads the raw scale. Pick a ramp to try it.

    Ramp brand/base points at
    1. colors/blue/500400purple/500600pink/500600red/500500orange/500600green/500600tobrand/baseonHeader, actions, tab
    2. static/static-white-0onGreeting, both modes

  3. Change one value.

    radius/3xl holds one number. Every component bound to it takes the new corner.

    radius/3xl

  4. How does one token reach SwiftUI, Compose, Flutter and CSS?

    The file you buy includes the code generated from its tokens. Each name comes from its Figma variable, so brand/base is Color.apBrandBase in SwiftUI and AppetiteTheme.colors.brandBase in Compose.

    Show as

Your next rebrand is one edit.

Get lifetime accessOpen the Figma preview