Cooking Nytimes
Bento Grid
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #f00e0eoklch(60.3% 0.243 29)Dominant
- #f78181oklch(73.6% 0.145 21)Surface
- #430404oklch(24.6% 0.093 28)Ink
- #7c7c7coklch(58.6% 0.000 90)Accent
- #dcdcdcoklch(89.4% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | StandardCT | 19px | 700 | 1.25 | 0 | Aa Bb Cc |
| h2 | StandardCT | 19px | 700 | 1.38 | 0 | Aa Bb Cc |
| h3 | StandardCT | 19px | 700 | 1.25 | 0 | Aa Bb Cc |
| body | Chronicle Text G1 A | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
| button | StandardCT | 19px | 700 | 1 | 0 | Aa Bb Cc |
Max content width 852px
:root {
--color-dominant: #f00e0e;
--color-surface: #f78181;
--color-ink: #430404;
--color-accent: #7c7c7c;
--color-detail: #dcdcdc;
}
/* CSS variables exposed by source */
:root {
--awards-branding-color: #FAA61A;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-border-width-focus: 2px;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-theme-color-darker-10: #006ba1;
--black: #000;
--wp-block-synced-color--rgb: 122,0,223;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-bound-block-color: #7a00df;
--wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer.";
--white: #fff;
--wp--preset--font-size--huge: 42px;
--wp-block-synced-color: #7a00df;
--wp--preset--font-size--normal: 16px;
--hpto-header-gap: 140px;
}Drop-in prompt
Build a landing page in the visual style of Dezeen | architecture and design magazine.
Reference design system (extracted from the live site):
- Palette: #f00e0e, #f78181, #430404, #7c7c7c, #dcdcdc
- Typefaces: StandardCT, Chronicle Text G1 A, Times
- 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/dezeen-com
