Supernova AI (formerly Canvas) - The easiest way to understand your startup
Bento Grid
Soft, muted grayscale floats on expansive, airy space, fostering quiet confidence.




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 | Sf Pro Display | 73px | 400 | 0.94 | -2.19589px | Aa Bb Cc |
| h2 | Sf Pro Display | 100px | 400 | 1 | -2.99439px | Aa Bb Cc |
| h3 | Sf Pro Display | 43px | 500 | 1.05 | -1.33084px | Aa Bb Cc |
| body | Arial | 14px | 400 | 1.39 | 0 | Aa Bb Cc |
| button | Arial | 14px | 400 | 1.39 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #4972b5;
--color-surface: #f4e4dc;
--color-ink: #2c446c;
--color-accent: #708094;
--color-detail: #ccc1af;
}
/* CSS variables exposed by source */
:root {
--fonts-30: #ffffff4d;
--fonts-100: white;
--fonts-50: #ffffff80;
--fonts-20: #fff3;
--fonts-64: #ffffffa3;
--_fonts---h1: 5.5rem;
--_fonts---body-3: 1.25rem;
--_fonts---small-text-1: .75rem;
--_fonts---body-1: 1.125rem;
--_fonts---title-3: 1.5rem;
--dots-pattern: #1a1a1a;
--_fonts---tag-small: 1.125rem;
--menu-colors: #fff3;
--secondbg: #111;
--_fonts---h3: 3.25rem;
--_fonts---title-2: .875rem;
--_font-family---medium: 500;
--_fonts---tag: 1.125rem;
--_font-family---size: 0px;
--_font-family---regular: 400;
--_fonts---small-text-2: .625rem;
--_fonts---body-2: 1rem;
--_fonts---btn: 1.0625rem;
--lines: #2a2a30;
--_fonts---h2-5: 4rem;
--menu: #272727;
--_fonts---h2: 7.5rem;
--_font-family---font-family: "Sf Pro Display", Arial, sans-serif;
--mainbg-gradient: #02010800;
--user-zoom: 1;
--_fonts---title-1: 1rem;
--mainbg: #020108;
--_fonts---h4: 2.25rem;
}Drop-in prompt
Build a landing page in the visual style of AI Product Generation — Fourmula.ai.
Reference design system (extracted from the live site):
- Palette: #4972b5, #f4e4dc, #2c446c, #708094, #ccc1af
- Typefaces: Sf Pro Display, Arial
- 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/fourmula-ai