Webflow
Feature Stack
Clean, cool, spacious; crisp sans-serif geometry in muted, tech-forward blues and grays.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | ABCMonumentGrotesk | 84px | 300 | 1 | -1.008px | Aa Bb Cc |
| h2 | ABCMonumentGrotesk | 64px | 300 | 1.08 | -0.512px | Aa Bb Cc |
| h3 | ABCMonumentGrotesk | 19px | 400 | 1.3 | 0 | Aa Bb Cc |
| body | ABCMonumentGrotesk | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | ABCMonumentGrotesk | 24px | 300 | 1.3 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ee9213;
--color-surface: #fccc74;
--color-ink: #043c9e;
--color-accent: #9c805c;
--color-detail: #b4acd4;
}
/* CSS variables exposed by source */
:root {
--background-secondary: #f4f4f6;
--border-primary: #e8e9ed;
--border-color: #a7abfe4d;
--text--primary: black;
--text--secondary: black;
--text--tertiary: #6a6d81;
--primary-purple: #4700eb;
--tw-ring-shadow: 0 0 #0000;
--purple-200: #dbccff;
--ube-200: #d3d5ff;
--ube-350: #b2b6fe;
--mint-1100: #09261b;
--mint-800: #22966b;
--blueberry-400: #8dbafe;
--fog-500: #f2f2f2;
--slate-400: #d8d9df;
--papaya-1100: #311e00;
--mobile-nav-drawer-top: 75px;
--papaya-800: #c47802;
--slate-400-401: #d8d9df;
--ube-100: #e9eaff;
--elderberry-1000: #015c65;
--papaya-400: #fed28d;
--teal-200: #d1f3f7;
--ube-300: #bdc0fe;
--papaya-350-351: #fed89b;
--elderberry-100: #e6fdff;
--elderberry-900: #028a98;
--error-red: #f50545;
--kiwi-100: #fbffe4;
--shape-soft: #cdb8ff4d;
--tw-border-spacing-x: 0;
--elderberry-300: #b4f8fe;
--kiwi-lime-900: #7f9501;
--kiwi-lime-500: #e6fe60;
--blueberry-100: #e3eeff;
--core-purple-200: #cbb2ff;
--tw-ring-color: #3b82f680;
--papaya-700: #f59602;
--blueberry-900: #013b93;
--mint-600: #41d49d;
--ube-460: #8086fd;
--ube-450: #878cfd;
--yellow-200: #ffecb6;
--purple-500: #631fff;
--tw-rotate: 0;
--cookie-banner-height: 0px;
--tw-ring-offset-color: #fff;
--purple-400: #8652ff;
--fog-400: #f6f6f6;
--purple-700: #290087;
--elderberry-800: #02b8ca;
--blue-berry-500: #5c9cfe;
--ube-50: #f4f5ff;
--mint-200: #c6f2e2;
--fog-300: #d4d4d4;
--fog-500-501: #787878;
--papaya-600: #fdab2b;
--blueberry-800: #024fc4;
--blueberry-200: #c6ddff;
}Drop-in prompt
Build a landing page in the visual style of Secure Identity Verification Solutions | Persona.
Reference design system (extracted from the live site):
- Palette: #ee9213, #fccc74, #043c9e, #9c805c, #b4acd4
- Typefaces: ABCMonumentGrotesk
- 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/withpersona-com