diff --git a/src/components/TreeReactFlow/Flavor.ts b/src/components/TreeReactFlow/Flavor.ts
index 6f89938b..5ca7590b 100644
--- a/src/components/TreeReactFlow/Flavor.ts
+++ b/src/components/TreeReactFlow/Flavor.ts
@@ -43,8 +43,8 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
       );
     case "APP":
       return classNames(
-        "border-yellow-secondary ring-yellow-secondary bg-yellow-secondary",
-        "hover:ring-yellow-secondary",
+        "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary",
+        "hover:ring-blue-tertiary",
         commonHoverClasses
       );
     case "Con":
@@ -79,8 +79,8 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
       );
     case "LAM":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-blue-secondary ring-blue-secondary bg-white-primary",
+        "hover:ring-blue-secondary",
         commonHoverClasses
       );
     case "GlobalVar":
@@ -126,56 +126,56 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
 
     case "PrimCon":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-green-primary ring-green-primary bg-white-primary",
+        "hover:ring-green-primary",
         commonHoverClasses
       );
     case "TEmptyHole":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-red-tertiary ring-red-tertiary bg-white-primary",
+        "hover:ring-red-tertiary",
         commonHoverClasses
       );
     case "THole":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-red-tertiary ring-red-tertiary bg-white-primary",
+        "hover:ring-red-tertiary",
         commonHoverClasses
       );
     case "TCon":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-green-primary ring-green-primary bg-white-primary",
+        "hover:ring-green-primary",
         commonHoverClasses
       );
     case "TFun":
       return classNames(
-        "border-black-primary ring-black-primary bg-black-primary",
-        "hover:ring-black-primary",
+        "border-blue-primary ring-blue-primary bg-blue-primary",
+        "hover:ring-blue-primary",
         commonHoverClasses
       );
     case "TVar":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-blue-quaternary ring-blue-quaternary bg-white-primary",
+        "hover:ring-blue-quaternary",
         commonHoverClasses
       );
     case "TApp":
       return classNames(
-        "border-black-primary ring-black-primary bg-black-primary",
-        "hover:ring-black-primary",
+        "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary",
+        "hover:ring-blue-tertiary",
         commonHoverClasses
       );
     case "TForall":
       return classNames(
-        "border-black-primary ring-black-primary bg-white-primary",
-        "hover:ring-black-primary",
+        "border-blue-secondary ring-blue-secondary bg-white-primary",
+        "hover:ring-blue-secondary",
         commonHoverClasses
       );
     case "TLet":
       return classNames(
-        "border-black-primary ring-black-primary bg-black-primary",
-        "hover:ring-black-primary",
+        "border-blue-quaternary ring-blue-quaternary bg-blue-quaternary",
+        "hover:ring-blue-quaternary",
         commonHoverClasses
       );
 
@@ -190,7 +190,7 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
     case "PatternCon":
       return "border-green-primary ring-green-primary bg-white-primary";
     case "PrimPattern":
-      return "border-black-primary ring-black-primary bg-white-primary";
+      return "border-green-primary ring-green-primary bg-white-primary";
     case "PatternWildcard":
       return "border-none bg-transparent";
     case "PatternBind":
