Designstudio
Portfolio Grid
Loading
Stinkstudios
Bold, gestural brushstrokes on a vibrant, textured canvas of playful, raw energy.
Click any value to copy. Roles are suggestions, not gospel.
- #d2961eoklch(71.4% 0.141 78)Dominant
- #1f3469oklch(33.9% 0.096 265)Surface
- #f1c4acoklch(85.4% 0.061 50)Ink
- #b6789foklch(64.9% 0.093 342)Accent
- #d0d0acoklch(84.8% 0.048 107)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Helvetica | 23px | 700 | 0.9 | -0.69px | Aa Bb Cc |
| h3 | Helvetica | 23px | 700 | 1.3 | -0.69px | Aa Bb Cc |
| body | Helvetica | 16px | 300 | 1 | 0 | Aa Bb Cc |
| button | Helvetica | 52px | 300 | 1.15 | -2.08px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d2961e;
--color-surface: #1f3469;
--color-ink: #f1c4ac;
--color-accent: #b6789f;
--color-detail: #d0d0ac;
}
/* CSS variables exposed by source */
:root {
--spacing-4: 60px;
--spacing-1: 10px;
--spacing-5: 120px;
--secondary-rgb: 255,255,255;
--spacing-5-5: 180px;
--primary-rgb: 0,0,0;
--spacing-3: 30px;
--primary: #000;
--spacing-6: 240px;
--secondary: #fff;
--spacing-2: 20px;
--vh: 9px;
--grid-margin-size: 20px;
--sans-serif: "Helvetica",sans-serif;
--error: #fa0000;
--serif: "Times New Roman",serif;
--grid-gutter-size: 20px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-top: 0px;
--grid-number-of-columns: 12;
}Drop-in prompt
Build a landing page in the visual style of Stinkstudios.
Reference design system (extracted from the live site):
- Palette: #d2961e, #1f3469, #f1c4ac, #b6789f, #d0d0ac
- Typefaces: Helvetica
- Macrostructure: Portfolio 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/stinkstudios-com
