Get Plugin

Layout

Test and refine color combinations with APCA-based metrics for accessible, high-contrast designs

Layout

Responsive layout

We would use this Type setting in Text Styles, also consider for consistency purposes using Generic Sizes

{
"variables": {
"Layout/Mobile/Wrapper/Min_Width": {
"type": "number",
"value": 320,
"description": "Minimum width for mobile wrapper"
},
"Layout/Mobile/Wrapper/Max_Width": {
"type": "number",
"value": 868,
"description": "Maximum width for mobile wrapper"
},
"Layout/Mobile/Wrapper/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for mobile wrapper"
},
"Layout/Mobile/Wrapper/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for mobile wrapper"
},
"Layout/Mobile/Section/Min_Width": {
"type": "number",
"value": 96,
"description": "Minimum width for mobile section (1/3 of wrapper minus gap)"
},
"Layout/Mobile/Section/Max_Width": {
"type": "number",
"value": 720,
"description": "Maximum width for mobile section"
},
"Layout/Mobile/Section/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for mobile section"
},
"Layout/Mobile/Section/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for mobile section"
},
"Layout/Mobile/Block/Min_Width": {
"type": "number",
"value": 29,
"description": "Minimum width for mobile block (1/3 of section minus gap)"
},
"Layout/Mobile/Block/Max_Width": {
"type": "number",
"value": 680,
"description": "Maximum width for mobile block"
},
"Layout/Mobile/Block/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for mobile block"
},
"Layout/Mobile/Block/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for mobile block"
},
"Layout/Mobile/Subblock/Min_Width": {
"type": "number",
"value": 8,
"description": "Minimum width for mobile subblock (1/3 of block minus gap)"
},
"Layout/Mobile/Subblock/Max_Width": {
"type": "number",
"value": 640,
"description": "Maximum width for mobile subblock"
},
"Layout/Mobile/Subblock/Padding": {
"type": "number",
"value": "Sizes/1",
"description": "Padding for mobile subblock"
},
"Layout/Mobile/Subblock/Gap": {
"type": "number",
"value": "Sizes/1",
"description": "Gap for mobile subblock"
},
"Layout/Tablet/Wrapper/Min_Width": {
"type": "number",
"value": 769,
"description": "Minimum width for tablet wrapper"
},
"Layout/Tablet/Wrapper/Max_Width": {
"type": "number",
"value": 1024,
"description": "Maximum width for tablet wrapper"
},
"Layout/Tablet/Wrapper/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for tablet wrapper"
},
"Layout/Tablet/Wrapper/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for tablet wrapper"
},
"Layout/Tablet/Section/Min_Width": {
"type": "number",
"value": 243,
"description": "Minimum width for tablet section (1/3 of wrapper minus gap)"
},
"Layout/Tablet/Section/Max_Width": {
"type": "number",
"value": 960,
"description": "Maximum width for tablet section"
},
"Layout/Tablet/Section/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for tablet section"
},
"Layout/Tablet/Section/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for tablet section"
},
"Layout/Tablet/Block/Min_Width": {
"type": "number",
"value": 75,
"description": "Minimum width for tablet block (1/3 of section minus gap)"
},
"Layout/Tablet/Block/Max_Width": {
"type": "number",
"value": 900,
"description": "Maximum width for tablet block"
},
"Layout/Tablet/Block/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for tablet block"
},
"Layout/Tablet/Block/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for tablet block"
},
"Layout/Tablet/Subblock/Min_Width": {
"type": "number",
"value": 22,
"description": "Minimum width for tablet subblock (1/3 of block minus gap)"
},
"Layout/Tablet/Subblock/Max_Width": {
"type": "number",
"value": 800,
"description": "Maximum width for tablet subblock"
},
"Layout/Tablet/Subblock/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for tablet subblock"
},
"Layout/Tablet/Subblock/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for tablet subblock"
},
"Layout/Desktop/Wrapper/Min_Width": {
"type": "number",
"value": 1025,
"description": "Minimum width for desktop wrapper"
},
"Layout/Desktop/Wrapper/Max_Width": {
"type": "number",
"value": 1440,
"description": "Maximum width for desktop wrapper"
},
"Layout/Desktop/Wrapper/Padding": {
"type": "number",
"value": "Sizes/6",
"description": "Padding for desktop wrapper"
},
"Layout/Desktop/Wrapper/Gap": {
"type": "number",
"value": "Sizes/6",
"description": "Gap for desktop wrapper"
},
"Layout/Desktop/Section/Min_Width": {
"type": "number",
"value": 468,
"description": "Minimum width for desktop section (1/3 of wrapper minus gap)"
},
"Layout/Desktop/Section/Max_Width": {
"type": "number",
"value": 1320,
"description": "Maximum width for desktop section"
},
"Layout/Desktop/Section/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for desktop section"
},
"Layout/Desktop/Section/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for desktop section"
},
"Layout/Desktop/Block/Min_Width": {
"type": "number",
"value": 151,
"description": "Minimum width for desktop block (1/3 of section minus gap)"
},
"Layout/Desktop/Block/Max_Width": {
"type": "number",
"value": 1200,
"description": "Maximum width for desktop block"
},
"Layout/Desktop/Block/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for desktop block"
},
"Layout/Desktop/Block/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for desktop block"
},
"Layout/Desktop/Subblock/Min_Width": {
"type": "number",
"value": 47,
"description": "Minimum width for desktop subblock (1/3 of block minus gap)"
},
"Layout/Desktop/Subblock/Max_Width": {
"type": "number",
"value": 1000,
"description": "Maximum width for desktop subblock"
},
"Layout/Desktop/Subblock/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for desktop subblock"
},
"Layout/Desktop/Subblock/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for desktop subblock"
}
}
}

