Azure Microsoft
Marquee Hero
Loading
Patch — About
Cool, clinical gray scales and stark, assertive sans-serifs create a powerfully grounded, data-driven feel.
Click any value to copy. Roles are suggestions, not gospel.
- #ec703coklch(68.4% 0.167 42)Dominant
- #203748oklch(32.6% 0.042 242)Surface
- #ec8c5coklch(73.2% 0.133 47)Ink
- #7d7e7doklch(59.2% 0.002 146)Accent
- #b4c4c4oklch(80.8% 0.018 197)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Muoto | 136px | 300 | 1 | -2.72px | Aa Bb Cc |
| h2 | Muoto | 34px | 300 | 1.2 | -0.68px | Aa Bb Cc |
| h3 | Muoto | 21px | 300 | 1 | -0.425px | Aa Bb Cc |
| body | Muoto | 17px | 300 | 1.5 | 0 | Aa Bb Cc |
| button | Muoto | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ec703c;
--color-surface: #203748;
--color-ink: #ec8c5c;
--color-accent: #7d7e7d;
--color-detail: #b4c4c4;
}
/* CSS variables exposed by source */
:root {
--periwinkle: #8e9ef5;
--yellow: #f8e00c;
--taupe-400: #bfb6a3;
--slate: #282b24;
--beige: #f2efe6;
--green: #2f4000;
--slate-lighter-03: #f7f7f7;
--fs-list-renderindex: 0;
--royal-blue: #435ad6;
--orange-1000: #521900;
--black: #161814;
--taupe: #675f4d;
--blue: #6cc3ff;
--white: white;
--orange-200: #ffefe8;
--slate-lighter-01: #747672;
--off-white: #f7f7f2;
--slate-lighter-02: #dbdbdb;
--orange: #ea642b;
--taupe900: #5c5443;
}Drop-in prompt
Build a landing page in the visual style of Patch — About.
Reference design system (extracted from the live site):
- Palette: #ec703c, #203748, #ec8c5c, #7d7e7d, #b4c4c4
- Typefaces: Muoto
- Macrostructure: Marquee Hero
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/patch-io--about
