Claude
Ecosystem Index
Loading
Copilot Microsoft
Soft, glassy expanses of warm beige and muted lavender, with clean, friendly sans-serif type.
Click any value to copy. Roles are suggestions, not gospel.
- #4484dcoklch(61.4% 0.149 257)Dominant
- #143b6foklch(35.6% 0.100 257)Surface
- #dca4ccoklch(78.3% 0.084 337)Ink
- #50b0b0oklch(70.0% 0.090 195)Accent
- #d1c4aeoklch(82.5% 0.033 81)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Ginto | 28px | 600 | 1.14 | -0.28px | Aa Bb Cc |
| body | Ginto | 16px | 400 | 1.63 | 0 | Aa Bb Cc |
| button | Ginto | 16px | 400 | 1.63 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #4484dc;
--color-surface: #143b6f;
--color-ink: #dca4cc;
--color-accent: #50b0b0;
--color-detail: #d1c4ae;
}
/* CSS variables exposed by source */
:root {
--color-accent-static-800: 50 31 15;
--color-shadow-sm-ambient: transparent;
--color-stroke-static-450: 135 103 78;
--color-cobalt-600: 35 83 156;
--color-spot-red-350: 249 137 129;
--color-midnight-150: 241 245 255;
--color-cobalt-400: 97 146 223;
--color-slate-200: 229 235 250;
--color-spot-yellow-300: 243 195 87;
--color-stone-450: 116 109 104;
--color-background-static-750: 50 45 41;
--color-stone-550: 99 92 87;
--color-background-900: 20 17 14;
--color-spot-pink-400: 225 94 140;
--color-muted-150: 255 243 234;
--color-muted-static-350: 193 169 150;
--color-slate-450: 98 109 143;
--color-muted-static-600: 106 79 57;
--color-stroke-400: 168 140 118;
--color-stroke-450: 135 103 78;
--color-spot-blue-450: 15 146 198;
--color-muted-static-700: 73 54 38;
--color-cobalt-300: 166 201 255;
--color-stroke-800: 45 33 23;
--color-accent-static-400: 202 125 54;
--color-caramel-800: 50 31 15;
--color-spot-orange-300: 255 186 129;
--color-spot-red-550: 172 25 34;
--color-caramel-350: 226 156 97;
--color-midnight-450: 83 105 182;
--color-grayscale-450: 111 111 111;
--color-stroke-static-350: 193 169 150;
--color-stroke-static-250: 235 219 206;
--color-system-red-250: 255 210 205;
--color-background-static-850: 29 26 23;
--color-muted-850: 34 24 17;
--color-grayscale-300: 199 199 199;
--color-slate-300: 194 202 223;
--color-grayscale-550: 93 93 93;
--color-background-static-300: 207 201 197;
--color-stroke-static-650: 89 66 47;
--color-background-550: 99 92 87;
--color-cocoa-800: 45 33 23;
--color-stroke-700: 73 54 38;
--color-midnight-850: 21 26 40;
--color-stone-650: 76 70 66;
--color-accent-300: 248 188 140;
--color-spot-yellow-550: 119 88 2;
--color-accent-static-850: 36 24 13;
--color-shadow-sm-contour: rgba(0,0,0,.16);
--color-background-static-100: 255 251 248;
--color-system-red-350: 249 137 129;
--color-midnight-400: 121 143 212;
--color-cobalt-250: 203 223 255;
--color-stroke-850: 34 24 17;
--color-slate-400: 135 145 176;
--color-background-static-250: 226 221 217;
--color-stone-900: 20 17 14;
--color-accent-400: 202 125 54;
--color-spot-red-300: 255 181 174;
}Drop-in prompt
Build a landing page in the visual style of Copilot Microsoft.
Reference design system (extracted from the live site):
- Palette: #4484dc, #143b6f, #dca4cc, #50b0b0, #d1c4ae
- Typefaces: Ginto
- Macrostructure: Ecosystem Index
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/copilot-microsoft-com
