AI Analytics Platform for Your Whole Team | Hex
Bento Grid
Cool, geometric blues and greens; stark, clean sans-serifs; spacious, data-driven clarity.




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 | MierB | 64px | 600 | 1 | -1.28px | Aa Bb Cc |
| h2 | MierB | 22px | 600 | 1.2 | 0 | Aa Bb Cc |
| h3 | MierB | 16px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter | 13px | 400 | 1 | 0.325px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0c63db;
--color-surface: #07bdb5;
--color-ink: #87f3e1;
--color-accent: #69aab1;
--color-detail: #c5d0db;
}
/* CSS variables exposed by source */
:root {
--font-family-body: "Inter",arial,sans-serif;
--color-sky-blue-rgb: 54,185,255;
--color-black-rgb: 0,0,0;
--color-light-orange: #ff977a;
--font-size-tablet-h3: 48px;
--color-blue-elasticDark: #094dab;
--size-18: 120px;
--font-size-tablet-blockquote: 32px;
--color-blurple-rgb: 21,51,133;
--color-darker-blue-rgb: 9,18,41;
--font-size-tablet-eyebrow: 16px;
--color-warning-red: #f00;
--size-21: 144px;
--color-blue-midnight: #153385;
--color-light-ink: #535966;
--color-dark-teal: #00857f;
--color-gray-300: #ccd2d7;
--color-pink-tint: #fce5f1;
--size-masthead-height: calc(40px - 2px);
--color-dark-gray: #d4dae5;
--color-gray-500: #a2a9b4;
--color-warning-red-rgb: 255,0,0;
--color-light-teal: #48EFCF;
--color-near-black: #0e1b35;
--color-elastic-teal: #02BCB7;
--color-teal-tint-rgb: 230,250,247;
--color-blurple: #153385;
--color-white: #ffffff;
--color-gray-400: #b5bcc4;
--size-17: 112px;
--color-ice-rgb: 140,215,255;
--color-blue-developerLight: #1f2a5f;
--font-weight-bold: 700;
--size-navigation-height-md: 72px;
--border-radius-md: 8px;
--color-gray-100: #eeeff1;
--size-6: 24px;
--color-developer-blue-rgb: 16,28,63;
--color-elastic-blue-rgb: 11,100,221;
--font-size-tablet-caption: 12px;
--size-15: 96px;
--color-poppy-tint-rgb: 253,234,230;
--color-dark-yellow: #f9b110;
--font-size-tablet-h2: 60px;
--color-poppy-tint: #fdeae6;
--color-dark-midnight-rgb: 23,45,99;
--color-poppy: #FA744E;
--color-blue-developerDark: #081022;
--color-blue-light: #8cd7ff;
--font-size-h6: 16px;
--font-family-mono: "Roboto Mono",monospace;
--size-navigation-height-lg: 80px;
--font-size-p2: 14px;
--color-pink-light: #f990c6;
--color-elastic-blue: #0B64DD;
--color-ink: #343741;
--size-19: 128px;
--size-20: 136px;
--color-teal-dark: #00857f;
--color-blue-developer: #101c3f;
}Drop-in prompt
Build a landing page in the visual style of Elastic — About.
Reference design system (extracted from the live site):
- Palette: #0c63db, #07bdb5, #87f3e1, #69aab1, #c5d0db
- Typefaces: MierB, Inter
- Macrostructure: Bento Grid
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/elastic-co--about