Poly
Bento Grid
Loading
Mem – Your AI Thought Partner
Warm terracotta and cool cerulean, clean sans-serif, expansive digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #fb543coklch(67.2% 0.207 31)Dominant
- #749cf8oklch(70.4% 0.142 265)Surface
- #811202oklch(38.8% 0.147 32)Ink
- #90674boklch(54.9% 0.067 55)Accent
- #d3aa9doklch(77.1% 0.052 38)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Ritual VF Variable | 112px | 400 | 0.9 | -5.04px | Aa Bb Cc |
| h2 | Ritual VF Variable | 12px | 400 | 1 | 2px | Aa Bb Cc |
| h3 | Ritual VF Variable | 60px | 400 | 0.98 | -2.4192px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Ritual VF Variable | 18px | 400 | 1.31 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fb543c;
--color-surface: #749cf8;
--color-ink: #811202;
--color-accent: #90674b;
--color-detail: #d3aa9d;
}
/* CSS variables exposed by source */
:root {
--color-muted: #707070;
--space-16: 4rem;
--color-white: #fff;
--space-20: 5rem;
--color-lavender: #f4edfd;
--space-14: 3.5rem;
--color-navy: #100f31;
--color-cream: #fcf8f1;
--radius-sm: 10px;
--shadow-soft: 0 24px 80px #100f311f;
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--color-ink-soft: #100f311f;
--space-2: .5rem;
--space-4: 1rem;
--space-3: .75rem;
--color-line: #d6d5e6;
--color-sand: #f1e7d3;
--space-8: 2rem;
--radius-pill: 999px;
--space-1: .25rem;
--color-navy-muted: #707070;
--color-blue: #6792ff;
--space-10: 2.5rem;
--color-coral: #ff5c45;
--color-sand-deep: #e8dcc4;
--space-12: 3rem;
--font-mono: "Fragment Mono", "SFMono-Regular", Consolas, monospace;
--font-display: "Ritual VF Variable", Inter, ui-sans-serif, system-ui, sans-serif;
--radius-xl: 40px;
--radius-md: 16px;
--color-coral-soft: #ffe8e6;
--radius-lg: 28px;
--color-cream-deep: #f9f1e4;
--space-6: 1.5rem;
--space-28: 7rem;
--color-blue-deep: #3d69d9;
--shadow-card: 0 16px 48px #100f311a;
--space-5: 1.25rem;
--space-24: 6rem;
--tracking-display-tight: -.04em;
--breakpoint-tablet-canvas: 810px;
--container-narrow: 900px;
--breakpoint-phone-canvas: 390px;
--breakpoint-tablet-max: 1199px;
--breakpoint-desktop-canvas: 1200px;
--breakpoint-desktop-min: 1200px;
--breakpoint-mobile-max: 799px;
--breakpoint-tablet-min: 800px;
--container: 1320px;
}Drop-in prompt
Build a landing page in the visual style of Mem – Your AI Thought Partner.
Reference design system (extracted from the live site):
- Palette: #fb543c, #749cf8, #811202, #90674b, #d3aa9d
- Typefaces: Ritual VF Variable, 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/mem-ai
