Teenageengineering
Specimen
Loading
KVS Studio - Product Design & Creative Development
Monochrome, stark digital expanse - geometric forms carved from cool, echoing space.
Click any value to copy. Roles are suggestions, not gospel.
- #eab412oklch(79.7% 0.160 86)Dominant
- #f5d983oklch(89.0% 0.110 92)Surface
- #7b5e09oklch(49.8% 0.099 87)Ink
- #6c746eoklch(55.0% 0.013 153)Accent
- #c6989aoklch(72.3% 0.055 16)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | SF Mono | 14px | 500 | 1.4 | -0.35px | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | SF Mono | 14px | 600 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #eab412;
--color-surface: #f5d983;
--color-ink: #7b5e09;
--color-accent: #6c746e;
--color-detail: #c6989a;
}
/* CSS variables exposed by source */
:root {
--color-white: #fff;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-weight-bold: 700;
--color-black: #000;
--font-weight-medium: 500;
--spacing: .25rem;
--font-weight-normal: 400;
--font-mono: "SF Mono", monospace;
--font-weight-semibold: 600;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-gradient-from: rgba(0, 0, 0, 0);
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--tw-gradient-to: rgba(0, 0, 0, 0);
--tw-shadow-alpha: 100%;
--leading-relaxed: 1.625;
--tw-drop-shadow-alpha: 100%;
--tracking-tighter: -.05em;
--tw-border-style: solid;
--tw-scale-z: 1;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-gradient-via-position: 50%;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--tw-scroll-snap-strictness: proximity;
--default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--tracking-widest: .1em;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-scale-x: 1;
--tw-translate-z: 0;
--tw-gradient-to-position: 100%;
--tw-gradient-via: rgba(0, 0, 0, 0);
--tw-scale-y: 1;
--default-transition-duration: .15s;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--tw-translate-y: 0;
--ease-out: cubic-bezier(0, 0, .2, 1);
--tw-gradient-from-position: 0%;
--default-mono-font-family: "SF Mono", monospace;
--tw-inset-shadow: 0 0 #0000;
--tracking-tight: -.025em;
}Drop-in prompt
Build a landing page in the visual style of KVS Studio - Product Design & Creative Development.
Reference design system (extracted from the live site):
- Palette: #eab412, #f5d983, #7b5e09, #6c746e, #c6989a
- Typefaces: SF Mono, ui-sans-serif
- Macrostructure: Specimen
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/kvs-services
