Elastic
Bento Grid
Loading
Prisma
Cool, stark geometry—muted teal and charcoal, precise sans-serifs, expansive digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #18bba5oklch(71.1% 0.126 180)Dominant
- #14645coklch(45.6% 0.074 185)Surface
- #96dcd5oklch(84.6% 0.071 188)Ink
- #7c7c84oklch(58.9% 0.012 286)Accent
- #9cccccoklch(81.2% 0.050 196)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | monaSans | 52px | 900 | 1.12 | 0 | Aa Bb Cc |
| h2 | monaSans | 36px | 900 | 1.33 | -0.54px | Aa Bb Cc |
| h3 | monaSans | 16px | 800 | 1.5 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Inter | 14px | 700 | 1.71 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #18bba5;
--color-surface: #14645c;
--color-ink: #96dcd5;
--color-accent: #7c7c84;
--color-detail: #9ccccc;
}
/* CSS variables exposed by source */
:root {
--border: #e2e8f0;
--text-base: 1rem;
--color-background-default-050: #ffffff80;
--color-background-sky: #f0f9ff;
--color-background-yellow: #fefce8;
--color-teal-400: lab(76.0109% -53.3483 -2.27906);
--primary-foreground: #fff;
--color-background-error-reverse-strong: #dc2626;
--color-fd-secondary: #f7fafc;
--color-foreground-yellow: #ca8a04;
--color-background-orm-strong: #e0e7ff;
--color-background-default: #fff;
--color-foreground-purple: #9333ea;
--color-background-success-reverse: #14b8a6;
--text-base--line-height: calc(1.5/1);
--color-fd-diff-add-symbol: #0ac864;
--color-stroke-purple: #9333ea;
--font-mono: "monaSansMono","monaSansMono Fallback",ui-monospace,"Cascadia Code","Source Code Pro","Menlo","Consolas","DejaVu Sans Mono",monospace;
--font-sans-display: "monaSans","monaSans Fallback","Inter","Roboto","Helvetica Neue","Arial Nova","Nimbus Sans","Arial",sans-serif;
--color-fd-diff-remove: #c80a641f;
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-foreground-pink: #db2777;
--color-foreground-ppg-reverse: #fff;
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-background-orm-reverse: #6366f1;
--color-stroke-ppg-weak: #99f6e4;
--color-white: #fff;
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--radius-square-low: .1875rem;
--color-foreground-ppg: #0d9488;
--font-mona-sans: "monaSans","monaSans Fallback";
--color-fd-border: #e2e8f0;
--font-weight-bold: 700;
--color-stroke-success: #0d9488;
--text-2xs: .6875rem;
--color-fd-idea: lab(64.7587% 46.0756 133.272);
--color-fd-overlay: #0003;
--color-background-ppg: #f0fdfa;
--spacing-element-sm: 1.25rem;
--text-xs--line-height: 1rem;
--color-background-error-reverse: #ef4444;
--color-stroke-neutral: #e5e7eb;
--color-foreground-violet: #7c3aed;
--text-2xs--line-height: 1rem;
--radius-md: calc(.5rem - 2px);
--color-fd-diff-add: #0eb4641a;
--font-mono--settings: "ss01" on,"ss02" on,"ss05" on,"ss06" on;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-background-orm: #eef2ff;
--color-foreground-orm: #4f46e5;
--color-fd-accent: #d9f9f6;
--color-foreground-ppg-reverse-weak: #99f6e4;
--color-foreground-error: #dc2626;
--color-foreground-warning: #ea580c;
--color-background-ppg-strong: #ccfbf1;
--accent: #d9f9f6;
--radius-circle: 999px;
--color-background-neutral-reverse-strong: #111827;
--color-background-fuchsia: #fdf4ff;
}Drop-in prompt
Build a landing page in the visual style of Prisma.
Reference design system (extracted from the live site):
- Palette: #18bba5, #14645c, #96dcd5, #7c7c84, #9ccccc
- Typefaces: monaSans, 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/prisma-io
