TypeScript Tokens

Preview

/**
 * Generated by UI Archive — ui-archive.com
 * Domain: instagram.com
 * Snapshot: 2026-11-15
 * Format: W3C DTCG compatible
 * Token names preserve original CSS variable names
 */

export const tokens = {
  "color": {
    "fds-black-alpha-05": "rgba(0, 0, 0, 0.05)",
    "fds-black-alpha-10": "rgba(0, 0, 0, 0.1)",
    "fds-black-alpha-15": "rgba(0, 0, 0, 0.15)",
    "fds-black-alpha-20": "rgba(0, 0, 0, 0.2)",
    "fds-black-alpha-30": "rgba(0, 0, 0, 0.3)",
    "fds-black-alpha-40": "rgba(0, 0, 0, 0.4)",
    "fds-black-alpha-50": "rgba(0, 0, 0, 0.5)",
    "fds-black-alpha-60": "rgba(0, 0, 0, 0.6)",
    "fds-black-alpha-80": "rgba(0, 0, 0, 0.8)",
    "fds-green-60": "#31A73B",
    "fds-white-alpha-05": "rgba(255, 255, 255, 0.05)",
    "fds-white-alpha-10": "rgba(255, 255, 255, 0.1)",
    "fds-white-alpha-20": "rgba(255, 255, 255, 0.2)",
    "fds-white-alpha-30": "rgba(255, 255, 255, 0.3)",
    "fds-white-alpha-40": "rgba(255, 255, 255, 0.4)",
    "fds-white-alpha-50": "rgba(255, 255, 255, 0.5)",
    "fds-white-alpha-60": "rgba(255, 255, 255, 0.6)",
    "fds-white-alpha-80": "rgba(255, 255, 255, 0.8)",
    "accent": "#F3F4F5",
    "always-black": "#000000",
    "always-dark-gradient": "linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))",
    "always-dark-overlay": "rgba(0, 0, 0, .4)",
    "always-gray-40": "#65676B",
    "always-gray-75": "#BCC0C4",
    "attachment-footer-background": "rgba(255, 255, 255, .1)"
  },
  "fontSize": {
    "optimistic-15px-500": "15px",
    "instagram-sans-regular-35-84px-400": "35.84px",
    "optimistic-17px-600": "17px"
…

All Tokens