design-spec.tokens.json

{
    "colors": {
        "primary": {
            "$type": "color",
            "$value": "#FF4785"
        },
        "secondary": {
            "$type": "color",
            "$value": "#1EA7FD"
        },
        "positive": {
            "$type": "color",
            "$value": "#448028"
        },
        "negative": {
            "$type": "color",
            "$value": "#D43900"
        },
        "grayscale": {
            "$type": "color",
            "000": {
                "$value": "#FFFFFF"
            },
            "010": {
                "$value": "#F8F8F8"
            },
            "020": {
                "$value": "#F3F3F3"
            },
            "030": {
                "$value": "#EEEEEE"
            },
            "040": {
                "$value": "#DDDDDD"
            },
            "050": {
                "$value": "#999999"
            },
            "060": {
                "$value": "#FFFFFF"
            },
            "070": {
                "$value": "#666666"
            },
            "080": {
                "$value": "#444444"
            },
            "090": {
                "$value": "#333333"
            },
            "100": {
                "$value": "#000000"
            }
        }
    },
    "typography": {
        "families": {
            "$type": "fontFamily",
            "primary": {
                "$value": ["\"Nunito Sans\"", "\"Helvetica Neue\"", "Helvetica", "Arial", "sans-serif"]
            },
            "code": {
                "$value": ["\"SFMono-Regular\"", "Consolas", "\"Liberation Mono\"", "Menlo", "Courier", "monospace"]
            }
        },
        "sizes": {
            "$type": "dimension",
            "s1": {
                "$value": "12px"
            },
            "s2": {
                "$value": "14px"
            },
            "s3": {
                "$value": "16px"
            },
            "m1": {
                "$value": "20px"
            },
            "m2": {
                "$value": "24px"
            },
            "m3": {
                "$value": "28px"
            },
            "l1": {
                "$value": "32px"
            },
            "l2": {
                "$value": "40px"
            },
            "l3": {
                "$value": "48px"
            } 
        },
        "weights": {
            "$type": "fontWeight",
            "regular": {
                "$value": "400"
            },
            "bold": {
                "$value": "700"
            },
            "extrabold": {
                "$value": "800"
            },
            "black": {
                "$value": "900"
            }
        }
    }
}