{
  "$description": "Asana brand tokens from unfairly.ai/brand-guidelines/asana, checked 2026-10-31. Design Tokens Community Group format 2025.10.",
  "color": {
    "paper": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "surface": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.953,
          0.953,
          0.953
        ],
        "hex": "#f3f3f3"
      }
    },
    "ink": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.043,
          0.02,
          0.02
        ],
        "hex": "#0b0505"
      }
    },
    "ink-muted": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.431,
          0.431,
          0.431
        ],
        "hex": "#6e6e6e"
      }
    },
    "accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.345,
          0.29
        ],
        "hex": "#ff584a"
      }
    },
    "on-accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "accent-secondary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.992,
          0.247,
          0.992
        ],
        "hex": "#fd3ffd"
      }
    },
    "night": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "on-night": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "asana-white": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "asana-black": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.043,
          0.02,
          0.02
        ],
        "hex": "#0b0505"
      }
    },
    "asana-coral": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.345,
          0.29
        ],
        "hex": "#ff584a"
      }
    },
    "fuchsia": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.992,
          0.247,
          0.992
        ],
        "hex": "#fd3ffd"
      }
    },
    "light-fuchsia-asana-pink": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.788,
          1
        ],
        "hex": "#ffc9ff"
      }
    },
    "neutral-grey-asana-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.953,
          0.953,
          0.953
        ],
        "hex": "#f3f3f3"
      }
    },
    "blue": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.443,
          1
        ],
        "hex": "#0071ff"
      }
    },
    "green": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.059,
          0.627,
          0.259
        ],
        "hex": "#0fa042"
      }
    },
    "yellow": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.776,
          0.804,
          0
        ],
        "hex": "#c6cd00"
      }
    },
    "grey-asana-dark-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.502,
          0.502,
          0.502
        ],
        "hex": "#808080"
      }
    },
    "light-blue": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.62,
          0.863,
          0.949
        ],
        "hex": "#9edcf2"
      }
    },
    "light-green": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.62,
          0.949,
          0.643
        ],
        "hex": "#9ef2a4"
      }
    },
    "light-yellow": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.91,
          0.961,
          0.322
        ],
        "hex": "#e8f552"
      }
    },
    "light-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.843,
          0.851,
          0.859
        ],
        "hex": "#d7d9db"
      }
    },
    "magenta": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.949,
          0.051,
          0.514
        ],
        "hex": "#f20d83"
      }
    },
    "turquoise": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.573,
          0.443
        ],
        "hex": "#009271"
      }
    },
    "purple": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.455,
          0.357,
          0.98
        ],
        "hex": "#745bfa"
      }
    },
    "orange": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.478,
          0
        ],
        "hex": "#ff7a00"
      }
    },
    "light-magenta": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.678,
          0.804
        ],
        "hex": "#ffadcd"
      }
    },
    "light-turquoise": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.62,
          0.949,
          0.871
        ],
        "hex": "#9ef2de"
      }
    },
    "light-purple": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.663,
          0.6,
          1
        ],
        "hex": "#a999ff"
      }
    },
    "light-orange": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.706,
          0.412
        ],
        "hex": "#ffb469"
      }
    },
    "grid-dot-light": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.769,
          0.78,
          0.788
        ],
        "hex": "#c4c7c9"
      }
    },
    "grid-gradient-fuchsia": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.11,
          1
        ],
        "hex": "#ff1cff"
      }
    },
    "site-black": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "headline-black": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.055,
          0.063
        ],
        "hex": "#0d0e10"
      }
    },
    "body-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.239,
          0.239,
          0.239
        ],
        "hex": "#3d3d3d"
      }
    },
    "hero-lead-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.243,
          0.243,
          0.243
        ],
        "hex": "#3e3e3e"
      }
    },
    "meta-grey": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.431,
          0.431,
          0.431
        ],
        "hex": "#6e6e6e"
      }
    },
    "hairline": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.906,
          0.906,
          0.906
        ],
        "hex": "#e7e7e7"
      }
    },
    "field-line": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.812,
          0.812,
          0.812
        ],
        "hex": "#cfcfcf"
      }
    },
    "off-white": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "dark-rule": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.337,
          0.337,
          0.337
        ],
        "hex": "#565656"
      }
    },
    "arrow-disabled-ring": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.835,
          0.863,
          0.878
        ],
        "hex": "#d5dce0"
      }
    },
    "focus-blue": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.373,
          0.8
        ],
        "hex": "#005fcc"
      }
    },
    "site-gradient-coral": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.271,
          0.243
        ],
        "hex": "#ff453e"
      }
    },
    "site-gradient-pink": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.957,
          0.506,
          0.957
        ],
        "hex": "#f481f4"
      }
    },
    "button-primary-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-primary-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "button-secondary-nav-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "button-secondary-nav-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-secondary-nav-ring": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-outline-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "button-outline-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-outline-ring": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.431,
          0.431,
          0.431
        ],
        "hex": "#6e6e6e"
      }
    },
    "button-sso-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "button-sso-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-sso-ring": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.431,
          0.431,
          0.431
        ],
        "hex": "#6e6e6e"
      }
    },
    "button-primary-on-dark-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "button-primary-on-dark-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-secondary-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "button-secondary-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "button-secondary-ring": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.431,
          0.431,
          0.431
        ],
        "hex": "#6e6e6e"
      }
    },
    "product-tab-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.239,
          0.239,
          0.239
        ],
        "hex": "#3d3d3d"
      }
    },
    "product-tab-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "product-tab-on": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.788,
          1
        ],
        "hex": "#ffc9ff"
      }
    },
    "input-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "teammate-card-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "skill-chip-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.953,
          0.953,
          0.953
        ],
        "hex": "#f3f3f3"
      }
    },
    "skill-chip-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.051,
          0.051,
          0.051
        ],
        "hex": "#0d0d0d"
      }
    },
    "product-card-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.239,
          0.239,
          0.239
        ],
        "hex": "#3d3d3d"
      }
    },
    "link-card-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "font": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Arial",
        "sans-serif"
      ]
    },
    "display-original": {
      "$type": "fontFamily",
      "$value": [
        "TWK Lausanne"
      ],
      "$description": "Asana's own face (Commercial typeface (TWK prefix: the Weltkern foundry); Asana's licence does not transfer). The stand-in above is the open alternative."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Arial",
        "sans-serif"
      ]
    },
    "body-original": {
      "$type": "fontFamily",
      "$value": [
        "TWK Lausanne"
      ],
      "$description": "Asana's own face (Commercial). The stand-in above is the open alternative."
    }
  },
  "typography": {
    "display-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.display}",
        "fontSize": {
          "value": 102,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 0.9,
        "letterSpacing": {
          "value": -2.55,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 48,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "display-l": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.display}",
        "fontSize": {
          "value": 54,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1,
        "letterSpacing": {
          "value": -1.08,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 30,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "quote": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.display}",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.3,
        "letterSpacing": {
          "value": -0.36,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 20,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "subhead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.display}",
        "fontSize": {
          "value": 30,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 20,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "hero-lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 350,
        "lineHeight": 1.3,
        "letterSpacing": {
          "value": 0.52,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 18,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 18,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "body-l": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 350,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0.4,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 15,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 350,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0.32,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 14,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "small": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 13,
          "unit": "px"
        },
        "fontWeight": 350,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0.26,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 12,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "eyebrow": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0.64,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 11,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "chip": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 11,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0.44,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 11,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "button": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 14,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "nav": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 16,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "footer-heading": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 1.75,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 14,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "footer-link": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 16,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    }
  },
  "space": {
    "page-margin": {
      "$type": "dimension",
      "$value": {
        "value": 76,
        "unit": "px"
      }
    },
    "page-margin-phone": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "section-padding": {
      "$type": "dimension",
      "$value": {
        "value": 120,
        "unit": "px"
      }
    },
    "section-padding-phone": {
      "$type": "dimension",
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "card-gap": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "container-max": {
      "$type": "dimension",
      "$value": {
        "value": 1288,
        "unit": "px"
      }
    },
    "hero-text-max": {
      "$type": "dimension",
      "$value": {
        "value": 873,
        "unit": "px"
      }
    },
    "nav-height": {
      "$type": "dimension",
      "$value": {
        "value": 68,
        "unit": "px"
      }
    },
    "gutter": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    }
  },
  "radius": {
    "button-primary": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "button-secondary-nav": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "button-outline": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "button-sso": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "button-primary-on-dark": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "button-secondary": {
      "$type": "dimension",
      "$value": {
        "value": 100,
        "unit": "px"
      }
    },
    "card": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "product-tab": {
      "$type": "dimension",
      "$value": {
        "value": 64,
        "unit": "px"
      }
    },
    "input": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "teammate-card": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "skill-chip": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "product-card": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "link-card": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "panel": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    }
  },
  "motion": {
    "image-reveal-easing": {
      "$type": "cubicBezier",
      "$value": [
        0,
        1.08,
        0.77,
        1.01
      ]
    },
    "image-reveal-duration": {
      "$type": "duration",
      "$value": {
        "value": 500,
        "unit": "ms"
      }
    },
    "button-hover-duration": {
      "$type": "duration",
      "$value": {
        "value": 300,
        "unit": "ms"
      }
    },
    "form-button-hover-duration": {
      "$type": "duration",
      "$value": {
        "value": 150,
        "unit": "ms"
      }
    }
  }
}