Grafana
Split Studio
Clean, airy geometry—muted blues and warm terracotta, crisp sans-serif precision.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | wix-madefor-display-v2 | 83px | 400 | 1.2 | -1.65px | Aa Bb Cc |
| h2 | wix-madefor-text-v2 | 21px | 400 | 1.3 | 0 | Aa Bb Cc |
| h3 | wix-madefor-display-v2 | 54px | 400 | 1.1 | -1.08px | Aa Bb Cc |
| body | Arial | 10px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Madefor-Text | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2e4e84;
--color-surface: #884a30;
--color-ink: #d1e592;
--color-accent: #ac8753;
--color-detail: #d5ddbc;
}
/* CSS variables exposed by source */
:root {
--font_9: normal normal 500 calc(14 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.6em wix-madefor-text-v2,sans-serif;
--color_55: 194,194,194;
--color_43: 26,106,255;
--color_37: 0,0,0;
--color_12: 240,240,240;
--color_60: 255,255,255;
--color_25: 57,100,29;
--color_48: 26,106,255;
--color_21: 243,248,240;
--color_51: 26,106,255;
--color_50: 255,255,255;
--color_13: 194,194,194;
--color_10: 176,176,176;
--color_54: 194,194,194;
--color_20: 8,47,123;
--color_58: 26,106,255;
--color_65: 194,194,194;
--color_46: 110,110,110;
--color_2: 0,0,0;
--color_3: 237,28,36;
--color_41: 26,106,255;
--color_22: 210,228,199;
--color_30: 99,60,43;
--color_31: 255,233,223;
--color_23: 146,176,121;
--color_42: 26,106,255;
--font_7: normal normal 400 calc(18 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.3em wix-madefor-text-v2,sans-serif;
--font_6: normal normal normal calc(33 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.4em madefor-display-bold,helveticaneuew01-65medi,helveticaneuew02-65medi,helveticaneuew10-65medi,sans-serif;
--font_3: normal normal normal calc(57 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.3em madefor-display-bold,helveticaneuew01-65medi,helveticaneuew02-65medi,helveticaneuew10-65medi,sans-serif;
--font_4: normal normal normal calc(51 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.3em madefor-display-bold,helveticaneuew01-65medi,helveticaneuew02-65medi,helveticaneuew10-65medi,sans-serif;
--color_44: 26,106,255;
--color_56: 255,255,255;
--color_9: 114,114,114;
--color_27: 229,206,192;
--color_61: 26,106,255;
--color_33: 250,133,79;
--color_0: 255,255,255;
--color_62: 26,106,255;
--font_5: normal normal normal calc(42 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.3em madefor-display-bold,helveticaneuew01-65medi,helveticaneuew02-65medi,helveticaneuew10-65medi,sans-serif;
--font_8: normal normal 400 calc(24 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.6em wix-madefor-text-v2,sans-serif;
--color_39: 194,194,194;
--font_2: normal normal 400 calc(64 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.1em wix-madefor-display-v2,sans-serif;
--color_63: 255,255,255;
--color_4: 0,136,203;
--color_7: 176,176,176;
--color_52: 26,106,255;
--font_0: normal normal 400 calc(90 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.2em wix-madefor-display-v2,sans-serif;
--color_34: 234,96,32;
--color_47: 0,0,0;
--color_45: 0,0,0;
--color_59: 26,106,255;
--color_5: 255,203,5;
--color_1: 255,255,255;
--color_14: 110,110,110;
--font_10: normal normal normal 12px/1.4em din-next-w01-light,sans-serif;
--color_17: 149,185,255;
--color_40: 110,110,110;
--color_16: 220,232,255;
--color_24: 97,135,65;
--color_19: 9,75,204;
}Drop-in prompt
Build a landing page in the visual style of Wix.
Reference design system (extracted from the live site):
- Palette: #2e4e84, #884a30, #d1e592, #ac8753, #d5ddbc
- Typefaces: wix-madefor-display-v2, wix-madefor-text-v2, Arial
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/wix-com