Buly1803
Portfolio Grid
Loading
Gymshark
Dusty rose and warm cream, clean sans-serif, spacious, subtly sculpted and athletic.
Click any value to copy. Roles are suggestions, not gospel.
- #c97f56oklch(66.5% 0.108 49)Dominant
- #841240oklch(40.5% 0.149 4)Surface
- #e482a8oklch(72.3% 0.128 356)Ink
- #a5675doklch(57.9% 0.082 30)Accent
- #d8d0c3oklch(86.0% 0.020 80)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Montserrat | 24px | 700 | 1.2 | 0 | Aa Bb Cc |
| h2 | Montserrat | 25px | 700 | 1.2 | 0 | Aa Bb Cc |
| h3 | Montserrat | 14px | 700 | 1.79 | 0 | Aa Bb Cc |
| body | Roboto | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Montserrat | 14px | 700 | 1.36 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c97f56;
--color-surface: #841240;
--color-ink: #e482a8;
--color-accent: #a5675d;
--color-detail: #d8d0c3;
}
/* CSS variables exposed by source */
:root {
--font-family-roboto: Roboto,Helvetica,Arial,sans-serif;
--color-icon-accent: #007db5;
--color-collection_swatches-white: #ffffff;
--font-family-bebas-neue: Bebas Neue,Helvetica,Arial,sans-serif;
--color-collection_swatches-purple: #9c6dae;
--spacing-80: 8rem;
--color-text-secondary: #444444;
--spacing-120: 12rem;
--color-text-tertiary: #6e6e6e;
--spacing-32: 3.2rem;
--color-foreground-fifth: #ebebeb;
--rounded-corners-standard: 4px;
--color-border-primary: #bbbcbc;
--spacing-8: 0.8rem;
--color-icon-warning: #ffb005;
--font-family-druk-condensed-super: Druk Condensed Super,Helvetica,Arial,sans-serif;
--color-border-accent: #007db5;
--color-collection_swatches-pink: #dc679c;
--color-text-accent: #007db5;
--font-family-montserrat: Montserrat,Helvetica,Arial,sans-serif;
--color-border-girl-math: #edbac3;
--font-weight-bold: 700;
--font-weight-semi-bold: 600;
--color-foreground-first: #000000;
--color-collection_swatches-orange: #e65722;
--color-page-primary: #ffffff;
--font-weight-regular: 400;
--color-foreground-fourth: #e7e7e7;
--font-weight-light: 300;
--color-collection_swatches-multi: linear-gradient(45deg,#e69e05 0%,#fdf160 24.48%,#34c759 48.44%,#0272a9 73.96%,#9c6dae 100%);
--spacing-40: 4rem;
--spacing-10: 1rem;
--color-collection_swatches-yellow: #fdf160;
--color-collection_swatches-ombre: linear-gradient(180deg,#a3a3a3,#e2e2e2);
--color-icon-disabled: #bbbcbc;
--color-collection_swatches-red: #d54537;
--color-collection_swatches-grey: #6e6e6e;
--color-text-primary: #000000;
--color-icon-default: #000000;
--color-text-inverse: #ffffff;
--color-foreground-error: #bf2e35;
--spacing-4: 0.4rem;
--color-icon-inverse: #ffffff;
--color-icon-staff: #ba935f;
--spacing-64: 6.4rem;
--rounded-corners-button: 5rem;
--color-border-staff: #ba935f;
--font-weight-black: 900;
--spacing-48: 4.8rem;
--color-foreground-third: #6e6e6e;
--spacing-56: 5.6rem;
--color-text-success: #2c8349;
--color-icon-error: #bf2e35;
--color-collection_swatches-brown: #5c230e;
--color-text-error: #bf2e35;
--color-border-secondary: #e7e7e7;
--color-border-disabled: #e7e7e7;
--color-border-active: #000000;
--font-family-anton: Anton,Montserrat,Helvetica,Arial,sans-serif;
--color-text-sale: #bf2e35;
}Drop-in prompt
Build a landing page in the visual style of Gymshark.
Reference design system (extracted from the live site):
- Palette: #c97f56, #841240, #e482a8, #a5675d, #d8d0c3
- Typefaces: Montserrat, Roboto
- 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/gymshark-com
