Commercialtype
Type Specimen
Loading
Fontshare — Features
Soft, beige geometry—clean sans-serif whispers across expansive, airy stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #e5e519oklch(89.3% 0.191 110)Dominant
- #77770doklch(55.1% 0.116 110)Surface
- #fcfce4oklch(98.5% 0.031 107)Ink
- #848474oklch(60.9% 0.023 107)Accent
- #c8c6aaoklch(82.1% 0.038 104)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| body | Passenger-Sans | 10px | 400 | 1.15 | 0 | Aa Bb Cc |
:root {
--color-dominant: #e5e519;
--color-surface: #77770d;
--color-ink: #fcfce4;
--color-accent: #848474;
--color-detail: #c8c6aa;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--gray-d3-color: #191815;
--scrollbar-primary: #c0c0ab;
--theme-b-color: #FFFFE3;
--vh: 9px;
--gray-d2-color: #30302b;
--tw-ring-shadow: 0 0 #0000;
--vh100: 900;
--white-b-color: #FFFFE3;
--vw100: 1440;
--black-b-color: #10100e;
--padding: 4rem;
--scrollbar-bg: #FFFFE3;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--inverted-color: #FFFFE3;
--gray-l1-color: #e8e8cf;
--gray-b-color: #c0c0ab;
--current-color: #10100e;
--tw-shadow: 0 0 #0000;
--tw-ring-offset-width: 0px;
--gray-l2-color: #f8f8dd;
--scrollbar-primary-hover: #10100e;
--gray-d1-color: #606055;
--scrollbar-width: 0px;
--one-column: calc((calc(14.4px * 100) - 4rem * 2) / 8);
--vw: 14.4px;
}Drop-in prompt
Build a landing page in the visual style of Fontshare — Features.
Reference design system (extracted from the live site):
- Palette: #e5e519, #77770d, #fcfce4, #848474, #c8c6aa
- Typefaces: Passenger-Sans
- 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/fontshare-com--product
