Alloy
Feature Stack
Loading
Trello
Cool, spacious digital canvas: clean sans-serif, muted blues and warm accents.
Click any value to copy. Roles are suggestions, not gospel.
- #fa9c11oklch(77.1% 0.167 67)Dominant
- #174cacoklch(44.4% 0.164 261)Surface
- #f4cc6coklch(86.1% 0.123 87)Ink
- #4b638doklch(49.9% 0.074 261)Accent
- #bfc8d5oklch(83.0% 0.021 257)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Charlie Display | 48px | 500 | 1.25 | 0 | Aa Bb Cc |
| h2 | Charlie Text | 16px | 500 | 1.33 | 0 | Aa Bb Cc |
| h3 | Charlie Display | 24px | 500 | 1.33 | 0 | Aa Bb Cc |
| body | Charlie Text | 20px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Charlie Text | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fa9c11;
--color-surface: #174cac;
--color-ink: #f4cc6c;
--color-accent: #4b638d;
--color-detail: #bfc8d5;
}
/* CSS variables exposed by source */
:root {
--color-R500-rgb: 138,34,53;
--color-P400-rgb: 103,36,178;
--color-R100-rgb: 255,143,153;
--color-B300-rgb: 0,101,255;
--color-N30-rgb: 235,236,250;
--color-P500-rgb: 77,36,133;
--color-N60-rgb: 179,186,197;
--color-R400-rgb: 191,38,62;
--color-G300-rgb: 54,179,126;
--color-N20-rgb: 244,245,247;
--color-N500-rgb: 22,43,77;
--color-B100-rgb: 76,154,255;
--color-O200-rgb: 255,139,0;
--color-O75-rgb: 254,217,181;
--color-G50-rgb: 227,252,239;
--color-P200-rgb: 153,76,255;
--color-B400-rgb: 0,82,204;
--color-R75-rgb: 255,196,200;
--color-P300-rgb: 131,36,229;
--color-O50-rgb: 255,241,224;
--color-B200-rgb: 38,132,255;
--color-O300-rgb: 237,106,0;
--color-Y75-rgb: 255,240,179;
--color-G100-rgb: 121,242,192;
--color-T75-rgb: 180,244,252;
--color-G400-rgb: 0,135,90;
--color-Y300-rgb: 243,147,0;
--color-N10-rgb: 250,251,252;
--color-N400-rgb: 37,56,88;
--color-M300-rgb: 214,38,136;
--color-T400-rgb: 0,128,153;
--color-R200-rgb: 255,82,100;
--color-T300-rgb: 0,163,191;
--color-P50-rgb: 244,237,255;
--color-T200-rgb: 0,199,229;
--color-N800-rgb: 5,16,34;
--color-Y100-rgb: 255,196,0;
--color-N700-rgb: 7,22,48;
--color-B75-rgb: 178,212,255;
--color-O400-rgb: 202,74,0;
--color-T50-rgb: 227,253,255;
--color-Y500-rgb: 164,86,0;
--color-G200-rgb: 87,217,163;
--color-B50-rgb: 222,235,255;
--color-M500-rgb: 134,36,67;
--color-P75-rgb: 223,196,255;
--color-Y400-rgb: 216,115,0;
--color-N80-rgb: 107,119,140;
--color-Y50-rgb: 255,250,230;
--color-M100-rgb: 249,156,219;
--color-O500-rgb: 153,55,0;
--color-trelloblue-rgb: 0,121,191;
--color-N90-rgb: 94,108,132;
--color-R50-rgb: 255,237,238;
--color-O100-rgb: 255,171,0;
--color-N200-rgb: 52,69,99;
--color-N0-rgb: 255,255,255;
--color-N600-rgb: 9,30,66;
--color-M400-rgb: 178,40,101;
--color-M75-rgb: 252,198,235;
}Drop-in prompt
Build a landing page in the visual style of Trello.
Reference design system (extracted from the live site):
- Palette: #fa9c11, #174cac, #f4cc6c, #4b638d, #bfc8d5
- Typefaces: Charlie Display, Charlie Text
- Macrostructure: Feature Stack
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/trello-com
