Hermanmiller
Bento Grid
Loading
Nanor - Soy wax scented candles made in Canada – Nanor Collection
Soft blush gradients, delicate sans-serif whispers across airy, spacious forms.
Click any value to copy. Roles are suggestions, not gospel.
- #dc5d26oklch(63.2% 0.172 41)Dominant
- #eb9881oklch(75.8% 0.106 36)Surface
- #ae4d2eoklch(54.0% 0.135 38)Ink
- #af8f8eoklch(67.9% 0.039 20)Accent
- #d4b5b8oklch(80.1% 0.036 11)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lato | 34px | 400 | 0 | 0.51px | Aa Bb Cc |
| h2 | Lato | 24px | 400 | 1.3 | 0.51px | Aa Bb Cc |
| h3 | Lato | 17px | 400 | 1.3 | 0.51px | Aa Bb Cc |
| body | Lato | 16px | 400 | 1.8 | 0.6px | Aa Bb Cc |
| caption | Lato | 12px | 400 | 1.7 | 0.7px | Aa Bb Cc |
| button | Lato | 12px | 600 | 1.2 | 3px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dc5d26;
--color-surface: #eb9881;
--color-ink: #ae4d2e;
--color-accent: #af8f8e;
--color-detail: #d4b5b8;
}
/* CSS variables exposed by source */
:root {
--color-keyboard-focus: 1, 94, 204;
--color-overlay: 33, 35, 38;
--shadow-opacity: 1;
--font-heading-scale: 0.85;
--font-heading-style: normal;
--font-button-size: 14px;
--font-navigation-family: Lato, sans-serif;
--color-base-accent: 255, 255, 255;
--color-price: #1a1b18;
--font-button-family: Lato, sans-serif;
--color-shadow: 168, 232, 226;
--color-placeholder: 243, 243, 243;
--color-success: #008060;
--spacing-sections-desktop: 0px;
--color-base-heading: 26, 27, 24;
--color-badge-foreground: rgb(33, 35, 38);
--color-reviews: #ffb503;
--font-navigation-size: 13px;
--font-body-style: normal;
--font-body-family: Lato, sans-serif;
--font-body-weight: 400;
--color-critical: #d72c0d;
--color-base-background: 255, 255, 255;
--color-base-text: 33, 35, 38;
--font-button-baseline: 0rem;
--color-base-outline-button-labels: 26, 27, 24;
--color-sale-price: #d72c0d;
--color-background: 255, 255, 255;
--color-badge-background: rgba(255, 255, 255, .75);
--color-border: 210, 213, 217;
--font-heading-family: Lato, sans-serif;
--color-button-text: 33, 35, 38;
--color-foreground: 33, 35, 38;
--color-heading: 26, 27, 24;
--font-body-scale: 1.0;
--font-heading-weight: 300;
--spacing-sections-mobile: 0px;
--color-background-dark: 235, 235, 235;
--color-button-background: 255, 255, 255;
--color-base-solid-button-labels: 33, 35, 38;
--color-button-border: 255, 255, 255;
--color-link: 26, 27, 24;
--color-badge-border: rgb(210, 213, 217);
--header-height: 163px;
--card-shadow-horizontal-offset: 0px;
--button-border-width: 2px;
--duration-long: .5s;
--page-width-margin: 0rem;
--button-shadow-horizontal-offset: 0px;
--card-radius: 0px;
--announcement-bar-height: 40px;
--be-yours-version: "5.1.0";
--card-color-scheme: 243, 243, 243;
--card-text-alignment: start;
--button-radius: 0px;
--card-shadow-vertical-offset: 0px;
--card-image-padding: 0px;
--page-width: 160rem;
--button-shadow-vertical-offset: 0px;
--payment-terms-background-color: #ffffff;
}Drop-in prompt
Build a landing page in the visual style of Nanor - Soy wax scented candles made in Canada – Nanor Collection.
Reference design system (extracted from the live site):
- Palette: #dc5d26, #eb9881, #ae4d2e, #af8f8e, #d4b5b8
- Typefaces: Lato, Arial
- 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/nanorcollection-com
