🆕 Modern DSL (v2): SketchDSL v2 supports layout containers (
HStack, VStack, Grid), relative positioning (position: { below, rightOf, inside }), variables ($varName), and named styles. The hand-computed x/y values in the steps below still work, but the same diagram can be expressed more concisely. See the v2 power features reference, and the modernized version at the bottom of this tutorial.
What You'll Build
Infographics present data visually. You'll create a remote work statistics graphic with large numbers, icon cards, and clear hierarchy.
- Bold headline and hero statistic
- Icon-based stat cards
- Color-coded categories
- Source citation footer
Step 1: Create the Hero Statistic
1
Add Large Number Display
{
"id": "hero-stat",
"type": "text",
"x": 200, "y": 180, "w": 400, "h": 100,
"text": "74%",
"fontSize": 96,
"fontWeight": "bold",
"align": "center",
"options": { "stroke": "green.600" }
}
Step 2: Create Icon Stat Cards
2
Build Icon + Number Cards
// Card with icon and stat { "id": "stat-card", "type": "rectangle", "x": 80, "y": 350, "w": 160, "h": 120, "borderRadius": 12, "options": { "stroke": "blue.400", "fill": "blue.50", "fillStyle": "solid" } }, { "id": "stat-icon", "type": "text", "x": 80, "y": 370, "w": 160, "h": 35, "text": "💻", "fontSize": 32, "align": "center" }, { "id": "stat-num", "type": "text", "x": 80, "y": 405, "w": 160, "h": 25, "text": "3.7 days", "fontSize": 20, "fontWeight": "bold", "align": "center", "options": { "stroke": "blue.700" } }
Key Design Principles
- Visual hierarchy — Most important info is largest
- Limited colors — 3-4 colors maximum
- White space — Don't overcrowd
- Source citation — Credit your data
v2 Modernized Version
A full infographic: hero stat banner across the top, 6-cell stat Grid in the middle, a hand-built horizontal bar chart (rectangles sized by data), a speech-bubble quote, and a sources footer. Demonstrates Grid with separate x/y gap, named styles for tone (highlight vs neutral), and expression-driven bar widths so resizing the chart needs one variable edit.
{
"version": "2.0",
"canvas": { "width": 1200, "height": 1280, "background": "cream", "padding": 0 },
"theme": { "roughness": 1.3, "bowing": 1.0, "fillStyle": "hachure", "fontFamily": "Comic Sans MS" },
"vars": {
"cellW": 360, "cellH": 160,
"barFull": 700, "barH": 36
},
"styles": {
"hero": { "fill": "indigo.100", "stroke": "indigo.700", "strokeWidth": 3, "fillStyle": "hachure" },
"stat": { "fill": "blue.50", "stroke": "blue.500", "strokeWidth": 2, "fillStyle": "solid" },
"highlight": { "extends": "stat", "fill": "amber.100", "stroke": "amber.600" },
"negative": { "extends": "stat", "fill": "red.50", "stroke": "red.600" },
"bar-bg": { "fill": "slate.100", "stroke": "slate.500", "strokeWidth": 1, "fillStyle": "solid" },
"bar": { "fill": "indigo.400", "stroke": "indigo.700", "strokeWidth": 2, "fillStyle": "solid" },
"quote": { "fill": "amber.50", "stroke": "amber.700", "strokeWidth": 2, "fillStyle": "solid" }
},
"elements": [
{ "id": "title", "type": "text", "x": 0, "y": 30, "w": 1200, "h": 40, "text": "Remote Work in 2026", "fontSize": 32, "fontWeight": "bold", "align": "center" },
{ "id": "sub", "type": "text", "x": 0, "y": 76, "w": 1200, "h": 22, "text": "Annual survey · 1,200 knowledge workers · 14 countries · Q1 2026", "fontSize": 14, "align": "center" },
{ "id": "hero", "type": "rectangle", "style": "hero", "x": 60, "y": 130, "w": 1080, "h": 130, "borderRadius": 16 },
{ "id": "hero-n", "type": "text", "position": { "inside": "#hero", "align": "top-center", "padding": 18 }, "w": 1080, "h": 50, "text": "72% of knowledge workers are now remote-first", "fontSize": 28, "fontWeight": "bold", "align": "center" },
{ "id": "hero-s", "type": "text", "position": { "inside": "#hero", "align": "bottom-center", "padding": 14 }, "w": 1080, "h": 26, "text": "Up from 31% pre-pandemic. 89% say they would quit if forced back full-time.", "fontSize": 14, "align": "center" },
{ "type": "Grid", "x": 60, "y": 300, "columns": 3, "gap": { "x": 20, "y": 20 }, "width": 1140, "children": [
{ "id": "s1", "type": "rectangle", "style": "stat", "w": "$cellW", "h": "$cellH", "borderRadius": 12 },
{ "id": "s2", "type": "rectangle", "style": "highlight", "w": "$cellW", "h": "$cellH", "borderRadius": 12 },
{ "id": "s3", "type": "rectangle", "style": "stat", "w": "$cellW", "h": "$cellH", "borderRadius": 12 },
{ "id": "s4", "type": "rectangle", "style": "stat", "w": "$cellW", "h": "$cellH", "borderRadius": 12 },
{ "id": "s5", "type": "rectangle", "style": "highlight", "w": "$cellW", "h": "$cellH", "borderRadius": 12 },
{ "id": "s6", "type": "rectangle", "style": "negative", "w": "$cellW", "h": "$cellH", "borderRadius": 12 }
]},
{ "id": "s1-n", "type": "text", "position": { "inside": "#s1", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "3.1×", "fontSize": 48, "fontWeight": "bold", "align": "center" },
{ "id": "s1-l", "type": "text", "position": { "inside": "#s1", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "productivity vs. pre-pandemic baseline", "fontSize": 13, "align": "center" },
{ "id": "s2-n", "type": "text", "position": { "inside": "#s2", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "$11.4k", "fontSize": 44, "fontWeight": "bold", "align": "center" },
{ "id": "s2-l", "type": "text", "position": { "inside": "#s2", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "average annual savings (commute + lunch)", "fontSize": 13, "align": "center" },
{ "id": "s3-n", "type": "text", "position": { "inside": "#s3", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "4 hrs", "fontSize": 44, "fontWeight": "bold", "align": "center" },
{ "id": "s3-l", "type": "text", "position": { "inside": "#s3", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "of focused deep work per day (vs. 1.7h in-office)", "fontSize": 13, "align": "center" },
{ "id": "s4-n", "type": "text", "position": { "inside": "#s4", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "58%", "fontSize": 48, "fontWeight": "bold", "align": "center" },
{ "id": "s4-l", "type": "text", "position": { "inside": "#s4", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "moved further from major metro areas", "fontSize": 13, "align": "center" },
{ "id": "s5-n", "type": "text", "position": { "inside": "#s5", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "89%", "fontSize": 48, "fontWeight": "bold", "align": "center" },
{ "id": "s5-l", "type": "text", "position": { "inside": "#s5", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "report better work–life balance", "fontSize": 13, "align": "center" },
{ "id": "s6-n", "type": "text", "position": { "inside": "#s6", "align": "top-center", "padding": 18 }, "w": 360, "h": 54, "text": "32%", "fontSize": 48, "fontWeight": "bold", "align": "center" },
{ "id": "s6-l", "type": "text", "position": { "inside": "#s6", "align": "bottom-center", "padding": 14 }, "w": 360, "h": 38, "text": "struggle with loneliness or burnout", "fontSize": 13, "align": "center" },
{ "id": "chart-h", "type": "text", "x": 60, "y": 670, "w": 1080, "h": 26, "text": "Where the day goes (avg. self-reported hours)", "fontSize": 18, "fontWeight": "bold", "align": "left" },
{ "id": "row1-l", "type": "text", "x": 60, "y": 720, "w": 240, "h": 30, "text": "Deep work", "fontSize": 14, "align": "right", "fontWeight": "bold" },
{ "id": "row1-b", "type": "rectangle", "style": "bar-bg", "x": 320, "y": 720, "w": "$barFull", "h": "$barH", "borderRadius": 6 },
{ "id": "row1-f", "type": "rectangle", "style": "bar", "x": 320, "y": 720, "w": "=$barFull * 0.50", "h": "$barH", "borderRadius": 6 },
{ "id": "row1-n", "type": "text", "x": 1040, "y": 724, "w": 100, "h": 26, "text": "4.0 h", "fontSize": 14, "fontWeight": "bold" },
{ "id": "row2-l", "type": "text", "x": 60, "y": 770, "w": 240, "h": 30, "text": "Meetings", "fontSize": 14, "align": "right", "fontWeight": "bold" },
{ "id": "row2-b", "type": "rectangle", "style": "bar-bg", "x": 320, "y": 770, "w": "$barFull", "h": "$barH", "borderRadius": 6 },
{ "id": "row2-f", "type": "rectangle", "style": "bar", "x": 320, "y": 770, "w": "=$barFull * 0.28", "h": "$barH", "borderRadius": 6 },
{ "id": "row2-n", "type": "text", "x": 1040, "y": 774, "w": 100, "h": 26, "text": "2.2 h", "fontSize": 14, "fontWeight": "bold" },
{ "id": "row3-l", "type": "text", "x": 60, "y": 820, "w": 240, "h": 30, "text": "Async comms", "fontSize": 14, "align": "right", "fontWeight": "bold" },
{ "id": "row3-b", "type": "rectangle", "style": "bar-bg", "x": 320, "y": 820, "w": "$barFull", "h": "$barH", "borderRadius": 6 },
{ "id": "row3-f", "type": "rectangle", "style": "bar", "x": 320, "y": 820, "w": "=$barFull * 0.18", "h": "$barH", "borderRadius": 6 },
{ "id": "row3-n", "type": "text", "x": 1040, "y": 824, "w": 100, "h": 26, "text": "1.4 h", "fontSize": 14, "fontWeight": "bold" },
{ "id": "row4-l", "type": "text", "x": 60, "y": 870, "w": 240, "h": 30, "text": "Breaks / walks", "fontSize": 14, "align": "right", "fontWeight": "bold" },
{ "id": "row4-b", "type": "rectangle", "style": "bar-bg", "x": 320, "y": 870, "w": "$barFull", "h": "$barH", "borderRadius": 6 },
{ "id": "row4-f", "type": "rectangle", "style": "bar", "x": 320, "y": 870, "w": "=$barFull * 0.10", "h": "$barH", "borderRadius": 6 },
{ "id": "row4-n", "type": "text", "x": 1040, "y": 874, "w": 100, "h": 26, "text": "0.8 h", "fontSize": 14, "fontWeight": "bold" },
{ "id": "row5-l", "type": "text", "x": 60, "y": 920, "w": 240, "h": 30, "text": "Admin / email", "fontSize": 14, "align": "right", "fontWeight": "bold" },
{ "id": "row5-b", "type": "rectangle", "style": "bar-bg", "x": 320, "y": 920, "w": "$barFull", "h": "$barH", "borderRadius": 6 },
{ "id": "row5-f", "type": "rectangle", "style": "bar", "x": 320, "y": 920, "w": "=$barFull * 0.13", "h": "$barH", "borderRadius": 6 },
{ "id": "row5-n", "type": "text", "x": 1040, "y": 924, "w": 100, "h": 26, "text": "1.0 h", "fontSize": 14, "fontWeight": "bold" },
{ "id": "quote", "type": "speechBubble", "style": "quote", "x": 100, "y": 1000, "w": 1000, "h": 140, "pointerDirection": "bottom-left" },
{ "id": "quote-t", "type": "text", "position": { "inside": "#quote", "align": "center", "padding": 24 }, "w": 1000, "h": 88, "text": "\"My team ships faster, my doctor's appointments fit on my calendar, and I save four hours a week not commuting. The office made all of those impossible.\"\n— Senior engineer, fintech (Berlin)", "fontSize": 16, "fontStyle": "italic", "align": "center" },
{ "id": "src", "type": "text", "x": 60, "y": 1190, "w": 1080, "h": 22, "text": "Sources: PrivacyPix Remote Work Survey 2026 · n=1,200 · margin of error ±2.8% · methodology at privacypixtools.com/blog/remote-2026", "fontSize": 11, "align": "center" }
]
}
Showcase: hero banner + 3×2 stat Grid with 3 tone styles + 5-row bar chart driven by =$barFull * 0.50 expressions + speechBubble quote + sources line. Resize the chart by changing $barFull once; the rows reflow.