figma-tokens

figma-tokens.json

{
  "spacing": {
    "xs": 4,
    "sm": 8,
    "md": 16,
    "lg": 32,
    "xl": 96
  },
  "sizing": {
    "xs": 4,
    "sm": 8,
    "md": 16,
    "lg": 32,
    "xl": 96
  },
  "fontFamilies": {
    "heading": "Inter",
    "body": "Roboto"
  },
  "fontSizes": {
    "sm": 14,
    "md": 16,
    "lg": 18,
    "xl": 20,
    "xxl": 24,
    "xxxl": 28
  },
  "fontWeights": {
    "normal": "Regular",
    "bold": "Bold"
  },
  "borderRadius": {
    "sm": 4,
    "lg": 8,
    "xl": 16
  },
  "borderWidth": {
    "none": 0,
    "xs": 1,
    "sm": 2,
    "md": 4,
    "lg": 8
  },
  "lineHeights": {
    "sm": "110%",
    "md": "140%"
  },
  "letterSpacing": {
    "sm": "-5%",
    "md": "50%",
    "lg": "100%"
  },
  "boxShadow": {
    "light": {
      "value": {
        "x": 5,
        "y": 5,
        "spread": 3,
        "color": "rgba(0, 0, 0, 0.9)",
        "blur": 5
      }
    },
    "dark": {
      "value": {
        "x": 5,
        "y": 5,
        "spread": 3,
        "color": "rgba(0, 0, 0, 0.5)",
        "blur": 5
      }
    }
  },
  "opacity": {
    "sm": "10%",
    "md": "50%",
    "lg": "90%"
  },
  "paragraphSpacing": {
    "sm": 26,
    "md": 32
  },
  "colors": {
    "gray": {
      "100": "#f7fafc",
      "200": "#edf2f7",
      "300": "#e2e8f0",
      "400": "#cbd5e0",
      "500": "#a0aec0",
      "600": "#718096",
      "700": "#4a5568",
      "800": "#2d3748",
      "900": "#1a202c"
    },
    "red": {
      "100": "#fff5f5",
      "200": "#fed7d7",
      "300": "#feb2b2",
      "400": "#fc8181",
      "500": "#f56565",
      "600": "#e53e3e",
      "700": "#c53030",
      "800": "#9b2c2c",
      "900": "#742a2a"
    },
    "orange": {
      "100": "#fffaf0",
      "200": "#feebc8",
      "300": "#fbd38d",
      "400": "#f6ad55",
      "500": "#ed8936",
      "600": "#dd6b20",
      "700": "#c05621",
      "800": "#9c4221",
      "900": "#7b341e"
    },
    "yellow": {
      "100": "#fffff0",
      "200": "#fefcbf",
      "300": "#faf089",
      "400": "#f6e05e",
      "500": "#ecc94b",
      "600": "#d69e2e",
      "700": "#b7791f",
      "800": "#975a16",
      "900": "#744210"
    },
    "green": {
      "100": "#f0fff4",
      "200": "#c6f6d5",
      "300": "#9ae6b4",
      "400": "#68d391",
      "500": "#48bb78",
      "600": "#38a169",
      "700": "#2f855a",
      "800": "#276749",
      "900": "#22543d"
    },
    "teal": {
      "100": "#e6fffa",
      "200": "#b2f5ea",
      "300": "#81e6d9",
      "400": "#4fd1c5",
      "500": "#38b2ac",
      "600": "#319795",
      "700": "#2c7a7b",
      "800": "#285e61",
      "900": "#234e52"
    },
    "blue": {
      "100": "#ebf8ff",
      "200": "#bee3f8",
      "300": "#90cdf4",
      "400": "#63b3ed",
      "500": "#4299e1",
      "600": "#3182ce",
      "700": "#2b6cb0",
      "800": "#2c5282",
      "900": "#2a4365"
    },
    "indigo": {
      "100": "#ebf4ff",
      "200": "#c3dafe",
      "300": "#a3bffa",
      "400": "#7f9cf5",
      "500": "#667eea",
      "600": "#5a67d8",
      "700": "#4c51bf",
      "800": "#434190",
      "900": "#3c366b"
    },
    "purple": {
      "100": "#faf5ff",
      "200": "#e9d8fd",
      "300": "#d6bcfa",
      "400": "#b794f4",
      "500": "#9f7aea",
      "600": "#805ad5",
      "700": "#6b46c1",
      "800": "#553c9a",
      "900": "#44337a"
    },
    "pink": {
      "100": "#fff5f7",
      "200": "#fed7e2",
      "300": "#fbb6ce",
      "400": "#f687b3",
      "500": "#ed64a6",
      "600": "#d53f8c",
      "700": "#b83280",
      "800": "#97266d",
      "900": "#702459"
    },
    "white": "#ffffff",
    "black": "#000000",
    "brand": "$colors.blue.500"
  },
  "typography": {
    "Text": {
      "body": {
        "fontFamily": "$fontFamilies.heading",
        "fontWeight": "$fontWeights.bold",
        "lineHeight": "$lineHeights.sm",
        "fontSize": "$fontSizes.sm",
        "letterSpacing": "$letterSpacing.sm"
      },
      "quote": {
        "fontFamily": "$fontFamilies.heading",
        "fontWeight": "$fontWeights.regular",
        "lineHeight": "$lineHeights.sm",
        "fontSize": "$fontSizes.md",
        "letterSpacing": "$letterSpacing.sm"
      }
    },
    "Heading": {
      "H1": {
        "fontFamily": "$fontFamilies.heading",
        "fontWeight": "$fontWeights.headingBold",
        "lineHeight": "$lineHeights.sm",
        "fontSize": "$fontSizes.xxxl",
        "letterSpacing": "$letterSpacing.sm"
      },
      "H2": {
        "fontFamily": "$fontFamilies.heading",
        "fontWeight": "$fontWeights.regular",
        "lineHeight": "$lineHeights.sm",
        "fontSize": "$fontSizes.xxl",
        "letterSpacing": "$letterSpacing.sm"
      },
      "H3": {
        "fontFamily": "$fontFamilies.heading",
        "fontWeight": "$fontWeights.regular",
        "lineHeight": "$lineHeights.sm",
        "fontSize": "$fontSizes.xl",
        "letterSpacing": "$letterSpacing.sm"
      }
    }
  }
}