Elastic
Bento Grid
Loading
Mintlify - The Intelligent Knowledge Platform
Soft, muted teal and ochre gradients flow across a spacious, clean grid, fostering focused exploration.
Click any value to copy. Roles are suggestions, not gospel.
- #176f85oklch(50.3% 0.085 219)Dominant
- #d6ce89oklch(84.2% 0.089 102)Surface
- #04547coklch(42.5% 0.094 239)Ink
- #5ca9a1oklch(68.3% 0.078 187)Accent
- #b1cbb5oklch(81.7% 0.041 150)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | arizonaFlare | 50px | 400 | 1.04 | -2px | Aa Bb Cc |
| h2 | inter | 24px | 500 | 1.17 | -0.24px | Aa Bb Cc |
| h3 | inter | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | inter | 14px | 500 | 1.14 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #176f85;
--color-surface: #d6ce89;
--color-ink: #04547c;
--color-accent: #5ca9a1;
--color-detail: #b1cbb5;
}
/* CSS variables exposed by source */
:root {
--color-neutral-300: #cfcdca;
--text-base--line-height: calc(1.5/1);
--radius-4xl: 2rem;
--color-speedy-mint: #18e299;
--color-white: #fff;
--radius-sm: .25rem;
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-border-transparent: transparent;
--color-pink-2: #ffa3d3;
--color-background-tertiary: #ebe9e6;
--color-purple: #d87cff;
--radius-md: .375rem;
--radius-lg: .5rem;
--color-neutral-100: #faf8f5;
--color-background-main: lab(100% 0 0);
--color-black-8: rgba(0,0,0,.08);
--color-brand-vivid: #1fa77a;
--color-border-secondary: rgba(0,0,0,.06);
--text-sm: .875rem;
--color-neutral-0: #fefdfb;
--color-light-mint: #d2f7ea;
--color-border-tertiary: rgba(0,0,0,.08);
--color-background-gray-emphasis: lab(90.9058% .404745 1.13158);
--color-background-secondary: #faf8f5;
--color-background-primary: #fefdfb;
--color-brand-base: #0c8c5e;
--text-lg: 1.125rem;
--color-gradient-green-3: #6dee6b;
--color-neutral-500: #717d79;
--color-border-primary: rgba(0,0,0,.04);
--color-orange-2: #ffa723;
--color-border-solid: lab(2.42579% -.165291 -.470081);
--color-red-500: lab(55.4814% 75.0732 48.8528);
--color-brand-20: rgba(12,140,94,.2);
--color-gradient-green-1: #18e299;
--color-background-gray-subtle: lab(97.6905% -.00655651 .761855);
--color-white-35: rgba(255,255,255,.35);
--color-rail-dot: rgba(0,0,0,.12);
--color-text-base-tertiary: lab(2.42579% -.165291 -.470081/.4);
--color-white-5: rgba(255,255,255,.05);
--color-foreground-tertiary: #717d79;
--color-text-soft: lab(2.42579% -.165291 -.470081/.8);
--color-text-sub: lab(2.42579% -.165291 -.470081/.6);
--color-muted-invert: lab(100% 0 0/.5);
--color-green-800: lab(37.4616% -36.7971 22.9692);
--color-muted: lab(2.42579% -.165291 -.470081/.5);
--text-sm--line-height: calc(1.25/.875);
--text-3xl--line-height: calc(2.25/1.875);
--text-3xl: 1.875rem;
--text-xs: .75rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--text-base: 1rem;
--color-light-orange: #ffeee0;
--color-brand-8: rgba(12,140,94,.08);
--color-foreground-secondary: #485450;
--color-neutral-200: #ebe9e6;
--color-foreground-muted: #969e9b;
--color-grass: #1b4637;
--color-foreground-gray-subtle: lab(32.706% 2.82747 7.21374);
}Drop-in prompt
Build a landing page in the visual style of Mintlify - The Intelligent Knowledge Platform.
Reference design system (extracted from the live site):
- Palette: #176f85, #d6ce89, #04547c, #5ca9a1, #b1cbb5
- Typefaces: arizonaFlare, 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/mintlify-com
