Design Token Tree

digraph dt {
  rankdir=LR;
  graph [bgcolor=transparent];
  node [shape=box, style="rounded,filled", fontname=Inter, fontsize=10];

  Root [label="Design tokens", fillcolor="#fce7f3"];

  C [label="colour", fillcolor="#dbeafe"];
  S [label="spacing", fillcolor="#dbeafe"];
  T [label="type", fillcolor="#dbeafe"];
  M [label="motion", fillcolor="#dbeafe"];

  Root -> C; Root -> S; Root -> T; Root -> M;

  C -> "brand.500"; C -> "brand.600"; C -> "neutral.50"; C -> "neutral.900";
  C -> "semantic.error"; C -> "semantic.success";
  S -> "space.0 (0px)"; S -> "space.1 (4px)"; S -> "space.2 (8px)"; S -> "space.4 (16px)";
  T -> "font.sans"; T -> "font.mono"; T -> "size.body"; T -> "size.h1"; T -> "weight.semibold";
  M -> "duration.fast (120ms)"; M -> "ease.out"; M -> "ease.spring";
}