Cooking Nytimes
Bento Grid
Loading
Codrops | Fueling web creativity since 2009
Quiet, technical expanse: soft blue gradients, clean sans-serif, generous horizontal breathing room.
Click any value to copy. Roles are suggestions, not gospel.
- #0b0cf1oklch(43.9% 0.296 265)Dominant
- #74d6fboklch(83.0% 0.106 225)Surface
- #80471coklch(45.9% 0.096 54)Ink
- #7d5ca1oklch(53.8% 0.110 305)Accent
- #cab7a6oklch(79.1% 0.032 64)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | InterVariable | 32px | 600 | 1 | -0.8px | Aa Bb Cc |
| h2 | InterVariable | 18px | 600 | 1.3 | -0.46px | Aa Bb Cc |
| h3 | AlphaLyrae | 25px | 600 | 1 | -0.6252px | Aa Bb Cc |
| body | InterVariable | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0b0cf1;
--color-surface: #74d6fb;
--color-ink: #80471c;
--color-accent: #7d5ca1;
--color-detail: #cab7a6;
}
/* CSS variables exposed by source */
:root {
--color-text-input: #26272e;
--color-button-pop-border-hover: transparent;
--color-bg-alt: #e8e8e8;
--color-demotag-bg-hover: #e0e0e0;
--color-bg: #f7f7f7;
--color-title: #26272e;
--color-sep: #ddd;
--color-bg-box-highlight: #fbf9e1;
--color-casestudy: #d9d9d9;
--color-tagstyle-border: rgb(0 0 0 / 20%);
--color-button-alt-border-hover: transparent;
--color-widget-link: #000;
--font-size-base: 1rem;
--font-size-tiny: 0.667rem;
--color-button-alt-text-hover: #ffffff;
--color-button-bg-hover: #485ae1;
--color-demotag-text: #555;
--color-text-faded: #858585;
--color-widget-text: #2c2c2c;
--color-button-alt-border: #1e1e20;
--color-plumbob-link: #ffffff;
--color-button-border-hover: transparent;
--color-button-text: #fff;
--color-plumbob-text: #ffffff;
--color-demotag-bg: #f0f0f0;
--font-size-xs: 0.875rem;
--color-button-border: transparent;
--color-button-alt-bg: transparent;
--font-size-l: 1.563rem;
--color-title-demo: #fff;
--color-bg-box-info: #e8e8e8;
--color-plumbob-bg: transparent;
--color-button-alt-bg-hover: #1e1e20;
--color-button-alt-text: #1e1e20;
--font-size-s: 1.15rem;
--color-button-pop-text: #fff;
--color-widget-bg: #fff;
--color-widget-link-hover: #2c2c2c;
--font-size-xxs: 0.75rem;
--color-card-bg: #fff;
--color-logo-credits: #26272e;
--color-button-text-hover: #fff;
--color-brand: #485ae1;
--color-plumbob-link-hover: #ffffff;
--color-logo: #000;
--color-button-pop-bg: #485ae1;
--color-button-pop-bg-hover: #1e1e20;
--font-size-xl: 1.953rem;
--color-code: #61626a;
--color-tag-bg: #e6e6e6;
--color-text: #26272e;
--font-size-xxl: 2.441rem;
--font-size-poster: clamp(2.441rem, 7vw, 5rem);
--color-button-bg: #000;
--color-button-pop-text-hover: #fff;
--color-loader: #b9b9b9;
--color-tagstyle-text: rgb(0 0 0 / 75%);
--color-tag-text: #555;
--color-button-pop-border: transparent;
--color-link-hover: #47484e;
}Drop-in prompt
Build a landing page in the visual style of Codrops | Fueling web creativity since 2009.
Reference design system (extracted from the live site):
- Palette: #0b0cf1, #74d6fb, #80471c, #7d5ca1, #cab7a6
- Typefaces: InterVariable
- 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/tympanus-net
