Novu - Open-source notifications infrastructure for devs and product teams
Bento Grid
Deep indigo shadows embrace crisp, technical sans serif, a feeling of focused power.




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 | Lato | 17px | 900 | 1.3 | -1px | Aa Bb Cc |
| h2 | Plus Jakarta Sans | 62px | 900 | 1.2 | -1px | Aa Bb Cc |
| h3 | Plus Jakarta Sans | 24px | 800 | 1.4 | -1px | Aa Bb Cc |
| body | Lato | 17px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1076px
:root {
--color-dominant: #2d6dc7;
--color-surface: #72acee;
--color-ink: #246f61;
--color-accent: #ac8454;
--color-detail: #d8d6ac;
}
/* CSS variables exposed by source */
:root {
--wp--preset--font-size--large: 36px;
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--tcb-skin-color-22: rgb(255, 255, 255);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--preset--color--vivid-purple: #9b51e0;
--tcb-skin-color-23-l: 20%;
--tcb-skin-color-26-a: 0.12;
--tcb-skin-color-25-h: calc(52 - 0 );
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--tcb-skin-color-24-h: 0;
--tcb-skin-color-1-s: calc(100% - 20% );
--tcb-skin-color-30: hsla(calc(52 - 1 ), calc(100% - 17% ), calc(59% + 4% ), 0.85);
--tcb-skin-color-19: hsla(calc(52 - 3 ), 56%, 96%, 0.85);
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--tcb-skin-color-9-a: 1;
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--tcb-skin-color-0: hsla(52, 100%, 59%, 1);
--tcb-skin-color-3-l: 13%;
--tcb-skin-color-10-s: 100%;
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--tcb-skin-color-26: hsla(calc(52 + 1 ), calc(100% - 16% ), calc(59% + 5% ), 0.12);
--tcb-skin-color-0-h: 52;
--tcb-skin-color-5-a: 1;
--tcb-skin-color-28-a: 1;
--tcb-skin-color-16-s: 3%;
--tcb-skin-color-2-s: 0%;
--wp--preset--spacing--40: 1rem;
--tcb-skin-color-4: rgb(12, 17, 21);
--tcb-skin-color-13-l: calc(59% - 23% );
--tcb-skin-color-18-s: calc(100% - 21% );
--wp--preset--color--luminous-vivid-orange: #ff6900;
--tcb-skin-color-25-a: 0.04;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
--tcb-skin-color-10-l: 81%;
--tcb-skin-color-5-h: 210;
--tcb-skin-color-4-l: 6%;
--tcb-theme-main-master-s: 100%;
--tcb-skin-color-19-s: 56%;
--tcb-skin-color-9-s: 56%;
--tcb-skin-color-27-s: calc(100% - 16% );
--tcb-skin-color-4-a: 1;
--tcb-skin-color-28: hsla(calc(52 + 2 ), 43%, 82%, 1);
--tcb-skin-color-18-a: 0.8;
--tcb-skin-color-23-h: 189;
--tcb-skin-color-0-s: 100%;
--tcb-skin-color-14: rgb(230, 230, 230);
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--spacing--30: 0.67rem;
--tcb-skin-color-23: rgb(32, 65, 71);
--wp--preset--spacing--50: 1.5rem;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--tcb-main-master-l: 59%;
--tcb-skin-color-27-a: 1;
--tcb-skin-color-18-h: calc(52 - 1 );
--tcb-skin-color-1-a: 0.5;
--tcb-skin-color-25-l: calc(59% + 4% );
--tcb-skin-color-23-s: 37%;
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
--tcb-skin-color-16-l: 36%;
}Drop-in prompt
Build a landing page in the visual style of CommentGuard | Facebook & Instagram Moderation Software.
Reference design system (extracted from the live site):
- Palette: #2d6dc7, #72acee, #246f61, #ac8454, #d8d6ac
- Typefaces: Lato, Plus Jakarta Sans
- 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/commentguard-io