Mem – Your AI Thought Partner
Bento Grid
Loading
Supernova AI (formerly Canvas) - The easiest way to understand your startup
Cool, crisp data visualizations floating in a spacious, subtly shifting digital ether.
Click any value to copy. Roles are suggestions, not gospel.
- #6c3cf2oklch(53.3% 0.250 286)Dominant
- #9bb4f2oklch(77.4% 0.093 267)Surface
- #1f3354oklch(32.2% 0.065 260)Ink
- #7085a5oklch(61.2% 0.055 259)Accent
- #9db3c9oklch(75.7% 0.040 248)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | __twkLausanne_0230cc | 56px | 400 | 1.11 | -1.12px | Aa Bb Cc |
| h2 | __twkLausanne_0230cc | 24px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 400 | 1.71 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1216px
:root {
--color-dominant: #6c3cf2;
--color-surface: #9bb4f2;
--color-ink: #1f3354;
--color-accent: #7085a5;
--color-detail: #9db3c9;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--font-twklausanne: "__twkLausanne_0230cc","__twkLausanne_Fallback_0230cc";
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Supernova AI (formerly Canvas) - The easiest way to understand your startup.
Reference design system (extracted from the live site):
- Palette: #6c3cf2, #9bb4f2, #1f3354, #7085a5, #9db3c9
- Typefaces: __twkLausanne_0230cc, Inter
- 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/canvasapp-com
