Loewe
Photographic
Loading
Outdoorvoices
Ethereal forest stillness: muted blues and greens, clean sans-serif, expansive, airy space.
Click any value to copy. Roles are suggestions, not gospel.
- #2c54acoklch(46.8% 0.148 263)Dominant
- #1b3369oklch(33.5% 0.099 264)Surface
- #debeaaoklch(82.4% 0.046 54)Ink
- #917568oklch(58.6% 0.040 46)Accent
- #b1b7c5oklch(77.9% 0.021 267)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | NordiquePro | 80px | 400 | 1.1 | 0.6px | Aa Bb Cc |
| h2 | TTCommonsPro | 24px | 400 | 1.25 | 0.6px | Aa Bb Cc |
| h3 | TTCommonsPro | 36px | 400 | 1.2 | -1.53px | Aa Bb Cc |
| body | Times | 16px | 400 | 1.67 | -0.16px | Aa Bb Cc |
| button | TTCommonsPro | 16px | 400 | 0 | -2% | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2c54ac;
--color-surface: #1b3369;
--color-ink: #debeaa;
--color-accent: #917568;
--color-detail: #b1b7c5;
}
/* CSS variables exposed by source */
:root {
--space-16: 16px;
--color-dark-grey-80: #737373cc;
--font-block-quote-size: 24px;
--font-heading-xl: normal 400 100px / 1.1 "TTCommonsPro";
--font-body-serif-italic-3: italic 400 14px / 1.4 "TTCommonsPro";
--font-body-serif-italic-1-letter-spacing: -0.01em;
--font-block-quote-style: italic;
--font-caption-xs-line-height: 1.2;
--font-body-serif-3-weight: 400;
--font-heading-5: normal 400 48px / 1.2 "TTCommonsPro";
--space-40: 40px;
--font-body-serif-italic-1-size: 17px;
--space-65: 65px;
--font-heading-8-style: normal;
--font-heading-8: normal 400 24px / 1.25 "TTCommonsPro";
--font-block-quote-letter-spacing: -0.06em;
--font-caption-xs-style: normal;
--font-subheading-3-letter-spacing: .015em;
--space-200: 200px;
--space-70: 70px;
--font-body-sans-2-size: 14px;
--font-heading-xl-line-height: 1.1;
--font-heading-7-text-transform: none;
--font-heading-xl-letter-spacing: -0.0425em;
--space-5: 5px;
--font-utility-2-size: 14px;
--color-white: #fff;
--font-heading-6-style: normal;
--font-heading-6-letter-spacing: -0.0425em;
--font-body-serif-3-style: normal;
--font-body-serif-1-family: "TTCommonsPro";
--font-heading-6-weight: 400;
--space-15: 15px;
--font-body-serif-2: normal 400 16px / 1.4 "TTCommonsPro";
--font-heading-3: normal 400 60px / 1.15 "TTCommonsPro";
--font-body-serif-italic-3-line-height: 1.4;
--space-60: 60px;
--font-body-serif-italic-1: italic 400 17px / 1.4 "TTCommonsPro";
--space-18: 18px;
--font-body-serif-italic-1-text-transform: none;
--font-heading-5-letter-spacing: -0.0425em;
--font-body-sans-2-line-height: 1.4;
--font-body-sans-underline-text-underline-offset: .2em;
--font-body-serif-2-style: normal;
--font-body-sans-1: normal 500 16px / 1.4 "TTCommonsPro";
--font-body-serif-italic-3-text-transform: none;
--space-150: 150px;
--font-body-serif-2-text-transform: none;
--font-subheading-1-style: normal;
--font-body-sans-strikethrough-text-decoration-thickness: .1em;
--font-heading-8-weight: 400;
--space-24: 24px;
--font-heading-7: normal 400 30px / 1.25 "TTCommonsPro";
--font-body-serif-italic-3-family: "TTCommonsPro";
--font-heading-3-weight: 400;
--font-body-sans-2-style: normal;
--color-extra-light-grey: #f8f8f8;
--font-utility-2-weight: 500;
--font-heading-1-style: normal;
--font-utility-2-style: normal;
}Drop-in prompt
Build a landing page in the visual style of Outdoorvoices.
Reference design system (extracted from the live site):
- Palette: #2c54ac, #1b3369, #debeaa, #917568, #b1b7c5
- Typefaces: NordiquePro, TTCommonsPro, Times
- Macrostructure: Photographic
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/outdoorvoices-com--pages-techsweat
