Minimal So
Index-First
Loading
Humaan | Websites & Apps | Award-Winning Digital Agency
Quiet, verdant expanse: clean, geometric forms on softly textured, pale earth.
Click any value to copy. Roles are suggestions, not gospel.
- #64ad51oklch(67.9% 0.147 139)Dominant
- #fcfcf4oklch(98.9% 0.011 107)Surface
- #2c4c24oklch(38.1% 0.075 140)Ink
- #54904coklch(59.5% 0.117 141)Accent
- #c4cabboklch(83.0% 0.022 125)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | neueMontreal | 130px | 500 | 0.92 | 0 | Aa Bb Cc |
| h2 | neueMontreal | 100px | 500 | 1 | 0 | Aa Bb Cc |
| h3 | neueMontreal | 20px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | neueMontreal | 15px | 500 | 1.15 | 0 | Aa Bb Cc |
| button | neueMontreal | 15px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #64ad51;
--color-surface: #fcfcf4;
--color-ink: #2c4c24;
--color-accent: #54904c;
--color-detail: #c4cabb;
}
/* CSS variables exposed by source */
:root {
--purple-primary: #b488f1;
--purple-primary-text: #5b16bb;
--tennis-secondary: #fff;
--header-height: 5.3125rem;
--blue-text: #070035b3;
--cyan-text: #1c3232b3;
--pink-primary: #fd589e;
--default-primary: #90f188;
--default-primary-text: #23bb16;
--theme-primary: #90f188;
--theme-secondary: #0f1d07;
--cyan-primary: #85efe3;
--tennis-primary-text: #7c7f52;
--default-tertiary: #f3f3e9;
--green-primary-text: #23bb16;
--blue-tertiary: #ebf8ff;
--xmas-secondary: #380000;
--pink-tertiary: #ffedf5;
--cyan-secondary: #1c3232;
--theme-logo: #0f1d07;
--default-text: #0f1d07b3;
--yellow-secondary: #322606;
--pink-secondary: #38001b;
--theme-header-face: #90f188;
--yellow-tertiary: #fff8e4;
--green-text: #0f1d07b3;
--purple-text: #12032ab3;
--security-text: #b9b9b9;
--yellow-primary: #ffd029;
--purple-secondary: #12032a;
--green-tertiary: #e9ffe8;
--blue-primary-text: #0093d9;
--blue-secondary: #070035;
--xmas-primary-text: #d80000;
--green-primary: #90f188;
--default-secondary: #0f1d07;
--security-primary-text: #fff;
--yellow-text: #322606b3;
--xmas-primary: #f10000;
--tennis-primary: #8b8f5c;
--xmas-text: #380000b3;
--bottom-fixed-offset: 0;
--container-gutter: clamp(2.5rem, 2.6455vw, 3.325rem);
--blue-primary: #82d7ff;
--yellow-primary-text: #806400;
--tennis-tertiary: #8b8f5c;
--theme-text: #0f1d07b3;
--cyan-tertiary: #dcf5f2;
--green-secondary: #0f1d07;
--security-tertiary: #0f1213;
--theme-primary-text: #23bb16;
--security-primary: #0f1213;
--pink-primary-text: #ab024a;
--pink-text: #38001bb3;
--purple-tertiary: #efe3ff;
--tennis-text: #ffffffb3;
--xmas-tertiary: #f3f3e9;
--theme-background: #f3f3e9;
--security-secondary: #fff;
--cyan-primary-text: #18b4a2;
}Drop-in prompt
Build a landing page in the visual style of Humaan | Websites & Apps | Award-Winning Digital Agency.
Reference design system (extracted from the live site):
- Palette: #64ad51, #fcfcf4, #2c4c24, #54904c, #c4cabb
- Typefaces: neueMontreal
- Macrostructure: Index-First
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/humaan-com
