Kidzfrmnowhere
Bento Grid
Loading
basement.studio | We make cool shit that performs.
Deep charcoal concrete, stark geometric type, and glowing neon accents evoke a tech-noir atmosphere.
Click any value to copy. Roles are suggestions, not gospel.
- #a82c15oklch(48.6% 0.164 33)Dominant
- #cd8656oklch(68.3% 0.108 54)Surface
- #5e1408oklch(32.0% 0.108 32)Ink
- #91674foklch(55.1% 0.065 51)Accent
- #c4c4c4oklch(82.0% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Geist | 87px | 600 | 0.9 | -3.48px | Aa Bb Cc |
| h2 | Geist | 24px | 600 | 1 | -0.72px | Aa Bb Cc |
| h3 | Geist | 20px | 600 | 1 | -0.4px | Aa Bb Cc |
| body | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a82c15;
--color-surface: #cd8656;
--color-ink: #5e1408;
--color-accent: #91674f;
--color-detail: #c4c4c4;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--leva-sizes-checkboxSize: 16px;
--leva-borderWidths-active: 1px;
--leva-colors-highlight3: #fefefe;
--leva-radii-sm: 3px;
--tw-ring-shadow: 0 0 #0000;
--leva-fontWeights-folder: normal;
--leva-radii-lg: 10px;
--leva-sizes-joystickHeight: 100px;
--leva-colors-elevation1: #292d39;
--leva-colors-folderTextColor: #fefefe;
--leva-fontSizes-root: 11px;
--leva-space-colGap: 7px;
--leva-colors-accent1: #0066dc;
--leva-colors-elevation2: #181c20;
--leva-fonts-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
--leva-space-md: 10px;
--tw-border-spacing-x: 0;
--leva-radii-xs: 2px;
--tw-scale-y: 1;
--leva-colors-folderWidgetColor: #8c92a4;
--tw-ring-color: #3b82f680;
--leva-colors-accent2: #007bff;
--leva-sizes-colorPickerWidth: 160px;
--leva-colors-highlight2: #8c92a4;
--tw-translate-y: 0;
--leva-sizes-rootWidth: 280px;
--leva-sizes-joystickWidth: 100px;
--tw-rotate: 0;
--leva-sizes-scrubberWidth: 8px;
--leva-fontWeights-button: normal;
--tw-ring-offset-color: #fff;
--leva-borderWidths-hover: 1px;
--leva-colors-elevation3: #373c4b;
--tw-skew-x: 0;
--leva-sizes-folderTitleHeight: 20px;
--leva-colors-highlight1: #535760;
--leva-shadows-level2: 0 4px 14px #00000033;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--leva-colors-toolTipBackground: #fefefe;
--tw-ring-offset-width: 0px;
--leva-sizes-titleBarHeight: 39px;
--leva-borderWidths-root: 0px;
--leva-sizes-scrubberHeight: 16px;
--tw-scroll-snap-strictness: proximity;
--leva-borderWidths-focus: 1px;
--leva-colors-toolTipText: #181c20;
--leva-fontWeights-label: normal;
--tw-scale-x: 1;
--leva-space-sm: 6px;
--leva-sizes-imagePreviewWidth: 160px;
--leva-sizes-rowHeight: 24px;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--leva-colors-vivid1: #ffcc00;
--leva-fontSizes-toolTip: 11px;
--leva-colors-accent3: #3c93ff;
--leva-sizes-colorPickerHeight: 100px;
--tw-skew-y: 0;
}Drop-in prompt
Build a landing page in the visual style of basement.studio | We make cool shit that performs..
Reference design system (extracted from the live site):
- Palette: #a82c15, #cd8656, #5e1408, #91674f, #c4c4c4
- Typefaces: Geist
- 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/basement-studio
