basement.studio | We make cool shit that performs.
Bento Grid
Loading
Svix
Deep indigo expanse, clean sans-serif geometry, playful icon clusters floating weightlessly.
Click any value to copy. Roles are suggestions, not gospel.
- #2d6ff4oklch(57.9% 0.211 262)Dominant
- #1c1c43oklch(25.1% 0.072 280)Surface
- #8cb4fcoklch(76.9% 0.113 262)Ink
- #4e9aa6oklch(64.2% 0.077 209)Accent
- #c0c2cdoklch(81.6% 0.015 278)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | grotesk | 64px | 500 | 1.1 | -0.48px | Aa Bb Cc |
| h2 | grotesk | 18px | 400 | 1.5 | 0 | Aa Bb Cc |
| h3 | grotesk | 20px | 500 | 1.5 | -0.16px | Aa Bb Cc |
| body | Times | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | grotesk | 14px | 500 | 1.5 | 0 | Aa Bb Cc |
| button | grotesk | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1140px
:root {
--color-dominant: #2d6ff4;
--color-surface: #1c1c43;
--color-ink: #8cb4fc;
--color-accent: #4e9aa6;
--color-detail: #c0c2cd;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-text-opacity: 1;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: #3b82f680;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Svix.
Reference design system (extracted from the live site):
- Palette: #2d6ff4, #1c1c43, #8cb4fc, #4e9aa6, #c0c2cd
- Typefaces: grotesk, Times
- 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/svix-com
