@lucasmiqueias/blip-tokens/tokens/spacing.json

Design token system inspired by BLiP's design language

{
    "spacing": {
        "0": "0px",
        "0-5": "4px",
        "1": "8px",
        "2": "16px",
        "3": "24px",
        "4": "32px",
        "5": "40px",
        "6": "48px",
        "7": "56px",
        "8": "64px",
        "9": "72px",
        "10": "80px",
        "11": "88px",
        "12": "96px"
    },
    "radius": {
        "none": "0px",
        "sm": "2px",
        "base": "4px",
        "md": "6px",
        "lg": "8px",
        "xl": "12px",
        "2xl": "16px",
        "3xl": "24px",
        "full": "9999px"
    },
    "components": {
        "height": {
            "xs": "24px",
            "sm": "32px",
            "md": "40px",
            "lg": "48px",
            "xl": "56px"
        }
    },
    "icons": {
        "xs": "12px",
        "sm": "16px",
        "md": "20px",
        "lg": "24px",
        "xl": "32px",
        "2xl": "40px"
    },
    "containers": {
        "xs": "475px",
        "sm": "640px",
        "md": "768px",
        "lg": "1024px",
        "xl": "1280px",
        "2xl": "1536px"
    },
    "zIndex": {
        "auto": "auto",
        "0": 0,
        "10": 10,
        "20": 20,
        "30": 30,
        "40": 40,
        "50": 50,
        "dropdown": 1000,
        "sticky": 1020,
        "fixed": 1030,
        "modal-backdrop": 1040,
        "modal": 1050,
        "popover": 1060,
        "tooltip": 1070,
        "toast": 1080
    }
}