Commercialtype
Type Specimen
Loading
Displaay
Crisp, cool geometry—a vibrant lime field of clean sans serif on stark, white space.
Click any value to copy. Roles are suggestions, not gospel.
- #0af40aoklch(83.8% 0.284 143)Dominant
- #057e05oklch(51.5% 0.173 143)Surface
- #bcfcbcoklch(93.2% 0.107 145)Ink
- #728972oklch(60.5% 0.043 145)Accent
- #a4d49coklch(82.2% 0.092 141)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Saans | 44px | 600 | 0.9 | -1.1px | Aa Bb Cc |
| h3 | Saans | 28px | 400 | 1.1 | -0.28px | Aa Bb Cc |
| body | Saans | 15px | 400 | 1.3 | 0.3px | Aa Bb Cc |
| button | Saans | 15px | 400 | 1.3 | 0.3px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0af40a;
--color-surface: #057e05;
--color-ink: #bcfcbc;
--color-accent: #728972;
--color-detail: #a4d49c;
}
/* CSS variables exposed by source */
:root {
--text-smXl--line-height: 110%;
--color-notification: #ffff3c;
--text-m--font-weight: 400;
--text-xs--font-weight: 400;
--text-body: 1.5rem;
--text-l--font-weight: 400;
--color-menthol: #b8fbff;
--text-body--letter-spacing: .3px;
--color-hint-gray: #b6b6b6;
--text-xl--letter-spacing: -.96px;
--text-x--letter-spacing: .01em;
--radius-none: 0;
--text-smS: 1.4rem;
--text-smXs--font-weight: 400;
--text-smSaansL--line-height: 115%;
--color-notify: #ffdcdc;
--font-overals: "DPOverals";
--color-orange: #ff6e00;
--text-smXl--font-weight: 400;
--text-x: 1.9rem;
--text-smSaansL--font-weight: 400;
--text-l: 2.8rem;
--text-smM--font-weight: 400;
--color-white: #fff;
--text-smX--letter-spacing: .01em;
--color-green-dark: #317934;
--color-submenu: #e3e3e3;
--text-s--font-weight: 400;
--text-s: 1.5rem;
--color-alert: #ff351a;
--radius-sm: .2rem;
--text-smL--letter-spacing: -.28px;
--font-sans: "Saans","Helvetica","Arial",sans-serif;
--font-weight-bold: 700;
--text-s--line-height: 130%;
--color-bg-gray: #d9d9d9;
--text-l--letter-spacing: -.28px;
--color-red: #ffdcdc;
--color-test: #2044ff;
--text-xs--line-height: 130%;
--color-green: #beffbd;
--color-account-black: #8b7340;
--color-blue: #000dff;
--text-smM--line-height: 115%;
--text-smL--line-height: 110%;
--radius-base: .8rem;
--text-l--line-height: 110%;
--radius-2xl: 5rem;
--color-paper: #f2f0e6;
--radius-md: 1rem;
--radius-lg: 2rem;
--text-xl: 4.8rem;
--text-xs--letter-spacing: .02em;
--text-smS--font-weight: 400;
--text-smXs--line-height: 130%;
--text-smSaansL: 2.2rem;
--color-paper-dark: #e0ddcf;
--text-m: 2.1rem;
--text-smX--line-height: 115%;
--color-currentColor: currentColor;
}Drop-in prompt
Build a landing page in the visual style of Displaay.
Reference design system (extracted from the live site):
- Palette: #0af40a, #057e05, #bcfcbc, #728972, #a4d49c
- Typefaces: Saans
- 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/displaay-net--typefaces
