Sizes Setting
Test and refine color combinations with APCA-based metrics for accessible, high-contrast designs
Sizes (var)
Generic Scheme is the main sizes that we would use everywhere in our design system to be consistent, by default it is using Tesla scheme
but if you want you can experiment with Material Design Fibonacci or other size metrics
{
"variables": {
"Shcema/Sizes/Tesla/1": {
"type": "number",
"value": 3,
"description": "Numeric variable for Shcema/Sizes/Tesla/1"
},
"Shcema/Sizes/Tesla/2": {
"type": "number",
"value": 6,
"description": "Numeric variable for Shcema/Sizes/Tesla/2"
},
"Shcema/Sizes/Tesla/3": {
"type": "number",
"value": 9,
"description": "Numeric variable for Shcema/Sizes/Tesla/3"
},
"Shcema/Sizes/Tesla/4": {
"type": "number",
"value": 15,
"description": "Numeric variable for Shcema/Sizes/Tesla/4"
},
"Shcema/Sizes/Tesla/2x/2": {
"type": "number",
"value": 12,
"description": "Double of Shcema/Sizes/Tesla/2"
},
"Shcema/Sizes/Tesla/3x/2": {
"type": "number",
"value": 18,
"description": "Triple of Shcema/Sizes/Tesla/2"
},
"Shcema/Sizes/Tesla/5": {
"type": "number",
"value": 18,
"description": "Numeric variable for Shcema/Sizes/Tesla/5"
},
"Shcema/Sizes/Tesla/3x/3": {
"type": "number",
"value": 27,
"description": "Triple of Shcema/Sizes/Tesla/3"
},
"Shcema/Sizes/Tesla/6": {
"type": "number",
"value": 27,
"description": "Numeric variable for Shcema/Sizes/Tesla/6"
},
"Shcema/Sizes/Tesla/2x/4": {
"type": "number",
"value": 30,
"description": "Double of Shcema/Sizes/Tesla/4"
},
"Shcema/Sizes/Tesla/3x/4": {
"type": "number",
"value": 45,
"description": "Triple of Shcema/Sizes/Tesla/4"
},
"Shcema/Sizes/Tesla/7": {
"type": "number",
"value": 36,
"description": "Numeric variable for Shcema/Sizes/Tesla/7"
},
"Shcema/Sizes/Tesla/3x/5": {
"type": "number",
"value": 54,
"description": "Triple of Shcema/Sizes/Tesla/5"
},
"Shcema/Sizes/Tesla/8": {
"type": "number",
"value": 54,
"description": "Numeric variable for Shcema/Sizes/Tesla/8"
},
"Shcema/Sizes/Tesla/3x/6": {
"type": "number",
"value": 81,
"description": "Triple of Shcema/Sizes/Tesla/6"
},
"Shcema/Sizes/Tesla/9": {
"type": "number",
"value": 72,
"description": "Numeric variable for Shcema/Sizes/Tesla/9"
},
"Shcema/Sizes/Tesla/2x/7": {
"type": "number",
"value": 72,
"description": "Double of Shcema/Sizes/Tesla/7"
},
"Shcema/Sizes/Tesla/3x/7": {
"type": "number",
"value": 108,
"description": "Triple of Shcema/Sizes/Tesla/7"
},
"Shcema/Sizes/Tesla/10": {
"type": "number",
"value": 81,
"description": "Numeric variable for Shcema/Sizes/Tesla/10"
},
"Shcema/Sizes/Tesla/2x/8": {
"type": "number",
"value": 108,
"description": "Double of Shcema/Sizes/Tesla/8"
},
"Shcema/Sizes/Tesla/3x/8": {
"type": "number",
"value": 162,
"description": "Triple of Shcema/Sizes/Tesla/8"
},
"Shcema/Sizes/Tesla/11": {
"type": "number",
"value": 108,
"description": "Numeric variable for Shcema/Sizes/Tesla/11"
},
"Shcema/Sizes/Tesla/2x/9": {
"type": "number",
"value": 144,
"description": "Double of Shcema/Sizes/Tesla/9"
},
"Shcema/Sizes/Tesla/3x/9": {
"type": "number",
"value": 216,
"description": "Triple of Shcema/Sizes/Tesla/9"
},
"Shcema/Sizes/Tesla/12": {
"type": "number",
"value": 216,
"description": "Numeric variable for Shcema/Sizes/Tesla/12"
},
"Shcema/Sizes/Tesla/2x/10": {
"type": "number",
"value": 162,
"description": "Double of Shcema/Sizes/Tesla/10"
},
"Shcema/Sizes/Tesla/3x/10": {
"type": "number",
"value": 243,
"description": "Triple of Shcema/Sizes/Tesla/10"
},
"Shcema/Sizes/Tesla/13": {
"type": "number",
"value": 324,
"description": "Numeric variable for Shcema/Sizes/Tesla/13"
},
"Shcema/Sizes/Tesla/2x/12": {
"type": "number",
"value": 432,
"description": "Double of Shcema/Sizes/Tesla/12"
},
"Shcema/Sizes/Tesla/3x/12": {
"type": "number",
"value": 648,
"description": "Triple of Shcema/Sizes/Tesla/12"
},
"Shcema/Sizes/Tesla/2x/13": {
"type": "number",
"value": 648,
"description": "Double of Shcema/Sizes/Tesla/13"
},
"Shcema/Sizes/Tesla/3x/13": {
"type": "number",
"value": 972,
"description": "Triple of Shcema/Sizes/Tesla/13"
}
}
}
Generic Sizes (var)
Generic Scheme is the main sizes that we would use everywhere in our design system to be consistent, by default it is using Tesla scheme
but if you want you can experiment with Material Design Fibonacci or other size metrics
{
"variables": {
"Sizes/1": {
"type": "number",
"value": "Shcema/Sizes/Tesla/1",
"description": "Alias for Shcema/Sizes/Tesla/1"
},
"Sizes/2": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2",
"description": "Alias for Shcema/Sizes/Tesla/2"
},
"Sizes/3": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3",
"description": "Alias for Shcema/Sizes/Tesla/3"
},
"Sizes/4": {
"type": "number",
"value": "Shcema/Sizes/Tesla/4",
"description": "Alias for Shcema/Sizes/Tesla/4"
},
"Sizes/2x/2": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/2",
"description": "Alias for Shcema/Sizes/Tesla/2x/2"
},
"Sizes/3x/2": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/2",
"description": "Alias for Shcema/Sizes/Tesla/3x/2"
},
"Sizes/5": {
"type": "number",
"value": "Shcema/Sizes/Tesla/5",
"description": "Alias for Shcema/Sizes/Tesla/5"
},
"Sizes/3x/3": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/3",
"description": "Alias for Shcema/Sizes/Tesla/3x/3"
},
"Sizes/6": {
"type": "number",
"value": "Shcema/Sizes/Tesla/6",
"description": "Alias for Shcema/Sizes/Tesla/6"
},
"Sizes/2x/4": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/4",
"description": "Alias for Shcema/Sizes/Tesla/2x/4"
},
"Sizes/3x/4": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/4",
"description": "Alias for Shcema/Sizes/Tesla/3x/4"
},
"Sizes/7": {
"type": "number",
"value": "Shcema/Sizes/Tesla/7",
"description": "Alias for Shcema/Sizes/Tesla/7"
},
"Sizes/3x/5": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/5",
"description": "Alias for Shcema/Sizes/Tesla/3x/5"
},
"Sizes/8": {
"type": "number",
"value": "Shcema/Sizes/Tesla/8",
"description": "Alias for Shcema/Sizes/Tesla/8"
},
"Sizes/3x/6": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/6",
"description": "Alias for Shcema/Sizes/Tesla/3x/6"
},
"Sizes/9": {
"type": "number",
"value": "Shcema/Sizes/Tesla/9",
"description": "Alias for Shcema/Sizes/Tesla/9"
},
"Sizes/2x/7": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/7",
"description": "Alias for Shcema/Sizes/Tesla/2x/7"
},
"Sizes/3x/7": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/7",
"description": "Alias for Shcema/Sizes/Tesla/3x/7"
},
"Sizes/10": {
"type": "number",
"value": "Shcema/Sizes/Tesla/10",
"description": "Alias for Shcema/Sizes/Tesla/10"
},
"Sizes/2x/8": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/8",
"description": "Alias for Shcema/Sizes/Tesla/2x/8"
},
"Sizes/3x/8": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/8",
"description": "Alias for Shcema/Sizes/Tesla/3x/8"
},
"Sizes/11": {
"type": "number",
"value": "Shcema/Sizes/Tesla/11",
"description": "Alias for Shcema/Sizes/Tesla/11"
},
"Sizes/2x/9": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/9",
"description": "Alias for Shcema/Sizes/Tesla/2x/9"
},
"Sizes/3x/9": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/9",
"description": "Alias for Shcema/Sizes/Tesla/3x/9"
},
"Sizes/12": {
"type": "number",
"value": "Shcema/Sizes/Tesla/12",
"description": "Alias for Shcema/Sizes/Tesla/12"
},
"Sizes/2x/10": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/10",
"description": "Alias for Shcema/Sizes/Tesla/2x/10"
},
"Sizes/3x/10": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/10",
"description": "Alias for Shcema/Sizes/Tesla/3x/10"
},
"Sizes/13": {
"type": "number",
"value": "Shcema/Sizes/Tesla/13",
"description": "Alias for Shcema/Sizes/Tesla/13"
},
"Sizes/2x/12": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/12",
"description": "Alias for Shcema/Sizes/Tesla/2x/12"
},
"Sizes/3x/12": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/12",
"description": "Alias for Shcema/Sizes/Tesla/3x/12"
},
"Sizes/2x/13": {
"type": "number",
"value": "Shcema/Sizes/Tesla/2x/13",
"description": "Alias for Shcema/Sizes/Tesla/2x/13"
},
"Sizes/3x/13": {
"type": "number",
"value": "Shcema/Sizes/Tesla/3x/13",
"description": "Alias for Shcema/Sizes/Tesla/3x/13"
}
}
}