Supernova AI (formerly Canvas) - The easiest way to understand your startup
Bento Grid
Loading
Cofounder lets you run an entire company with agents
Pixelated meadow serenity: soft teal gradients, gentle sans-serif playfulness, open space.
Click any value to copy. Roles are suggestions, not gospel.
- #1c91ecoklch(64.2% 0.166 249)Dominant
- #5cccfcoklch(79.9% 0.122 229)Surface
- #1c6cb4oklch(52.3% 0.135 251)Ink
- #629959oklch(62.8% 0.110 141)Accent
- #026996oklch(49.3% 0.107 237)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | neoris | 46px | 400 | 1.08 | 0 | Aa Bb Cc |
| h2 | neoris | 40px | 400 | 1.15 | 0 | Aa Bb Cc |
| h3 | neoris | 20px | 440 | 1.1 | -0.4px | Aa Bb Cc |
| body | neoris | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | neoris | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 520px
:root {
--color-dominant: #1c91ec;
--color-surface: #5cccfc;
--color-ink: #1c6cb4;
--color-accent: #629959;
--color-detail: #026996;
}
/* CSS variables exposed by source */
:root {
--color-border-pill: #e3e3e0;
--color-ink: #262323cc;
--color-ink-ui-solid: #202020;
--radius-3xl: 1.5rem;
--font-neoris: "neoris", "neoris Fallback";
--spacing: .25rem;
--background: #f5f5f2;
--color-border-card: #dee2de;
--color-ink-strongest: #262323e6;
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
--color-feature-success: #34a853;
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-accent-brown: #a76451;
--color-white: #fff;
--color-ink-muted: #262323b3;
--color-ink-strong: #262323d9;
--color-surface: #f5f5f2;
--color-lime-300: lab(89.9218% -35.6546 68.5254);
--font-sans: "neoris", "neoris Fallback", sans-serif;
--color-ink-faint: #26232380;
--color-surface-raised: #fbfbf8;
--color-feature-neutral: #bfbfbf;
--font-departure: "departureMono", "departureMono Fallback";
--text-sm--line-height: calc(1.25 / .875);
--text-xs: .75rem;
--text-xs--line-height: calc(1 / .75);
--color-black: #000;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-inter: "Inter", "Inter Fallback";
--color-lime-200: lab(94.0718% -22.5338 42.5238);
--color-surface-darker: #e7e7e3;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--foreground: #171717;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--blur-lg: 16px;
--leading-snug: 1.375;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--tw-outline-style: solid;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--tw-inset-ring-shadow: 0 0 #0000;
--tw-translate-z: 0;
--tw-gradient-via: rgba(0, 0, 0, 0);
--tw-scale-y: 1;
--tw-translate-y: 0;
--blur-md: 12px;
--ease-out: cubic-bezier(0, 0, .2, 1);
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--tw-gradient-from: rgba(0, 0, 0, 0);
--tw-gradient-to: rgba(0, 0, 0, 0);
--tw-shadow-alpha: 100%;
--tw-divide-y-reverse: 0;
}Drop-in prompt
Build a landing page in the visual style of Cofounder lets you run an entire company with agents.
Reference design system (extracted from the live site):
- Palette: #1c91ec, #5cccfc, #1c6cb4, #629959, #026996
- Typefaces: neoris
- 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/cofounder-co
