diff --git a/packages/panda-preset/src/tokens/primitive-typography.value.json b/packages/panda-preset/src/tokens/primitive-typography.value.json
index eb23d319..bbad0e88 100644
--- a/packages/panda-preset/src/tokens/primitive-typography.value.json
+++ b/packages/panda-preset/src/tokens/primitive-typography.value.json
@@ -11,231 +11,247 @@
       }
     }
   },
-  "font-weight-800": {
-    "$type": "number",
-    "$value": 800,
+  "monospace-font": {
+    "$type": "string",
+    "$value": "Recursive",
     "$description": "",
     "$extensions": {
       "com.figma": {
         "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
+        "scopes": ["ALL_SCOPES"],
         "codeSyntax": {}
       }
     }
   },
-  "font-weight-700": {
-    "$type": "number",
-    "$value": 700,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+  "font-weight": {
+    "font-weight-800": {
+      "$type": "number",
+      "$value": 800,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-weight-600": {
-    "$type": "number",
-    "$value": 600,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+    },
+    "font-weight-700": {
+      "$type": "number",
+      "$value": 700,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-weight-500": {
-    "$type": "number",
-    "$value": 500,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+    },
+    "font-weight-600": {
+      "$type": "number",
+      "$value": 600,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-weight-400": {
-    "$type": "number",
-    "$value": 400,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+    },
+    "font-weight-500": {
+      "$type": "number",
+      "$value": 500,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-weight-300": {
-    "$type": "number",
-    "$value": 300,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+    },
+    "font-weight-400": {
+      "$type": "number",
+      "$value": 400,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-weight-200": {
-    "$type": "number",
-    "$value": 200,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": true,
-        "scopes": ["FONT_STYLE"],
-        "codeSyntax": {}
+    },
+    "font-weight-300": {
+      "$type": "number",
+      "$value": 300,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-300": {
-    "$type": "number",
-    "$value": 12,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": true,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-weight-200": {
+      "$type": "number",
+      "$value": 200,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": true,
+          "scopes": ["FONT_STYLE"],
+          "codeSyntax": {}
+        }
       }
     }
   },
-  "font-size-325": {
-    "$type": "number",
-    "$value": 13,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+  "font-size": {
+    "font-size-300": {
+      "$type": "number",
+      "$value": 12,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": true,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-350": {
-    "$type": "number",
-    "$value": 14,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-325": {
+      "$type": "number",
+      "$value": 13,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-400": {
-    "$type": "number",
-    "$value": 16,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-350": {
+      "$type": "number",
+      "$value": 14,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-450": {
-    "$type": "number",
-    "$value": 18,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-400": {
+      "$type": "number",
+      "$value": 16,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-500": {
-    "$type": "number",
-    "$value": 20,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-450": {
+      "$type": "number",
+      "$value": 18,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-600": {
-    "$type": "number",
-    "$value": 24,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-500": {
+      "$type": "number",
+      "$value": 20,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-750": {
-    "$type": "number",
-    "$value": 30,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-600": {
+      "$type": "number",
+      "$value": 24,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-900": {
-    "$type": "number",
-    "$value": 36,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-750": {
+      "$type": "number",
+      "$value": 30,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-1000": {
-    "$type": "number",
-    "$value": 40,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-900": {
+      "$type": "number",
+      "$value": 36,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-1050": {
-    "$type": "number",
-    "$value": 42,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-1000": {
+      "$type": "number",
+      "$value": 40,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
-    }
-  },
-  "font-size-1200": {
-    "$type": "number",
-    "$value": 48,
-    "$description": "",
-    "$extensions": {
-      "com.figma": {
-        "hiddenFromPublishing": false,
-        "scopes": ["TEXT_CONTENT"],
-        "codeSyntax": {}
+    },
+    "font-size-1050": {
+      "$type": "number",
+      "$value": 42,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
+      }
+    },
+    "font-size-1200": {
+      "$type": "number",
+      "$value": 48,
+      "$description": "",
+      "$extensions": {
+        "com.figma": {
+          "hiddenFromPublishing": false,
+          "scopes": ["TEXT_CONTENT"],
+          "codeSyntax": {}
+        }
       }
     }
   }
diff --git a/packages/panda-preset/src/tokens/semantic-colors.dark-mode.json b/packages/panda-preset/src/tokens/semantic-colors.dark-mode.json
index 607813a3..9de8b6f8 100644
--- a/packages/panda-preset/src/tokens/semantic-colors.dark-mode.json
+++ b/packages/panda-preset/src/tokens/semantic-colors.dark-mode.json
@@ -86,6 +86,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.brand.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "page": {
@@ -148,6 +160,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.neutral.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "danger": {
@@ -198,6 +222,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.danger.70",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "warning": {
@@ -248,6 +284,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.warning.80",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "success": {
@@ -298,6 +346,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.success.70",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "info": {
@@ -348,6 +408,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.info.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "secondary-action": {
@@ -387,6 +459,18 @@
           }
         }
       },
+      "static": {
+        "$type": "color",
+        "$value": "colors.teal.70",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
       "navigation": {
         "initial": {
           "$type": "color",
@@ -1389,52 +1473,298 @@
       }
     }
   },
-  "WIP-data-viz": {
-    "data-1": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+  "data-viz": {
+    "sequential": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.brand.80",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
-      }
-    },
-    "data-2": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.brand.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.brand.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.brand.20",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.brand.10",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     },
-    "data-3": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+    "diverging": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.warning.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.warning.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.warning.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.warning.20",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.neutral.10",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "550": {
+        "$type": "color",
+        "$value": "colors.brand.20",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.brand.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "700": {
+        "$type": "color",
+        "$value": "colors.brand.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "800": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "900": {
+        "$type": "color",
+        "$value": "colors.brand.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "050": {
+        "$type": "color",
+        "$value": "colors.warning.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     },
-    "data-4": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+    "qualitative colors": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.warning.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.success.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.info.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.brand.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.teal.70",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "700": {
+        "$type": "color",
+        "$value": "colors.neutral.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     }
diff --git a/packages/panda-preset/src/tokens/semantic-colors.light-mode.json b/packages/panda-preset/src/tokens/semantic-colors.light-mode.json
index 174947a6..5d74aef3 100644
--- a/packages/panda-preset/src/tokens/semantic-colors.light-mode.json
+++ b/packages/panda-preset/src/tokens/semantic-colors.light-mode.json
@@ -86,6 +86,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.brand.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "page": {
@@ -148,6 +160,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.neutral.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "danger": {
@@ -198,6 +222,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.danger.70",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "warning": {
@@ -248,6 +284,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.warning.80",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "success": {
@@ -298,6 +346,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.success.70",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "info": {
@@ -348,6 +408,18 @@
             "codeSyntax": {}
           }
         }
+      },
+      "static": {
+        "$type": "color",
+        "$value": "colors.info.60",
+        "$description": "For use when a text color will not change between modes",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
       }
     },
     "secondary-action": {
@@ -387,6 +459,18 @@
           }
         }
       },
