Buly1803
Portfolio Grid
Loading
Fjallraven
Soft, muted greys and blues, clean sans-serif, spacious and subtly technical.
Click any value to copy. Roles are suggestions, not gospel.
- #206bddoklch(55.0% 0.189 259)Dominant
- #28160boklch(22.2% 0.035 51)Surface
- #ddb79aoklch(80.6% 0.059 59)Ink
- #a78260oklch(63.4% 0.066 64)Accent
- #d7ccb8oklch(84.9% 0.030 83)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Arctic Fox 08 | 58px | 900 | 1 | 0 | Aa Bb Cc |
| h3 | Arctic Fox 08 | 16px | 700 | 1.5 | 0.48px | Aa Bb Cc |
| body | Arctic Fox 08 | 16px | 400 | 1.5 | 0.48px | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #206bdd;
--color-surface: #28160b;
--color-ink: #ddb79a;
--color-accent: #a78260;
--color-detail: #d7ccb8;
}
/* CSS variables exposed by source */
:root {
--font-size-caption2: .8125rem;
--font-size-5: 1.25rem;
--space-padding-huge: 2.25rem;
--font-size-p: 1rem;
--color-interface-errorcolor: #cc1d1d;
--color-grays-gray400: #999999;
--color-text-textdisabledcolordark: #303030;
--color-interface-icon-iconcolor: #303030;
--color-label-colors-sale-yellow: #eda64d;
--border-radius-radius-md: 0.75rem;
--color-brands-primarybrandcolor: #cc1618;
--font-brands-secondary: Arctic Fox 08,sans-serif;
--color-accents-red-light: #fae8e8;
--color-interface-icon-iconhovercolor: #cc1618;
--color-interface-button-secondarybuttonhovercolor: #303030;
--text-shadow-light: 1px 1px 2px rgba(0 0 0 / 0.3);
--color-text-secondarytextcolor: #ffffff;
--color-interface-button-primarybuttoncolor: #303030;
--color-main-primarycolor: #cc1618;
--color-interface-border-borderdisabledcolor: #f4f4f4;
--color-surface-menuitemsurface: #ffffff;
--color-main-secondarycolor: #303030;
--color-grays-gray600: #262626;
--color-interface-icon-icononprimarycolor: #ffffff;
--color-interface-primaryactivecolor: #cc1618;
--font-secondary: Arctic Fox 08,sans-serif;
--color-interface-button-primarybuttonhovercolor: #ebebeb;
--color-neutral-footercolor: #e8e7e6;
--color-label-colors-limited-edition-blue: #55c6ce;
--color-accents-lightblue: #69b7e2;
--color-neutral-menuitemcolor: #ffffff;
--color-interface-errorlightcolor: #fae8e8;
--color-interface-successcolorlight: #88a590;
--color-neutral-menucolor: #ffffff;
--font-size-2: 2.5rem;
--space-padding-mega: 2.5rem;
--space-padding-giga: 2.75rem;
--space-padding-md: 1rem;
--shadow-strong: 0 4px 8px 0 rgba(0 0 0 / 0.3);
--color-grays-gray100: #f4f4f4;
--space-padding-sm: 0.75rem;
--color-neutral-buttonoutlinehover: #999999;
--font-brands-primary: Arctic Fox 08,sans-serif;
--color-interface-successcolor: #73ac3a;
--border-radius-radius-xs: 0.25rem;
--text-shadow-strong: 2px 2px 6px rgba(0 0 0 / 0.8);
--color-surface-surface2: #ebebeb;
--font-size-caption: .875rem;
--font-size-6: 1.125rem;
--shadow-light: 0 4px 8px 0 rgba(0 0 0 / 0.1);
--color-brands-secondarybranddarker: #000000;
--color-brands-primarybranddarkercolor: #a82d24;
--border-radius-radius-lg: 1rem;
--space-padding-xxl: 1.5rem;
--color-label-colors-fit-blue: #8eb7ff;
--color-label-colors-new-green: #07bf66;
--color-main-secondaryhovercolor: #000000;
--color-neutral-errorcolor: #cc1d1d;
--border-radius-radius-sm: 0.5rem;
--color-brands-primarybuttoncolor: #303030;
}Drop-in prompt
Build a landing page in the visual style of Fjallraven.
Reference design system (extracted from the live site):
- Palette: #206bdd, #28160b, #ddb79a, #a78260, #d7ccb8
- Typefaces: Arctic Fox 08, Arial
- Macrostructure: Portfolio 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/fjallraven-com
