Novu - Open-source notifications infrastructure for devs and product teams
Bento Grid
Loading
Vimcal | Fastest Calendar for People with Too Many Meetings
Deep indigo expanse, crisp sans-serif geometry, feeling of focused, boundless clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #1086e9oklch(61.4% 0.176 251)Dominant
- #f4ac9coklch(80.9% 0.088 33)Surface
- #791247oklch(38.6% 0.143 356)Ink
- #994558oklch(50.4% 0.114 8)Accent
- #c2c1c3oklch(81.2% 0.003 308)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Plus Jakarta Sans | 52px | 400 | 1.2 | -1.5552px | Aa Bb Cc |
| h3 | Plus Jakarta Sans | 43px | 400 | 1.1 | -1.296px | Aa Bb Cc |
| body | Plus Jakarta Sans | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Plus Jakarta Sans | 24px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1354px
:root {
--color-dominant: #1086e9;
--color-surface: #f4ac9c;
--color-ink: #791247;
--color-accent: #994558;
--color-detail: #c2c1c3;
}
/* CSS variables exposed by source */
:root {
--brand: #917bd1;
--spark-library--background--interactive: #f0ecfd;
--sandy-brown: #ff9f59;
--spark-library--light-steel-purple: #a695fb;
--untitled-ui--success50: #ecfdf3;
--untitled-ui-primary700: #6941c6;
--spark-library--foreground-secondary: #000000c2;
--vimcal-v2---untitled-ui--gray200: #eaecf0;
--mint-cream: #f0fbf7;
--waves-library--black: #131313;
--vimcal-v2---untitled-ui--gray100: #f2f4f7;
--untitled-ui-primary800: #53389e;
--white: #fef7fd;
--spark-library--foreground-interactive-hover: #1e116e;
--untitled-ui-pink700: #c11574;
--lavender: #f3efff;
--untitled-ui-primary50: #f9f5ff;
--vimcal-v2---light-grey: #141314;
--vimcal-v2---untitled-ui--gray600: #475467;
--vimcal-v2---untitled-ui--primary300: #d6bbfb;
--vimcal-v2---untitled-ui--warning300: #fec84b;
--vimcal-v2---untitled-ui--primary100: #f4ebff;
--plum: #ed9ae4;
--vimcal-v2---untitled-ui--success50: #ecfdf3;
--vimcal-v2---black-bg: black;
--vimcal-v2---untitled-ui--primary50: #f9f5ff;
--vimcal-v2---untitled-ui--gray400: #98a2b3;
--vimcal-v2---untitled-ui--white: white;
--seashell: #fff7f2;
--lavender-blush: #fef1f2;
--untitled-ui-indigo50: #eef4ff;
--untitled-ui-primary100: #f4ebff;
--medium-aquamarine: #46d39a;
--untitled-ui-gray500: #667085;
--vimcal-v2---white: white;
--vimcal-v2---untitled-ui--primary700: #6941c6;
--vimcal-v2---pink: #ff59c1;
--vimcal-v2---untitled-ui--primary500: #9e77ed;
--vimcal-v2---untitled-ui--gray300: #d0d5dd;
--untitled-ui-indigo700: #3538cd;
--untitled-ui-primary600: #7f56d9;
--offwhite: #c4c3d5;
--untitled-ui-gray200: #eaecf0;
--ghost-white: #fef7fd;
--ghost-white-2: #f8faff;
--vimcal-v2---untitled-ui--gray700: #344054;
--dark-slate-blue: #fff;
--vimcal-v2---light-pink: #b0b1b4;
--untitled-ui-gray300: #d0d5dd;
--vimcal-v2---untitled-ui--success700: #027a48;
--untitled-ui-white: white;
--vimcal-v2---untitled-ui--gray900: #101828;
--vimcal-v2---untitled-ui--gray800: #1d2939;
--spark-library--white: white;
--untitled-ui-gray700: #344054;
--vimcal-v2---untitled-ui--primary600: #7f56d9;
--untitled-ui-gray600: #475467;
--light-slate-grey: #fff;
--vimcal-v2---untitled-ui--gray500: #667085;
--sky-blue: #01d2fc;
}Drop-in prompt
Build a landing page in the visual style of Vimcal | Fastest Calendar for People with Too Many Meetings.
Reference design system (extracted from the live site):
- Palette: #1086e9, #f4ac9c, #791247, #994558, #c2c1c3
- Typefaces: 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/vimcal-com
