Webflow
Feature Stack
Loading
No Code App Builder: Create Custom, AI-Powered Apps | Glide
Crisp, cool grayscale geometry, clean sans-serif logic, expansive quiet space.
Click any value to copy. Roles are suggestions, not gospel.
- #78e8e9oklch(86.6% 0.103 196)Dominant
- #8cebecoklch(88.2% 0.090 197)Surface
- #449094oklch(60.7% 0.075 200)Ink
- #44848coklch(57.4% 0.067 206)Accent
- #b6c1c1oklch(80.2% 0.012 197)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | bootonFont | 85px | 575 | 1.1 | -1.7px | Aa Bb Cc |
| h2 | bootonFont | 60px | 575 | 1 | -1.2px | Aa Bb Cc |
| h3 | bootonFont | 48px | 575 | 1 | -0.96px | Aa Bb Cc |
| body | bootonFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | bootonFont | 14px | 575 | 1.3 | -0.14px | Aa Bb Cc |
| button | bootonFont | 14px | 575 | 1.3 | -0.14px | Aa Bb Cc |
Max content width 1536px
:root {
--color-dominant: #78e8e9;
--color-surface: #8cebec;
--color-ink: #449094;
--color-accent: #44848c;
--color-detail: #b6c1c1;
}
/* CSS variables exposed by source */
:root {
--color-neutrals-alpha-light-900: #000000f5;
--color-pink-500: lab(56.9303% 76.8162 -8.07021);
--color-orange-600: #c44f00;
--color-pear-100: #fcffd2;
--color-neutrals-opaque-400: #bebfb7;
--color-blue-700: #34366a;
--color-neutrals-alpha-light-700: #000000b8;
--color-neutrals-opaque-950: #0e0e0d;
--color-neutral-300: #d1d1d1;
--color-wa-400: #ffffff5c;
--text-base--line-height: calc(1.5/1);
--radius-4xl: 2rem;
--color-neutrals-opaque-dark-800: #e4e4df;
--color-neutral-200: #ebebeb;
--color-blue-300: #a6a8f9;
--color-wa-600: #ffffffa8;
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--color-yellow-400: #faca0a;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-aqua-900: #011516;
--color-neutrals-opaque-dark-200: #262625;
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-ba-800: #000000e0;
--color-green-500: #00a862;
--text-2xl--letter-spacing: -.3px;
--text-pullout-sm: 18px;
--text-9xl--line-height: 1;
--color-wa-200: #ffffff29;
--color-accent-dark: #96fbff;
--color-white: #fff;
--color-ba-500: #0006;
--color-neutrals-opaque-dark-900: #fff;
--color-aqua-700: #066266;
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-accent: #0cbdc3;
--radius-sm: .25rem;
--text-pullout-xl: 36px;
--font-weight-bold: 700;
--color-aqua-200: #cefafc;
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-aqua-dark-200: #066266;
--color-purple-600: lab(43.0295% 75.21 -86.5669);
--color-neutrals-alpha-dark-100: #ffffff1a;
--color-neutral-warm-600: #5e5e5c;
--color-neutrals-alpha-dark-200: #ffffff29;
--text-xs--line-height: 1.3;
--color-neutral-700: #303030;
--color-tertiary-dark: #bebeb8;
--text-sm--letter-spacing: -.14px;
--color-aqua-light-400: #71eaee;
--color-tertiary: #5e5e5c;
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: #232450;
--text-xl: 1.375rem;
--color-neutral-900: #1a1a1a;
--color-aqua-dark-700: #cefafc;
--radius-lg: .5rem;
--color-neutral-warm-300: #d9dad3;
--color-neutrals-alpha-light-50: #00000005;
}Drop-in prompt
Build a landing page in the visual style of No Code App Builder: Create Custom, AI-Powered Apps | Glide.
Reference design system (extracted from the live site):
- Palette: #78e8e9, #8cebec, #449094, #44848c, #b6c1c1
- Typefaces: bootonFont
- 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/glideapps-com
