Svix
Bento Grid
Loading
Novu - Open-source notifications infrastructure for devs and product teams
Deep, dark code-cave minimalism – crisp, geometric sans-serif, vast digital expanse.
Click any value to copy. Roles are suggestions, not gospel.
- #04c6edoklch(76.4% 0.138 219)Dominant
- #9aaadcoklch(74.4% 0.075 271)Surface
- #04748coklch(51.7% 0.093 219)Ink
- #8d629coklch(56.3% 0.100 317)Accent
- #bfbfc0oklch(80.5% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | brother-1816 | 52px | 500 | 1.13 | -1.04px | Aa Bb Cc |
| h2 | brother-1816 | 40px | 500 | 1.5 | -0.8px | Aa Bb Cc |
| h3 | brother-1816 | 16px | 350 | 1 | -0.32px | Aa Bb Cc |
| body | brother-1816 | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | brother-1816 | 14px | 400 | 1 | 0 | Aa Bb Cc |
| button | brother-1816 | 15px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #04c6ed;
--color-surface: #9aaadc;
--color-ink: #04748c;
--color-accent: #8d629c;
--color-detail: #bfbfc0;
}
/* CSS variables exposed by source */
:root {
--color-token-tag: #00c951;
--color-attribute: #ad46ff;
--color-meta: #313233d6;
--color-tag: #313233;
--color-meta-string: #2b7fff;
--bg-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--placeholder-color: #adb5bd;
--mly-tw-border-spacing-x: 0;
--tw-border-spacing-x: 0;
--mly-tw-ring-shadow: 0 0 #0000;
--mly-tw-translate-x: 0;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--variable-icon-size: 12px;
--mly-tw-scroll-snap-strictness: proximity;
--tw-translate-y: 0;
--mly-tw-shadow-colored: 0 0 #0000;
--variable-icon-gap: 4px;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--mly-tw-border-spacing-y: 0;
--mly-tw-skew-y: 0;
--mly-tw-skew-x: 0;
--tw-skew-x: 0;
--mly-tw-shadow: 0 0 #0000;
--mly-tw-translate-y: 0;
--mly-tw-ring-color: rgba(59,130,246,.5);
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--mly-tw-ring-offset-shadow: 0 0 #0000;
--mly-tw-scale-x: 1;
--tw-scroll-snap-strictness: proximity;
--mly-tw-ring-offset-color: #fff;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--mly-tw-rotate: 0;
--tw-border-spacing-y: 0;
--mly-tw-ring-offset-width: 0px;
--mly-tw-scale-y: 1;
--tw-skew-y: 0;
}Drop-in prompt
Build a landing page in the visual style of Novu - Open-source notifications infrastructure for devs and product teams.
Reference design system (extracted from the live site):
- Palette: #04c6ed, #9aaadc, #04748c, #8d629c, #bfbfc0
- Typefaces: brother-1816
- 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/novu-co
