Cooking Nytimes
Bento Grid
Soft coral and warm peach hues, playful sans-serifs float on airy white space.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Pin Sans | 28px | 700 | 1.1 | -0.5px | Aa Bb Cc |
| h2 | Pin Sans | 16px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | Pin Sans | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Pin Sans | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #de0520;
--color-surface: #864022;
--color-ink: #f1994c;
--color-accent: #749c50;
--color-detail: #cbc793;
}
/* CSS variables exposed by source */
:root {
--comp-button-color-text-transparent-disabled: #91918c;
--base-color-green-700: #103c25;
--sema-color-hover-icon-performance-plus: #6845ab;
--base-color-hover-grayscale-translucent-500: #181816;
--sema-color-dataviz-neutral: #878682;
--base-color-hover-green-700: #0b2819;
--comp-attribution-color-pressed-text-sponsored-label: #474742;
--comp-bannerslim-color-text-body-warning-expanded: #000;
--sema-motion-bezier-duration-600: 600ms;
--comp-buttontoggle-color-icon-default-disabled-strong: #91918c;
--sema-elevation-shadow-raised-shadow-spread: 0px;
--comp-badge-border-width-focus-inner: 2px;
--sema-rounding-300: 12px;
--comp-radiobutton-border-width-container-disabled-selected: 0px;
--comp-segmentedcontrol-color-pressed-background-segment-selected: #33332e;
--base-font-lineheight-170: 1.7;
--comp-buttontoggle-color-pressed-border-image-inner-enabled-subtle: #fff;
--sema-color-pressed-border-light-interactive: #787873;
--sema-color-hover-background-wash-50-inverse: rgba(24,24,22,.5);
--sema-space-negative-1300: -52px;
--comp-bannerslim-rounding-compact: 0px;
--sema-color-hover-text-recommendation: #7e238b;
--comp-iconbuttonsocial-color-background-container-samsung-messages-gradient-from-position: 0;
--base-color-pressed-grayscale-0: #efefeb;
--base-color-hover-grayscale-150: #bcbcb3;
--base-color-green-100: #c7f0da;
--comp-buttontoggle-color-hover-background-default-enabled-strong: #262622;
--sema-color-background-elevated-wash-70-default: hsla(60,20%,98%,.7);
--comp-buttontoggle-border-width-pressed-default-enabled-strong: 0px;
--sema-color-pressed-background-recommendation-weak: #f8b8ff;
--sema-rounding-200: 8px;
--sema-color-pressed-icon-info: #1e3dd7;
--comp-checkbox-border-width-container-disabled-checked: 0px;
--comp-switch-size-width-handle-enabled-off: 22px;
--comp-spinner-color-background-3: #22a596;
--comp-button-color-hover-background-secondary-default: #dadad3;
--comp-buttontoggle-color-pressed-icon-default-enabled-deselected: #000;
--sema-color-pressed-background-info-weak: #b8c2ff;
--comp-radiobutton-color-pressed-background-container-default-deselected: #fff;
--comp-searchguide-color-hover-background-blue-weak-default: #c2ccff;
--comp-buttontoggle-border-width-hover-image-outer-enabled-deselected: 1px;
--comp-iconbuttonsocial-color-pressed-border-container-kakao-talk: hsla(0,0%,100%,0);
--sema-color-hover-icon-warning: #cf5606;
--comp-radiobutton-border-width-pressed-container-disabled-deselected: 0px;
--comp-iconbuttonsocial-color-pressed-border-container-snap: hsla(0,0%,100%,0);
--comp-bannerslim-color-border-info-expanded: hsla(0,0%,100%,0);
--comp-iconbuttonsocial-color-pressed-border-container-email: #b0b0a6;
--sema-color-icon-subtle: #62625b;
--comp-buttontoggle-color-pressed-border-default-enabled-strong: hsla(0,0%,100%,0);
--comp-iconbuttonsocial-color-icon-pinterest: #fff;
--comp-buttontoggle-border-width-default-enabled-deselected: 0px;
--sema-color-pressed-border-dark-decorative: #2d2d29;
--base-color-hover-grayscale-450: #181816;
--comp-button-color-text-light-disabled: #91918c;
--comp-switch-color-hover-background-container-enabled-on: #2c4be2;
--comp-buttontoggle-color-border-save-enabled-deselected: hsla(0,0%,100%,0);
--comp-attribution-color-hover-text-sponsored-label: #55554f;
--base-color-grayscale-400: #33332e;
--sema-color-background-tertiary: #74746c;
--comp-buttontoggle-color-border-save-disabled-deselected: hsla(0,0%,100%,0);
}Drop-in prompt
Build a landing page in the visual style of Pinterest.
Reference design system (extracted from the live site):
- Palette: #de0520, #864022, #f1994c, #749c50, #cbc793
- Typefaces: Pin Sans
- Macrostructure: Bento 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/pinterest-com