Grafana
Split Studio
Loading
MotherDuck | The Cloud Data Warehouse Built on DuckDB
Cool, stark geometry; crisp sans-serif, a digital landscape of refined functionality.
Click any value to copy. Roles are suggestions, not gospel.
- #fbdb04oklch(89.1% 0.184 98)Dominant
- #fb987doklch(77.6% 0.126 36)Surface
- #c5ad04oklch(74.6% 0.154 99)Ink
- #5454a4oklch(48.6% 0.126 281)Accent
- #bfb9b7oklch(79.0% 0.007 39)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Aeonik Mono | 56px | 400 | 1.2 | 1.12px | Aa Bb Cc |
| h2 | Aeonik Mono | 16px | 600 | 1.2 | 0.48px | Aa Bb Cc |
| h3 | Aeonik Mono | 24px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | Aeonik Mono | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fbdb04;
--color-surface: #fb987d;
--color-ink: #c5ad04;
--color-accent: #5454a4;
--color-detail: #bfb9b7;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--toastify-color-warning: #f1c40f;
--tw-ring-shadow: 0 0 #0000;
--eyebrow-mobile: 70px;
--toastify-spinner-color: #616161;
--toastify-z-index: 9999;
--toastify-text-color-error: #fff;
--toastify-color-info: #3498db;
--header-mobile: 70px;
--tw-border-spacing-x: 0;
--toastify-text-color-warning: #fff;
--tw-scale-y: 1;
--toastify-toast-max-height: 800px;
--toastify-color-transparent: hsla(0,0%,100%,.7);
--toastify-color-progress-error: #e74c3c;
--toastify-font-family: sans-serif;
--tw-ring-color: rgba(59,130,246,.5);
--toastify-text-color-light: #757575;
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--toastify-color-progress-info: #3498db;
--toastify-color-dark: #121212;
--toastify-color-progress-success: #07bc0c;
--tw-rotate: 0;
--header-desktop: 80px;
--tw-ring-offset-color: #fff;
--toastify-color-progress-dark: #bb86fc;
--toastify-icon-color-success: #07bc0c;
--toastify-toast-min-height: 64px;
--toastify-color-progress-warning: #f1c40f;
--toastify-color-light: #fff;
--tw-skew-x: 0;
--toastify-text-color-success: #fff;
--toastify-toast-width: 320px;
--toastify-color-success: #07bc0c;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--toastify-text-color-dark: #fff;
--tw-scroll-snap-strictness: proximity;
--toastify-color-progress-light: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
--toastify-color-error: #e74c3c;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--toastify-toast-background: #fff;
--toastify-icon-color-error: #e74c3c;
--eyebrow-desktop: 50px;
--tw-skew-y: 0;
--toastify-icon-color-info: #3498db;
--toastify-text-color-info: #fff;
--toastify-icon-color-warning: #f1c40f;
--toastify-spinner-color-empty-area: #e0e0e0;
}Drop-in prompt
Build a landing page in the visual style of MotherDuck | The Cloud Data Warehouse Built on DuckDB.
Reference design system (extracted from the live site):
- Palette: #fbdb04, #fb987d, #c5ad04, #5454a4, #bfb9b7
- Typefaces: Aeonik Mono, Inter
- Macrostructure: Split Studio
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/motherduck-com
