Fjallraven
Portfolio Grid
Electric violet pixel bursts frame bold, playful type on a vibrant, retro-futurist canvas.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Lato GOG Latin | 32px | 700 | 1.19 | 0 | Aa Bb Cc |
| h3 | Lato GOG Latin | 16px | 700 | 1.19 | 0 | Aa Bb Cc |
| body | Lato GOG Latin | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Lato GOG Latin | 13px | 600 | 1.4 | 0 | Aa Bb Cc |
Max content width 1060px
:root {
--color-dominant: #7322bd;
--color-surface: #391266;
--color-ink: #55ced4;
--color-accent: #8f9063;
--color-detail: #cac4ae;
}
/* CSS variables exposed by source */
:root {
--gdsx-font-weight-light: 300;
--gdsx-color-text-button-mono-default: rgb(46, 46, 46);
--gdsx-color-stroke-active: rgb(123, 35, 127);
--gdsx-size-spacing-2: .5rem;
--gdsx-color-icon-banner-warning: rgb(25, 25, 25);
--gdsx-opacity-75: .75;
--gdsx-color-icon-button-primary-hover: rgb(255, 255, 255);
--gdsx-color-background-button-ghost-default: transparent;
--gdsx-font-weight-black: 900;
--gdsx-font-size-overline: .75rem;
--gdsx-color-icon-button-outline-disabled: rgb(160, 160, 160);
--gdsx-color-text-button-success-disabled: rgb(160, 160, 160);
--gdsx-color-text-button-primary-default: rgb(255, 255, 255);
--gdsx-color-stroke-success: rgb(26, 132, 73);
--gdsx-color-icon-default: rgb(25, 25, 25);
--gdsx-color-background-button-success-hover: rgb(186, 226, 110);
--gdsx-size-width-6xl: 1920px;
--gdsx-color-stroke-contrasted-heavy: rgba(46, 46, 46, .2);
--gdsx-color-shark-grey-25: 247, 247, 247;
--c-giveaway-description: rgba(255, 255, 255, .6);
--gdsx-opacity-50: .5;
--gdsx-color-text-button-outline-focused: rgb(25, 25, 25);
--c-text-primary: rgb(33, 33, 33);
--gdsx-color-background-button-primary-hover: rgb(179, 96, 196);
--gdsx-color-stroke-hover: rgb(93, 93, 93);
--gdsx-color-text-button-mono-disabled: rgb(160, 160, 160);
--gdsx-color-icon-button-primary-disabled: rgb(160, 160, 160);
--gdsx-color-stroke-button-primary-disabled: rgb(217, 217, 217);
--c-spot-pagination-bullet-bg: rgba(255, 255, 255, .3);
--c-text-tertiary: rgb(88, 88, 88);
--c-button-accent-disabled-content: rgba(0, 0, 0, .85);
--gdsx-color-background-active-lighter: rgb(165, 36, 171);
--gdsx-color-background-tag-blue: rgb(1, 117, 228);
--gdsx-color-icon-button-success-focused: rgb(25, 25, 25);
--gdsx-font-size-body-lg: 1.125rem;
--gdsx-logo-show-light: block;
--gdsx-size-width-4xl: 1440px;
--gdsx-font-weight-heading-2: 700;
--gdsx-font-size-heading-4: 1.25rem;
--gdsx-color-icon-secondary: rgb(123, 35, 127);
--c-usp-tooltip-bg: rgb(217, 217, 217);
--gdsx-color-text-tertiary: rgb(160, 160, 160);
--product-vertical-tile-width-tablet: 180px;
--c-button-secondary-pressed-border: rgb(233, 233, 233);
--gdsx-color-text-tag-dark: rgb(17, 17, 17);
--gdsx-color-background-warning: rgb(253, 192, 78);
--gdsx-color-text-default: rgb(25, 25, 25);
--gdsx-color-text-error: rgb(206, 24, 33);
--gdsx-color-background-button-outline-default: transparent;
--c-background: rgb(217, 217, 217);
--product-vertical-tile-image-height-tablet: 239px;
--gdsx-line-height-text-md: 1.5rem;
--gdsx-color-brand-400: 179, 96, 196;
--gdsx-font-size-body: 1rem;
--gdsx-color-text-disabled: rgb(160, 160, 160);
--gdsx-size-width-lg: 640px;
--gdsx-letter-spacing-body: 0;
--gdsx-letter-spacing-text-lg: 0;
--menu-z-index: 60;
--gdsx-font-size-display-lg: 3rem;
}Drop-in prompt
Build a landing page in the visual style of Gog.
Reference design system (extracted from the live site):
- Palette: #7322bd, #391266, #55ced4, #8f9063, #cac4ae
- Typefaces: Lato GOG Latin
- 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/gog-com--en-game-scarlet-hollow