Inkfish
Split Studio
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #d4fc64oklch(93.4% 0.182 122)Dominant
- #c8f164oklch(90.2% 0.173 124)Surface
- #7b221boklch(39.3% 0.124 29)Ink
- #95a258oklch(68.5% 0.100 117)Accent
- #bf908doklch(69.7% 0.057 23)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | UntitledSans-Regular | 48px | 400 | 1 | -0.48px | Aa Bb Cc |
| h2 | UntitledSans-Regular | 32px | 400 | 1.1 | -0.32px | Aa Bb Cc |
| h3 | Offbit-Bold | 24px | 400 | 1 | 0.8px | Aa Bb Cc |
| body | UntitledSans-Regular | 16px | 400 | 1 | -0.16px | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d4fc64;
--color-surface: #c8f164;
--color-ink: #7b221b;
--color-accent: #95a258;
--color-detail: #bf908d;
}
/* CSS variables exposed by source */
:root {
--border: rgba(28, 28, 28);
--primary-light: rgba(251, 250, 243);
--primary-dark: rgba(28, 28, 28);
--primary-dark-hover: rgba(103, 116, 131);
--primary-dark-alt: rgb(44, 44, 44);
--highlight-hover: #add05b;
--muted: rgba(233, 229, 219);
--highlight: #d0fa66;
--radio: #e94736;
--process: rgb(253, 235, 101);
--button-primary: rgba(28, 28, 28);
--muted-hover: rgb(201, 195, 177);
--offwhite: rgba(233, 229, 219, 0.5);
--medium: rgb(81, 90, 99);
}Drop-in prompt
Build a landing page in the visual style of NoGood.
Reference design system (extracted from the live site):
- Palette: #d4fc64, #c8f164, #7b221b, #95a258, #bf908d
- Typefaces: UntitledSans-Regular, Arial
- Macrostructure: Split Studio
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/nogood-studio