+      "static": {
+        "$type": "color",
+        "$value": "colors.teal.70",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["SHAPE_FILL", "TEXT_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
       "navigation": {
         "initial": {
           "$type": "color",
@@ -1389,52 +1473,298 @@
       }
     }
   },
-  "WIP-data-viz": {
-    "data-1": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+  "data-viz": {
+    "sequential": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.brand.10",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
-      }
-    },
-    "data-2": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.brand.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.brand.70",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.brand.80",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.brand.90",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     },
-    "data-3": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+    "diverging": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.warning.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.warning.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.warning.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.warning.20",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.neutral.10",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "550": {
+        "$type": "color",
+        "$value": "colors.brand.20",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.brand.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "700": {
+        "$type": "color",
+        "$value": "colors.brand.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "800": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "900": {
+        "$type": "color",
+        "$value": "colors.brand.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "050": {
+        "$type": "color",
+        "$value": "colors.warning.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     },
-    "data-4": {
-      "$type": "color",
-      "$value": "#ffffff",
-      "$description": "",
-      "$extensions": {
-        "com.figma": {
-          "hiddenFromPublishing": false,
-          "scopes": ["ALL_SCOPES"],
-          "codeSyntax": {}
+    "qualitative colors": {
+      "100": {
+        "$type": "color",
+        "$value": "colors.brand.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "200": {
+        "$type": "color",
+        "$value": "colors.warning.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "300": {
+        "$type": "color",
+        "$value": "colors.success.60",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "400": {
+        "$type": "color",
+        "$value": "colors.info.50",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "500": {
+        "$type": "color",
+        "$value": "colors.brand.30",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "600": {
+        "$type": "color",
+        "$value": "colors.teal.70",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
+        }
+      },
+      "700": {
+        "$type": "color",
+        "$value": "colors.neutral.40",
+        "$description": "",
+        "$extensions": {
+          "com.figma": {
+            "hiddenFromPublishing": false,
+            "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+            "codeSyntax": {}
+          }
         }
       }
     }
diff --git a/packages/panda-preset/src/tokens/text-styles.desktop.json b/packages/panda-preset/src/tokens/text-styles.desktop.json
index 24f7e38a..02bfd511 100644
--- a/packages/panda-preset/src/tokens/text-styles.desktop.json
+++ b/packages/panda-preset/src/tokens/text-styles.desktop.json
@@ -1,7 +1,7 @@
 {
   "display-lg": {
     "$type": "number",
-    "$value": "font-size-1200",
+    "$value": "font-size.font-size-1200",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -13,7 +13,7 @@
   },
   "display-md": {
     "$type": "number",
-    "$value": "font-size-1000",
+    "$value": "font-size.font-size-1000",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -25,7 +25,7 @@
   },
   "display-sm": {
     "$type": "number",
-    "$value": "font-size-750",
+    "$value": "font-size.font-size-750",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -37,7 +37,7 @@
   },
   "body-lg": {
     "$type": "number",
-    "$value": "font-size-450",
+    "$value": "font-size.font-size-450",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -49,7 +49,7 @@
   },
   "body-md": {
     "$type": "number",
-    "$value": "font-size-400",
+    "$value": "font-size.font-size-400",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -61,7 +61,7 @@
   },
   "body-sm": {
     "$type": "number",
-    "$value": "font-size-325",
+    "$value": "font-size.font-size-325",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -73,7 +73,7 @@
   },
   "headers-h1": {
     "$type": "number",
-    "$value": "font-size-1050",
+    "$value": "font-size.font-size-1050",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -85,7 +85,7 @@
   },
   "headers-h2": {
     "$type": "number",
-    "$value": "font-size-900",
+    "$value": "font-size.font-size-900",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -97,7 +97,7 @@
   },
   "headers-h3": {
     "$type": "number",
-    "$value": "font-size-750",
+    "$value": "font-size.font-size-750",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -109,7 +109,7 @@
   },
   "headers-h4": {
     "$type": "number",
-    "$value": "font-size-600",
+    "$value": "font-size.font-size-600",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -121,7 +121,7 @@
   },
   "headers-h5": {
     "$type": "number",
-    "$value": "font-size-500",
+    "$value": "font-size.font-size-500",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -133,7 +133,7 @@
   },
   "headers-h6": {
     "$type": "number",
-    "$value": "font-size-400",
+    "$value": "font-size.font-size-400",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -145,7 +145,7 @@
   },
   "label-sm": {
     "$type": "number",
-    "$value": "font-size-300",
+    "$value": "font-size.font-size-300",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -157,7 +157,7 @@
   },
   "label-md": {
     "$type": "number",
-    "$value": "font-size-350",
+    "$value": "font-size.font-size-350",
     "$description": "",
     "$extensions": {
       "com.figma": {
diff --git a/packages/panda-preset/src/tokens/text-styles.mobile.json b/packages/panda-preset/src/tokens/text-styles.mobile.json
index 771dd5fb..f841ba1c 100644
--- a/packages/panda-preset/src/tokens/text-styles.mobile.json
+++ b/packages/panda-preset/src/tokens/text-styles.mobile.json
@@ -1,7 +1,7 @@
 {
   "display-lg": {
     "$type": "number",
-    "$value": "font-size-1000",
+    "$value": "font-size.font-size-1000",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -13,7 +13,7 @@
   },
   "display-md": {
     "$type": "number",
-    "$value": "font-size-750",
+    "$value": "font-size.font-size-750",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -25,7 +25,7 @@
   },
   "display-sm": {
     "$type": "number",
-    "$value": "font-size-500",
+    "$value": "font-size.font-size-500",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -37,7 +37,7 @@
   },
   "body-lg": {
     "$type": "number",
-    "$value": "font-size-450",
+    "$value": "font-size.font-size-450",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -49,7 +49,7 @@
   },
   "body-md": {
     "$type": "number",
-    "$value": "font-size-400",
+    "$value": "font-size.font-size-400",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -61,7 +61,7 @@
   },
   "body-sm": {
     "$type": "number",
-    "$value": "font-size-325",
+    "$value": "font-size.font-size-325",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -73,7 +73,7 @@
   },
   "headers-h1": {
     "$type": "number",
-    "$value": "font-size-900",
+    "$value": "font-size.font-size-900",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -85,7 +85,7 @@
   },
   "headers-h2": {
     "$type": "number",
-    "$value": "font-size-750",
+    "$value": "font-size.font-size-750",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -97,7 +97,7 @@
   },
   "headers-h3": {
     "$type": "number",
-    "$value": "font-size-600",
+    "$value": "font-size.font-size-600",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -109,7 +109,7 @@
   },
   "headers-h4": {
     "$type": "number",
-    "$value": "font-size-500",
+    "$value": "font-size.font-size-500",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -121,7 +121,7 @@
   },
   "headers-h5": {
     "$type": "number",
-    "$value": "font-size-450",
+    "$value": "font-size.font-size-450",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -133,7 +133,7 @@
   },
   "headers-h6": {
     "$type": "number",
-    "$value": "font-size-400",
+    "$value": "font-size.font-size-400",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -145,7 +145,7 @@
   },
   "label-sm": {
     "$type": "number",
-    "$value": "font-size-300",
+    "$value": "font-size.font-size-300",
     "$description": "",
     "$extensions": {
       "com.figma": {
@@ -157,7 +157,7 @@
   },
   "label-md": {
     "$type": "number",
-    "$value": "font-size-325",
+    "$value": "font-size.font-size-325",
     "$description": "",
     "$extensions": {
       "com.figma": {