Lookback
Feature Stack
Loading
Amie So — Docs
Deep indigo expanse, crisp sans-serif clarity, spacious and focused digital canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #14a4fcoklch(69.3% 0.168 244)Dominant
- #d6950eoklch(71.6% 0.147 77)Surface
- #84d1fboklch(82.6% 0.096 234)Ink
- #946c5coklch(56.8% 0.057 43)Accent
- #cccee1oklch(85.6% 0.026 281)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Inter var | 20px | 700 | 1.3 | 0 | Aa Bb Cc |
| h3 | Inter | 20px | 600 | 1.4 | -0.003px | Aa Bb Cc |
| body | Inter var | 16px | 400 | 1.75 | -0.003px | Aa Bb Cc |
| caption | Inter | 14px | 500 | 1 | 0 | Aa Bb Cc |
| button | Inter | 14px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #14a4fc;
--color-surface: #d6950e;
--color-ink: #84d1fb;
--color-accent: #946c5c;
--color-detail: #cccee1;
}
/* CSS variables exposed by source */
:root {
--color-fuchsia-700: 146,75,157;
--color-purple-200: 217,185,255;
--color-gray-885: 25,25,25;
--color-orange-200: 255,194,153;
--color-amber-400: 247,177,60;
--color-indigo-300: 161,163,247;
--color-indigo-400: 130,133,244;
--color-cyan-400: 56,197,221;
--color-cyan-300: 106,211,229;
--color-rose-200: 255,170,191;
--color-yellow-600: 195,145,19;
--color-pink-500: 255,50,154;
--color-orange-600: 203,94,19;
--color-purple-500: 160,80,255;
--color-violet-600: 126,92,204;
--color-red-900: 90,58,60;
--color-orange-800: 117,72,42;
--color-pink-300: 255,132,195;
--color-teal-400: 67,198,184;
--color-blue-700: 44,118,160;
--color-amber-600: 198,134,28;
--color-yellow-800: 113,92,40;
--color-pink-400: 255,91,175;
--color-purple-800: 102,78,131;
--color-orange-900: 83,60,45;
--color-green-100: 204,244,218;
--color-separator: 0,0,0;
--color-red-200: 254,170,176;
--color-blue-300: 112,203,255;
--color-indigo-800: 85,86,127;
--color-cyan-700: 32,117,132;
--color-gray-300: 175,175,175;
--color-gray-550: 104,104,104;
--color-yellow-400: 246,191,51;
--color-purple-900: 82,70,97;
--color-violet-900: 80,73,96;
--color-cyan-200: 155,226,238;
--color-amber-300: 249,197,109;
--color-gray-500: 115,115,115;
--color-pink-800: 126,65,96;
--color-teal-800: 39,88,83;
--color-green-500: 1,202,69;
--color-gray-50: 250,250,250;
--color-violet-400: 162,125,248;
--color-lime-600: 113,165,33;
--color-gray-740: 49,49,49;
--color-pink-900: 92,61,77;
--color-purple-100: 236,220,255;
--color-red-400: 253,85,97;
--color-white: 255,255,255;
--color-gray-400: 145,145,145;
--color-blue-400: 65,186,255;
--color-accent: 253,43,56;
--color-lime-300: 181,224,115;
--color-teal-600: 30,148,135;
--color-yellow-300: 248,207,102;
--color-rose-100: 255,213,223;
--color-fuchsia-800: 115,72,122;
--color-gray-100: 235,235,235;
--color-red-800: 124,61,66;
}Drop-in prompt
Build a landing page in the visual style of Amie So — Docs.
Reference design system (extracted from the live site):
- Palette: #14a4fc, #d6950e, #84d1fb, #946c5c, #cccee1
- Typefaces: Inter var, Inter
- 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/amie-so--documentation
