Svix
Bento Grid
Gentle pastel gradients bloom across open, airy space, playful sans-serifs dance lightly.




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 |
|---|---|---|---|---|---|---|
| h2 | InterVariable | 40px | 700 | 1.38 | 0 | Aa Bb Cc |
| body | InterVariable | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1024px
:root {
--color-dominant: #3a12f3;
--color-surface: #09766f;
--color-ink: #a874f2;
--color-accent: #bc6e64;
--color-detail: #a7d3d4;
}
/* CSS variables exposed by source */
:root {
--font-size-5: 2rem;
--font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
--radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
--color-brand-rose-3: #ff7698;
--size-px-7: 32px;
--font-slab-serif: Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;
--border-size-5: 25px;
--color-brand-orange-6: #582b00;
--font-humanist: Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;
--border-size-4: 10px;
--size-fluid-1: clamp(.5rem,1vw,1rem);
--color-brand-pink-4: #ff00bc;
--size-px-13: 240px;
--color-background-accent: #ffe0f7;
--font-lineheight-0: 1.1;
--color-input-border: #b4b4b4;
--color-primary-5: #ff9028;
--font-lineheight-1: 1.25;
--size-content-4: 80ch;
--font-size-fluid-2: clamp(1.5rem,6vw,2.5rem);
--size-fluid-9: clamp(15rem,30vw,20rem);
--color-brand-light-2: #fafafa;
--font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
--color-brand-sky-3: #66bfff;
--size-relative-10: 5ch;
--font-size-fluid-3: clamp(2rem,9vw,3.5rem);
--color-brand-yellow-2: #ff9;
--color-brand-purple-4: #6449f2;
--font-size-2: 1.1rem;
--font-handwritten: Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;
--color-brand-purple-3: #9580ff;
--radius-blob-10: 74% 82% 48% 29% / 25% 65% 100% 97%;
--color-brand-lime-3: #ade500;
--color-brand-dark-6: #000;
--radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
--color-brand-light-4: #e4e4e4;
--size-relative-8: 3ch;
--color-brand-red-3: #ff7e81;
--radius-drawn-6: 28px 100px 20px 15px/150px 30px 205px 225px;
--color-brand-yellow-3: #ffff29;
--color-brand-lime-1: #e6ff9a;
--size-px-00: -4px;
--size-6: 1.75rem;
--color-brand-blue-1: #e1e8ff;
--size-15: 30rem;
--color-brand-sky-4: #2897ff;
--color-brand-purple-1: #ece8ff;
--font-size-fluid-0: clamp(.75rem,2vw,1rem);
--font-old-style: Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;
--font-size-8: 3.5rem;
--shadow-strength: 1%;
--size-content-1: 20ch;
--size-content-2: 45ch;
--border-size-3: 5px;
--font-system-ui: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
--font-weight-9: 900;
--font-letterspacing-1: .025em;
--font-lineheight-2: 1.375;
--color-tertiary: #ff7e81;
--color-brand-rose-4: #ff3265;
}Drop-in prompt
Build a landing page in the visual style of Glitch.
Reference design system (extracted from the live site):
- Palette: #3a12f3, #09766f, #a874f2, #bc6e64, #a7d3d4
- Typefaces: InterVariable
- 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/glitch-com