@@ -227,7 +227,7 @@ export const flavorContentClasses = (
     case "Lam":
       return "text-blue-primary";
     case "LAM":
-      return "text-blue-primary";
+      return "text-blue-secondary";
     case "GlobalVar":
       return "text-blue-primary";
     case "LocalVar":
@@ -257,7 +257,7 @@ export const flavorContentClasses = (
     case "TApp":
       return "text-white-primary";
     case "TForall":
-      return "text-blue-primary";
+      return "text-blue-secondary";
     case "TLet":
       return "text-white-primary";
     case "PatternCon":
@@ -277,25 +277,25 @@ export const flavorContentClasses = (
 export const flavorLabelClasses = (flavor: NodeFlavor): string => {
   switch (flavor) {
     case "Hole":
-      return "font-code bg-red-tertiary border-red-tertiary text-white-primary";
+      return "";
     case "EmptyHole":
-      return "font-code bg-red-tertiary border-red-tertiary text-white-primary";
+      return "";
     case "Ann":
       return "font-code bg-black-primary border-black-primary text-white-primary";
     case "App":
       return "font-code bg-blue-tertiary border-blue-tertiary text-white-primary";
     case "APP":
-      return "font-code bg-yellow-secondary border-yellow-secondary text-white-primary";
+      return "font-code bg-blue-tertiary border-blue-tertiary text-white-primary";
     case "Con":
       return "bg-green-primary border-green-primary text-white-primary";
     case "Lam":
       return "font-code bg-blue-primary border-blue-primary text-white-primary";
     case "LAM":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "font-code bg-blue-secondary border-blue-secondary text-white-primary";
     case "GlobalVar":
       return "bg-blue-quaternary border-blue-quaternary text-white-primary";
     case "KHole":
-      return "font-code bg-red-tertiary border-red-tertiary text-white-primary";
+      return "";
     case "KType":
       return "font-code bg-grey-tertiary bg-grey-tertiary text-white-primary";
     case "KFun":
@@ -313,29 +313,29 @@ export const flavorLabelClasses = (flavor: NodeFlavor): string => {
     case "CaseWith": // Special case: we hide this label.
       return "hidden font-code bg-yellow-primary border-yellow-primary text-white-primary";
     case "PrimCon":
-      return "bg-black-primary border-black-primary text-white-primary";
+      return "bg-green-primary border-green-primary text-white-primary";
     case "TEmptyHole":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "";
     case "THole":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "";
     case "TCon":
-      return "bg-black-primary border-black-primary text-white-primary";
+      return "bg-green-primary border-green-primary text-white-primary";
     case "TFun":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "font-code bg-blue-primary border-blue-primary text-white-primary";
     case "TVar":
-      return "bg-black-primary border-black-primary text-white-primary";
+      return "bg-blue-quaternary border-blue-quaternary text-white-primary";
     case "TApp":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "font-code bg-blue-tertiary border-blue-tertiary text-white-primary";
     case "TForall":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "font-code bg-blue-secondary border-blue-secondary text-white-primary";
     case "TLet":
-      return "font-code bg-black-primary border-black-primary text-white-primary";
+      return "font-code bg-blue-quaternary border-blue-quaternary text-white-primary";
     case "Pattern":
-      return "bg-yellow-primary border-yellow-primary text-white-primary";
+      return "";
     case "PatternCon":
       return "bg-green-primary border-green-primary text-white-primary";
     case "PrimPattern":
-      return "bg-black-primary border-black-primary text-white-primary";
+      return "bg-green-primary border-green-primary text-white-primary";
     case "PatternWildcard":
       return "hidden";
     case "PatternBind":
@@ -354,7 +354,7 @@ export const flavorEdgeClasses = (flavor: NodeFlavor): string => {
     case "App":
       return "stroke-blue-tertiary";
     case "APP":
-      return "stroke-yellow-secondary";
+      return "stroke-blue-tertiary";
     case "Con":
       return "stroke-green-primary";
     case "KHole":
@@ -366,7 +366,7 @@ export const flavorEdgeClasses = (flavor: NodeFlavor): string => {
     case "Lam":
       return "stroke-blue-primary";
     case "LAM":
-      return "stroke-black-primary";
+      return "stroke-blue-secondary";
     case "GlobalVar":
       return "stroke-blue-quaternary";
     case "LocalVar":
@@ -382,31 +382,31 @@ export const flavorEdgeClasses = (flavor: NodeFlavor): string => {
     case "CaseWith":
       return "stroke-yellow-primary";
     case "PrimCon":
-      return "stroke-black-primary";
+      return "stroke-green-primary";
     case "TEmptyHole":
-      return "stroke-black-primary";
+      return "stroke-red-tertiary";
     case "THole":
-      return "stroke-black-primary";
+      return "stroke-red-tertiaryy";
     case "TCon":
-      return "stroke-black-primary";
+      return "stroke-green-primary";
     case "TFun":
-      return "stroke-black-primary";
+      return "stroke-blue-primary";
     case "TVar":
-      return "stroke-black-primary";
+      return "stroke-blue-quaternary";
     case "TApp":
-      return "stroke-black-primary";
+      return "stroke-blue-tertiary";
     case "TForall":
-      return "stroke-black-primary";
+      return "stroke-blue-secondary";
     case "TLet":
-      return "stroke-black-primary";
+      return "stroke-blue-quaternary";
     case "Pattern":
       return "stroke-yellow-primary";
     case "PatternCon":
       return "stroke-green-primary";
     case "PrimPattern":
-      return "stroke-black-primary";
+      return "stroke-green-primary";
     case "PatternWildcard":
-      return "stroke-black-primary";
+      return "stroke-grey-secondary";
     case "PatternBind":
       return "stroke-blue-quaternary";
   }
@@ -415,15 +415,15 @@ export const flavorEdgeClasses = (flavor: NodeFlavor): string => {
 export const flavorLabel = (flavor: NodeFlavor): string => {
   switch (flavor) {
     case "Hole":
-      return "{?}";
+      return "";
     case "EmptyHole":
-      return "?";
+      return "";
     case "Ann":
       return ":";
     case "App":
-      return "$";
+      return "←";
     case "APP":
-      return "@";
+      return "←";
     case "Con":
       return "V";
     case "Lam":
@@ -447,9 +447,9 @@ export const flavorLabel = (flavor: NodeFlavor): string => {
     case "PrimCon":
       return "V";
     case "TEmptyHole":
-      return "?";
+      return "";
     case "THole":
-      return "{?}";
+      return "";
     case "TCon":
       return "T";
     case "TFun":
@@ -457,13 +457,13 @@ export const flavorLabel = (flavor: NodeFlavor): string => {
     case "TVar":
       return "Var";
     case "TApp":
-      return "@";
+      return "←";
     case "TForall":
       return "∀";
     case "TLet":
       return "let";
     case "Pattern":
-      return "P";
+      return "";
     case "PatternCon":
       return "V";
     case "PrimPattern":
@@ -475,7 +475,7 @@ export const flavorLabel = (flavor: NodeFlavor): string => {
     case "KType":
       return "✱";
     case "KHole":
-      return "?";
+      return "";
     case "KFun":
       return "➜";
   }
@@ -498,19 +498,19 @@ export const noBodyFlavorContents = (flavor: NodeFlavorNoBody): string => {
     case "TApp":
       return "apply type";
     case "Hole":
-      return "{?}";
+      return "";
     case "EmptyHole":
-      return "?";
+      return "";
     case "TEmptyHole":
-      return "?";
+      return "";
     case "THole":
-      return "{?}";
+      return "";
     case "PatternWildcard":
       return "🤷🏽‍♀️";
     case "KType":
       return "type";
     case "KHole":
-      return "?";
+      return "";
     case "KFun":
       return "type constructor";
   }
@@ -522,3 +522,53 @@ export const boxFlavorBackground = (flavor: NodeFlavorBoxBody): string => {
       return "bg-yellow-primary";
   }
 };
+
+// TODO get from backend? this comes down to whether these are from `Expr` or `Type`
+export const isTypeLevel = (flavor: NodeFlavor): "term" | "type" => {
+  switch (flavor) {
+    case "Con":
+    case "Lam":
+    case "LAM":
+    case "Let":
+    case "Letrec":
+    case "PatternBind":
+    case "PatternCon":
+    case "LetType":
+    case "GlobalVar":
+    case "LocalVar":
+    case "PrimCon":
+    case "Pattern":
+    case "Hole":
+    case "EmptyHole":
+    case "Ann":
+    case "App":
+    case "APP":
+    case "Case":
+    case "CaseWith":
+    case "PatternWildcard":
+    case "PrimPattern":
+      return "term";
+    case "TCon":
+    case "TVar":
+    case "TForall":
+    case "TLet":
+    case "TEmptyHole":
+    case "THole":
+    case "TFun":
+    case "TApp":
+      return "type";
+    // TODO separate rendering for kinds?
+    case "KFun":
+    case "KHole":
+    case "KType":
+      return "type";
+  }
+};
+export const typeOrTermClasses = (x: "term" | "type"): string => {
+  switch (x) {
+    case "term":
+      return "rounded-3xl";
+    case "type":
+      return "";
+  }
+};
diff --git a/src/components/TreeReactFlow/index.tsx b/src/components/TreeReactFlow/index.tsx
index 7e7f11f4..ef5d6afb 100644
--- a/src/components/TreeReactFlow/index.tsx
+++ b/src/components/TreeReactFlow/index.tsx
@@ -60,7 +60,9 @@ import {
   flavorEdgeClasses,
   flavorLabel,
   flavorLabelClasses,
+  isTypeLevel,
   noBodyFlavorContents,
+  typeOrTermClasses,
 } from "./Flavor";
 import { ZoomBar, ZoomBarProps } from "./ZoomBar";
 import { WasmLayoutType } from "@zxch3n/tidy/wasm_dist";
@@ -152,11 +154,12 @@ const nodeTypes = {
       <div
         title={data.contents}
         className={classNames(
+          typeOrTermClasses(isTypeLevel(data.flavor)),
           {
             "ring-4 ring-offset-4": data.selected,
             "hover:ring-opacity-50": !data.selected,
           },
-          "flex items-center justify-center rounded-md border-4 text-grey-tertiary",
+          "flex items-center justify-center border-4 text-grey-tertiary",
           flavorClasses(data.flavor)
         )}
         style={{
@@ -197,11 +200,12 @@ const nodeTypes = {
       <div
         title={data.flavor}
         className={classNames(
+          typeOrTermClasses(isTypeLevel(data.flavor)),
           {
             "ring-4 ring-offset-4": data.selected,
             "hover:ring-opacity-50": !data.selected,
           },
-          "flex items-center justify-center rounded-md border-4 text-grey-tertiary",
+          "flex items-center justify-center border-4 text-grey-tertiary",
           flavorClasses(data.flavor)
         )}
         style={{
@@ -234,7 +238,8 @@ const nodeTypes = {
       {handle("target", Position.Left)}
       <div
         className={classNames(
-          "flex justify-center rounded-md border-4",
+          typeOrTermClasses(isTypeLevel(data.flavor)),
+          "flex justify-center border-4",
           flavorClasses(data.flavor),
           // We use a white base so that the "transparent" background will not appear as such.
           "bg-white-primary"
@@ -273,13 +278,13 @@ const nodeTypes = {
       <div
         title={data.def.baseName}
         className={classNames(
+          typeOrTermClasses("term"),
           "flex items-center justify-center",
-          "rounded-lg",
           "bg-white-primary",
-          "border-4 border-blue-secondary ring-blue-secondary",
+          "border-4 border-grey-secondary ring-grey-secondary",
           data.selected && "ring-4 ring-offset-4",
           commonHoverClasses,
-          "hover:ring-blue-secondary",
+          "hover:ring-grey-secondary",
           !data.selected && "hover:ring-opacity-50"
         )}
         style={{
@@ -303,8 +308,8 @@ const nodeTypes = {
       <div
         title={data.name.baseName}
         className={classNames(
+          typeOrTermClasses("type"),
           "flex items-center justify-center",
-          "rounded-md",
           "bg-white-primary",
           "border-4 border-grey-secondary ring-grey-secondary",
           data.selected && "ring-4 ring-offset-4",
@@ -335,14 +340,12 @@ const nodeTypes = {
       <div
         title={data.name}
         className={classNames(
+          typeOrTermClasses("type"),
           "flex items-center justify-center",
-          "rounded-md",
-          "bg-white-primary",
-          "border-4 border-grey-secondary ring-grey-secondary",
+          "border-4",
           data.selected && "ring-4 ring-offset-4",
-          commonHoverClasses,
-          "hover:ring-grey-secondary",
-          !data.selected && "hover:ring-opacity-50"
+          !data.selected && "hover:ring-opacity-50",
+          flavorClasses("TVar")
         )}
         style={{
           width: data.width,
@@ -374,8 +377,8 @@ const nodeTypes = {
       <div
         title={data.name.baseName}
         className={classNames(
+          typeOrTermClasses("term"),
           "flex items-center justify-center",
-          "rounded-md",
           "border-4",
           data.selected && "ring-4 ring-offset-4",
           commonHoverClasses,
@@ -468,10 +471,10 @@ type APITreeNode = {
   children: number;
 };
 
-const augmentTree = async <T, E>(
+const augmentTree = async <N, E>(
   tree: APITree,
-  f: (tree: APITreeNode) => Promise<[T, (child: T, isRight: boolean) => E]>
-): Promise<Tree<T, E>> => {
+  f: (tree: APITreeNode) => Promise<[N, (child: N, isRight: boolean) => E]>
+): Promise<Tree<N, E>> => {
   const childTrees = await Promise.all(
     tree.childTrees.map((t) => augmentTree(t, f))
   );