Nanor - Soy wax scented candles made in Canada – Nanor Collection
Bento Grid
Loading
Sustainable Shoes Made From Nature • Make Good®
Soft, muted lavender washes over clean, geometric type on spacious, airy depths.
Click any value to copy. Roles are suggestions, not gospel.
- #2e89bcoklch(60.0% 0.114 238)Dominant
- #b4ace4oklch(77.1% 0.080 291)Surface
- #2f577foklch(44.6% 0.080 250)Ink
- #607887oklch(55.9% 0.036 236)Accent
- #b2abd7oklch(76.2% 0.063 292)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Athletics | 16px | 900 | 1.1 | 0 | Aa Bb Cc |
| h2 | Athletics | 25px | 900 | 1.1 | 0 | Aa Bb Cc |
| h3 | Athletics | 20px | 900 | 1.5 | 0 | Aa Bb Cc |
| body | Athletics | 16px | 700 | 1.1 | 0 | Aa Bb Cc |
| caption | Athletics | 13px | 900 | 1.1 | 0 | Aa Bb Cc |
| button | Athletics | 16px | 700 | 1.1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2e89bc;
--color-surface: #b4ace4;
--color-ink: #2f577f;
--color-accent: #607887;
--color-detail: #b2abd7;
}
/* CSS variables exposed by source */
:root {
--secondary-heading-size: 1.563rem;
--color-scheme-accent-contrast: 255 255 255;
--font-body: "system_ui", -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--type-scale-n10: 9.313rem;
--type-scale-n3: 1.953rem;
--color-scheme-accent: 3 3 3;
--font-size-4xl: 3.052rem;
--type-scale-n-2: 0.64rem;
--color-gridline: 255 254 247;
--font-size-base: 1rem;
--type-scale-n2: 1.563rem;
--type-scale-n1: 1.25rem;
--font-size-8xl: 7.451rem;
--font-size-xs: 0.64rem;
--type-scale-n9: 7.451rem;
--font-size-7xl: 5.96rem;
--type-scale-n8: 5.96rem;
--font-heading: "system_ui", -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--type-scale-n0: 1rem;
--font-size-6xl: 4.768rem;
--font-size-sm: 0.8rem;
--font-size-2xl: 1.953rem;
--color-scheme-text: 3 3 3;
--spacing: 2rem;
--font-body-bold-weight: bold;
--spacing-double: 4rem;
--type-scale-n6: 3.815rem;
--type-scale-n4: 2.441rem;
--font-size-5xl: 3.815rem;
--font-body-style: normal;
--type-scale-n-1: 0.8rem;
--type-scale-n5: 3.052rem;
--font-body-weight: 400;
--font-size-xl: 1.563rem;
--font-size-3xl: 2.441rem;
--color-scheme-background: 255 254 247;
--text-border-width: 1px;
--font-size-lg: 1.25rem;
--color-scheme-secondary: 237 237 237;
--font-size-9xl: 9.313rem;
--spacing-half: 1rem;
--type-scale-n7: 4.768rem;
--heading-font-weight: 900;
--tw-ring-shadow: 0 0 #0000;
--wrapperWidth: 100vw;
--base-font-size-from-settings: 16;
--section-horizontal-spacing: 1rem;
--base-font-size: 100.0%;
--tw-border-spacing-x: 0;
--links-after-content: '\00a0\2192';
--icon-thickness: 1.5;
--heading-decoration: none;
--body-font-stack: "Athletics", "Helvetica Neue", Arial, sans-serif;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--section-horizontal-spacing-mobile: 0.5rem;
--heading-font-stack: "Athletics", "Helvetica Neue", Arial, sans-serif;
--tw-ring-offset-width: 0px;
--links-before-content: '\2190\00a0';
}Drop-in prompt
Build a landing page in the visual style of Sustainable Shoes Made From Nature • Make Good®.
Reference design system (extracted from the live site):
- Palette: #2e89bc, #b4ace4, #2f577f, #607887, #b2abd7
- Typefaces: Athletics
- 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/mk-gd
