Design Tokens

Primitive and semantic tokens are read directly from the canonical specification.

{
  "border": {
    "width": {
      "hairline": {
        "$type": "dimension",
        "$value": "1px"
      },
      "strong": {
        "$type": "dimension",
        "$value": "2px"
      }
    },
    "style": {
      "default": {
        "$type": "string",
        "$value": "solid"
      }
    }
  }
}

{
  "elevation": {
    "none": {
      "$type": "shadow",
      "$value": "none"
    },
    "sm": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(15, 23, 42, 0.08)"
    },
    "md": {
      "$type": "shadow",
      "$value": "0 8px 24px rgba(15, 23, 42, 0.12)"
    }
  }
}

{
  "layout": {
    "breakpoint": {
      "sm": {
        "$type": "dimension",
        "$value": "640px"
      },
      "md": {
        "$type": "dimension",
        "$value": "768px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "1024px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "1280px"
      }
    },
    "grid": {
      "columns": {
        "$type": "number",
        "$value": 12
      },
      "gutter": {
        "$type": "dimension",
        "$value": "{space.4}"
      }
    }
  }
}

{
  "motion": {
    "fast": {
      "$type": "duration",
      "$value": "{duration.fast}"
    },
    "normal": {
      "$type": "duration",
      "$value": "{duration.normal}"
    },
    "easing": {
      "standard": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0,
          1
        ]
      }
    }
  }
}

{
  "color": {
    "white": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "black": {
      "$type": "color",
      "$value": "#0B1020"
    },
    "blue": {
      "500": {
        "$type": "color",
        "$value": "#2563EB"
      },
      "600": {
        "$type": "color",
        "$value": "#1D4ED8"
      },
      "700": {
        "$type": "color",
        "$value": "#1E40AF"
      }
    },
    "slate": {
      "50": {
        "$type": "color",
        "$value": "#F8FAFC"
      },
      "200": {
        "$type": "color",
        "$value": "#E2E8F0"
      },
      "600": {
        "$type": "color",
        "$value": "#475569"
      },
      "900": {
        "$type": "color",
        "$value": "#0F172A"
      }
    },
    "red": {
      "600": {
        "$type": "color",
        "$value": "#DC2626"
      }
    },
    "green": {
      "600": {
        "$type": "color",
        "$value": "#16A34A"
      }
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "0px"
    },
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "7": {
      "$type": "dimension",
      "$value": "48px"
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": "4px"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "12px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "duration": {
    "fast": {
      "$type": "duration",
      "$value": "120ms"
    },
    "normal": {
      "$type": "duration",
      "$value": "200ms"
    }
  }
}

{
  "semantic": {
    "surface": {
      "primary": {
        "$type": "color",
        "$value": "{color.white}"
      },
      "subtle": {
        "$type": "color",
        "$value": "{color.slate.50}"
      },
      "inverse": {
        "$type": "color",
        "$value": "{color.slate.900}"
      }
    },
    "text": {
      "primary": {
        "$type": "color",
        "$value": "{color.slate.900}"
      },
      "secondary": {
        "$type": "color",
        "$value": "{color.slate.600}"
      },
      "inverse": {
        "$type": "color",
        "$value": "{color.white}"
      },
      "danger": {
        "$type": "color",
        "$value": "{color.red.600}"
      }
    },
    "border": {
      "default": {
        "$type": "color",
        "$value": "{color.slate.200}"
      },
      "danger": {
        "$type": "color",
        "$value": "{color.red.600}"
      }
    },
    "action": {
      "primary": {
        "background": {
          "$type": "color",
          "$value": "{color.blue.600}"
        },
        "backgroundHover": {
          "$type": "color",
          "$value": "{color.blue.700}"
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.white}"
        }
      }
    },
    "focus": {
      "ring": {
        "$type": "color",
        "$value": "{color.blue.500}"
      }
    },
    "feedback": {
      "error": {
        "$type": "color",
        "$value": "{color.red.600}"
      },
      "success": {
        "$type": "color",
        "$value": "{color.green.600}"
      }
    }
  }
}

{
  "size": {
    "control": {
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "40px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "48px"
      }
    },
    "icon": {
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "20px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "24px"
      }
    }
  }
}

{
  "typography": {
    "fontFamily": {
      "sans": {
        "$type": "fontFamily",
        "$value": "Inter, ui-sans-serif, system-ui, sans-serif"
      }
    },
    "fontSize": {
      "100": {
        "$type": "dimension",
        "$value": "12px"
      },
      "200": {
        "$type": "dimension",
        "$value": "14px"
      },
      "300": {
        "$type": "dimension",
        "$value": "16px"
      },
      "500": {
        "$type": "dimension",
        "$value": "24px"
      },
      "700": {
        "$type": "dimension",
        "$value": "36px"
      }
    },
    "lineHeight": {
      "tight": {
        "$type": "number",
        "$value": 1.2
      },
      "normal": {
        "$type": "number",
        "$value": 1.5
      }
    }
  }
}