Gumroad
Ecosystem Index
Loading
Amazon
Warm, playful pastels float on a clean, airy canvas, punctuated by bold, friendly typography.
Click any value to copy. Roles are suggestions, not gospel.
- #d6361aoklch(57.7% 0.200 32)Dominant
- #247b49oklch(51.9% 0.114 154)Surface
- #d4f4dcoklch(93.8% 0.046 153)Ink
- #9558a4oklch(55.9% 0.131 319)Accent
- #c8c1adoklch(81.1% 0.028 91)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Arial | 14px | 700 | 1.43 | 0 | Aa Bb Cc |
| body | Arial | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Arial | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 380px
:root {
--color-dominant: #d6361a;
--color-surface: #247b49;
--color-ink: #d4f4dc;
--color-accent: #9558a4;
--color-detail: #c8c1ad;
}
/* CSS variables exposed by source */
:root {
--__dChFn118uloew4B: #1c89e3;
--nav-search-scope-hover: #d4d4d4;
--__dChw-LmGofIsTxp: #ffce12;
--__SAR2l0N0101x: 2rem;
--__dChw-LQy8wPafIsw4B: #0f1111;
--__dChw-LmGoMXsw4B: #0f1111;
--__dChw-LwPaloeTxp: #1c89e3;
--__dChw-LwPafIsTxp: #888c8c;
--__dChFn1OGN7XAfIsw4B: #0f1111;
--__SAR2l0N01xdk: 1.75rem;
--__dChWb2ruQTxp: #0b7b3c;
--nav-search-labels: #fff;
--__dChw-LmGoloew4B: #0f1111;
--__dChFn1F-s7XAw4B: #565959;
--__dChotGmacPxT: rgba(15, 17, 17, 0.03);
--__SAR2l0zNyQzh: 0.75rem;
--__SAR2l0zNyzwb: 1rem;
--__P0nNOOCfBwIJ: -0.5rem;
--__dChw-LwPaMXsPxT: #ffffff;
--__dChiAX4M1Txp: #d14900;
--__dChw-LQy8wPaMXsTxp: #ffa41c;
--__dChiAX4M1PxT: #d14900;
--__dChw-LQy8wPafIsTxp: #ff8400;
--__dChw-LJBkMXsPxT: #303333;
--__dChw-LJBkMXsw4B: #ffffff;
--__dChFn118u7XAMXsPxT: #edf8ff;
--__dChFn1OGNfIsTxp: #a2a6a6;
--__TxpmBlgdu: 0.25rem;
--__dChw-LQy8wPaloew4B: #0f1111;
--__TxpmBlzO0oYu: 6.25rem;
--__dChFn1OGNloeTxp: #c8cccc;
--__dChF3jZRWPxT: rgba(255, 255, 255, 0.6);
--__dChw-LJBkfIsw4B: #ffffff;
--__TxpmBlNh5oYu: 6.25rem;
--__SAR2l0N01Tqs: 2.75rem;
--__dChWb2S9kw4B: #ffb14a;
--__dChw-LmGoloePxT: #f8bd19;
--__dChF3jyXrfIsw4B: #0f1111;
--__dChw-LQy8W2GMXsTxp: #0064f9;
--__TxpmBlzO0Qzh: 0.125rem;
--__dChiAXW2Gw4B: #0f1111;
--__dChWb2ygDTxp: #c10015;
--__dChw-LQy8mGoMXsTxp: #ffd814;
--__dChF3j-WyPxT: #cc0c39;
--__TxpmBlNh5zO001x: 0.75rem;
--__dChF3j-Wyw4B: #cc0c39;
--__SAR00pN6j: Amazon Ember;
--__dChiAXwPaPxT: #565959;
--__dChFn1F-sPxT: #d5d9d9;
--__dChw-LwPaMXsTxp: #888c8c;
--__P0nsIy01x: 0.75rem;
--__dChF3jyXrw4B: #ff6200;
--__TxpmBlzO0Nh5gdu: 0.25rem;
--__dChw-LQy8mGoloeTxp: #f8bd19;
--__dChNmAwPaMXsTxp: #d5d9d9;
--__dChw-LwPafIsPxT: #f7fafa;
--__SARKyLzNyGGZ: 0.6875rem;
--__dChFn118ufIsTxp: #0a7cd1;
--__dChw-LQy8mGofIsTxp: #ffce12;
--__SAR2l0N01yuZ: 1.25rem;
}Drop-in prompt
Build a landing page in the visual style of Amazon.
Reference design system (extracted from the live site):
- Palette: #d6361a, #247b49, #d4f4dc, #9558a4, #c8c1ad
- Typefaces: Arial
- 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/amazon-com
