namespace : concept + design + code home - namespace
Type Specimen
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #4b63beoklch(52.8% 0.145 270)Dominant
- #9caad4oklch(74.2% 0.063 270)Surface
- #462513oklch(30.4% 0.058 48)Ink
- #837562oklch(57.0% 0.033 75)Accent
- #ccc9caoklch(83.9% 0.004 355)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Perfectly Nineties | 120px | 500 | 1.1 | -0.75px | Aa Bb Cc |
| h2 | Perfectly Nineties | 64px | 500 | 1.2 | -0.8px | Aa Bb Cc |
| h3 | Perfectly Nineties | 64px | 500 | 1.2 | -0.8px | Aa Bb Cc |
| body | Arial | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Neue Montreal | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
:root {
--color-dominant: #4b63be;
--color-surface: #9caad4;
--color-ink: #462513;
--color-accent: #837562;
--color-detail: #ccc9ca;
}
/* CSS variables exposed by source */
:root {
--spacing--5: 5rem;
--font-size--m: 64px;
--font-size--l: 120px;
--spacing--025: .25rem;
--spacing--6: 6rem;
--spacing--4: 4rem;
--spacing--05: .5rem;
--font-size--xs: 32px;
--colors--brand-color: #002bba;
--font-size--s: 48px;
--font-size--copy-18: 18px;
--spacing--10: 10rem;
--spacing--3: 3rem;
--spacing--2: 2rem;
--font-size--copy-16: 14px;
--spacing--8: 8rem;
--spacing--1: 1rem;
--spacing--0: 0rem;
--spacing--9: 9rem;
--colors--black: #121212;
--spacing--7: 7rem;
--colors--white: #fbfbfb;
--font-size--xxs: 24px;
--width--40: 40rem;
--vh: 9px;
--width--15: 15rem;
--grey: #9b9b9b;
--width--20: 20rem;
--main-light: white;
--width--80: 80rem;
--width--100: 100%;
--swiper-navigation-size: 44px;
--width--30: 30rem;
--width--45: 45rem;
--width--50: 50rem;
--width--65: 65rem;
--main-dark: black;
--pure-white: #fff;
--width--60: 60rem;
--width--25: 25rem;
--width--55: 55rem;
--width--70: 70rem;
--width--35: 35rem;
--swiper-theme-color: #007aff;
--width--75: 75rem;
}Drop-in prompt
Build a landing page in the visual style of Double Play GmbH.
Reference design system (extracted from the live site):
- Palette: #4b63be, #9caad4, #462513, #837562, #ccc9ca
- Typefaces: Perfectly Nineties, Arial
- Macrostructure: Type 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/doubleplay-studio
