Works Studio
Portfolio Grid
Loading
Thrilljockey
Quiet, textured paper - muted earth tones, precise sans serif, generous horizontal space.
Click any value to copy. Roles are suggestions, not gospel.
- #d03922oklch(57.0% 0.191 32)Dominant
- #047344oklch(48.9% 0.116 157)Surface
- #f4f4b2oklch(95.2% 0.084 108)Ink
- #6c9d84oklch(65.4% 0.065 162)Accent
- #e3d7c5oklch(88.4% 0.028 78)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | futura-pt | 19px | 700 | 1.5 | 0 | Aa Bb Cc |
| body | futura-pt | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | futura-pt | 14px | 700 | 1.43 | 0 | Aa Bb Cc |
| button | futura-pt | 30px | 400 | 1.2 | 0 | Aa Bb Cc |
:root {
--color-dominant: #d03922;
--color-surface: #047344;
--color-ink: #f4f4b2;
--color-accent: #6c9d84;
--color-detail: #e3d7c5;
}
/* 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-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(85,136,211,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Thrilljockey.
Reference design system (extracted from the live site):
- Palette: #d03922, #047344, #f4f4b2, #6c9d84, #e3d7c5
- Typefaces: futura-pt
- 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/thrilljockey-com
