Highsnobiety
Portfolio Grid
Cool, muted teal and cream, clean sans-serif, spacious layouts evoke understated, confident authority.




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 |
|---|---|---|---|---|---|---|
| h1 | Helvetica Neue | 45px | 500 | 1.2 | 0 | Aa Bb Cc |
| h2 | Helvetica Neue | 40px | 500 | 1.2 | 0 | Aa Bb Cc |
| h3 | Helvetica Neue | 20px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Helvetica Neue | 18px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Helvetica Neue | 18px | 400 | 1.5 | 0.5px | Aa Bb Cc |
Max content width 1650px
:root {
--color-dominant: #b06a3e;
--color-surface: #1f8565;
--color-ink: #edd6af;
--color-accent: #767f7e;
--color-detail: #b1c1cf;
}
/* CSS variables exposed by source */
:root {
--brand-ranking-rank: #ccc;
--brand-icon-border-color: #eee;
--background-color: #fff;
--brand-profile-background-color: #eee;
--border-color: #eee;
--text-hover-color: #555;
--text-color: #111;
--text-color-2: #000;
--primary: #051e4b;
--font-family-sans-serif: "Helvetica Neue",helvetica,"HB TC","HB JP","HB KR",arial,“segoe ui”,“microsoft jhenghei”,“microsoft mhei”,stheititc,sans-serif;
--background-color-secondary: #fff;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--secondary: #868e96;
--post-box-text-color: #888;
--mobile-nav-input-background-color: #fff;
--article-audio-player-progress-bar-bg-color: #eee;
--pink: #e83e8c;
--hypeart-footer-icon-color: #888;
--footer-title-color: #000;
--btn-background-color: #111;
--post-box-line-break-color: #eee;
--hundred-invert-inverse: invert(1);
--shopping-nav-input-bg-color: #eee;
--breakpoint-xs: 0;
--nav-search-input-text-color: #111;
--close-button-bg-color: #ddd;
--directory-tabs-link-active-border-color: #eee #eee #fff;
--footer-border-color: #e6e6e6;
--sidebar-newsletter-background-color: #fff;
--success: #28a745;
--nav-background-color: #fff;
--red: #dc3545;
--themed-button-text-color: #fff;
--poll-answer-background-color: #ddd;
--header-layout-meta-background-color: #f5f5f5;
--graph-point-border: #fff;
--radio-listen-btn-border-color: #051e4b;
--credential-text-color: #111;
--nav-line-break-color: #eee;
--events-form-disabled-textfield-background-color: #f5f5f7;
--nav-sub-text-color: #888;
--trending-terms-bar-drop-down-text-active-color: #fff;
--poll-hover-background-color: #111;
--drop-refine-modal-clear-all-text-hover-color: #aaa;
--hypeart-main-text-color: #000;
--btn-background-light-color: #fff;
--warning: #ffc107;
--about-brands-invert: invert(1);
--load-more-btn-text-hover-color: #fff;
--show-article-gradient: linear-gradient(180deg,#fff0,#fff 80%);
--drop-refine-button-background-color: #111;
--form-border-color: #ddd;
--orange: #fd7e14;
--dropdown-background-color: #eee;
--about-brands-opacity: 0.25;
--mobile-menu-close: #979797;
--load-more-btn: #1e1e1e;
--graph-point-fill: #00469b;
--green: #28a745;
--checkbox-checked-background-color: #111;
}Drop-in prompt
Build a landing page in the visual style of Hypebeast Kr.
Reference design system (extracted from the live site):
- Palette: #b06a3e, #1f8565, #edd6af, #767f7e, #b1c1cf
- Typefaces: Helvetica Neue
- 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/hypebeast-kr--2026-4-aesop-solais-replenishing-hydration-hand-serum-release-info