using Tesla value for min max

using Tesla value for min max

{
"variables": {
"Layout/Mobile/Wrapper/Min_Width": {
"type": "number",
"value": 320,
"description": "Minimum width for mobile wrapper"
},
"Layout/Mobile/Wrapper/Max_Width": {
"type": "number",
"value": "Sizes/3x/8",
"description": "Maximum width for mobile wrapper (868px)"
},
"Layout/Mobile/Wrapper/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for mobile wrapper"
},
"Layout/Mobile/Wrapper/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for mobile wrapper"
},
"Layout/Mobile/Section/Min_Width": {
"type": "number",
"value": "Sizes/3x/9",
"description": "Minimum width for mobile section (96px)"
},
"Layout/Mobile/Section/Max_Width": {
"type": "number",
"value": "Sizes/3x/7",
"description": "Maximum width for mobile section (720px)"
},
"Layout/Mobile/Section/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for mobile section"
},
"Layout/Mobile/Section/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for mobile section"
},
"Layout/Mobile/Block/Min_Width": {
"type": "number",
"value": "Sizes/3",
"description": "Minimum width for mobile block (29px)"
},
"Layout/Mobile/Block/Max_Width": {
"type": "number",
"value": "Sizes/2x/12",
"description": "Maximum width for mobile block (680px)"
},
"Layout/Mobile/Block/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for mobile block"
},
"Layout/Mobile/Block/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for mobile block"
},
"Layout/Mobile/Subblock/Min_Width": {
"type": "number",
"value": "Sizes/1",
"description": "Minimum width for mobile subblock (8px)"
},
"Layout/Mobile/Subblock/Max_Width": {
"type": "number",
"value": "Sizes/3x/8",
"description": "Maximum width for mobile subblock (640px)"
},
"Layout/Mobile/Subblock/Padding": {
"type": "number",
"value": "Sizes/1",
"description": "Padding for mobile subblock"
},
"Layout/Mobile/Subblock/Gap": {
"type": "number",
"value": "Sizes/1",
"description": "Gap for mobile subblock"
},
"Layout/Tablet/Wrapper/Min_Width": {
"type": "number",
"value": 769,
"description": "Minimum width for tablet wrapper"
},
"Layout/Tablet/Wrapper/Max_Width": {
"type": "number",
"value": "Sizes/3x/9",
"description": "Maximum width for tablet wrapper (1024px)"
},
"Layout/Tablet/Wrapper/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for tablet wrapper"
},
"Layout/Tablet/Wrapper/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for tablet wrapper"
},
"Layout/Tablet/Section/Min_Width": {
"type": "number",
"value": "Sizes/3x/10",
"description": "Minimum width for tablet section (243px)"
},
"Layout/Tablet/Section/Max_Width": {
"type": "number",
"value": "Sizes/3x/8",
"description": "Maximum width for tablet section (960px)"
},
"Layout/Tablet/Section/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for tablet section"
},
"Layout/Tablet/Section/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for tablet section"
},
"Layout/Tablet/Block/Min_Width": {
"type": "number",
"value": "Sizes/8",
"description": "Minimum width for tablet block (75px)"
},
"Layout/Tablet/Block/Max_Width": {
"type": "number",
"value": "Sizes/3x/9",
"description": "Maximum width for tablet block (900px)"
},
"Layout/Tablet/Block/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for tablet block"
},
"Layout/Tablet/Block/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for tablet block"
},
"Layout/Tablet/Subblock/Min_Width": {
"type": "number",
"value": "Sizes/2",
"description": "Minimum width for tablet subblock (22px)"
},
"Layout/Tablet/Subblock/Max_Width": {
"type": "number",
"value": "Sizes/2x/12",
"description": "Maximum width for tablet subblock (800px)"
},
"Layout/Tablet/Subblock/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for tablet subblock"
},
"Layout/Tablet/Subblock/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for tablet subblock"
},
"Layout/Desktop/Wrapper/Min_Width": {
"type": "number",
"value": 1025,
"description": "Minimum width for desktop wrapper"
},
"Layout/Desktop/Wrapper/Max_Width": {
"type": "number",
"value": "Sizes/3x/12",
"description": "Maximum width for desktop wrapper (1440px)"
},
"Layout/Desktop/Wrapper/Padding": {
"type": "number",
"value": "Sizes/6",
"description": "Padding for desktop wrapper"
},
"Layout/Desktop/Wrapper/Gap": {
"type": "number",
"value": "Sizes/6",
"description": "Gap for desktop wrapper"
},
"Layout/Desktop/Section/Min_Width": {
"type": "number",
"value": "Sizes/3x/11",
"description": "Minimum width for desktop section (468px)"
},
"Layout/Desktop/Section/Max_Width": {
"type": "number",
"value": "Sizes/2x/13",
"description": "Maximum width for desktop section (1320px)"
},
"Layout/Desktop/Section/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for desktop section"
},
"Layout/Desktop/Section/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for desktop section"
},
"Layout/Desktop/Block/Min_Width": {
"type": "number",
"value": "Sizes/11",
"description": "Minimum width for desktop block (151px)"
},
"Layout/Desktop/Block/Max_Width": {
"type": "number",
"value": "Sizes/3x/12",
"description": "Maximum width for desktop block (1200px)"
},
"Layout/Desktop/Block/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for desktop block"
},
"Layout/Desktop/Block/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for desktop block"
},
"Layout/Desktop/Subblock/Min_Width": {
"type": "number",
"value": "Sizes/5",
"description": "Minimum width for desktop subblock (47px)"
},
"Layout/Desktop/Subblock/Max_Width": {
"type": "number",
"value": "Sizes/3x/13",
"description": "Maximum width for desktop subblock (1000px)"
},
"Layout/Desktop/Subblock/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for desktop subblock"
},
"Layout/Desktop/Subblock/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for desktop subblock"
}
}
}

Written by Narek Ch