Buly1803
Portfolio Grid
Soft, diffused light on warm, muted tones; clean, open space, gentle serif whispers.




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 | StyreneA-Regular-Web | 24px | 400 | 1.33 | 0 | Aa Bb Cc |
| h2 | StyreneA-Regular-Web | 17px | 500 | 1.65 | 0 | Aa Bb Cc |
| h3 | StyreneA-Regular-Web | 19px | 400 | 1.37 | 0 | Aa Bb Cc |
| body | StyreneA-Regular-Web | 13px | 400 | 1.54 | 0 | Aa Bb Cc |
| button | StyreneA-Regular-Web | 13px | 400 | 0 | 0 | Aa Bb Cc |
Max content width 1920px
:root {
--color-dominant: #dc6739;
--color-surface: #932b21;
--color-ink: #d9c482;
--color-accent: #b19761;
--color-detail: #d4c8b0;
}
/* CSS variables exposed by source */
:root {
--secondary-elements-background-rgb: 28, 27, 27;
--secondary-elements-border-color: rgba(255, 255, 255, 0.25);
--text-color-light-rgb: 106, 106, 106;
--text-color-rgb: 26, 26, 26;
--secondary-elements-text-color-light: rgba(255, 255, 255, 0.5);
--secondary-elements-text-color: #ffffff;
--text-font-family: "StyreneA-Regular-Web",sans-serif;
--secondary-elements-background: #1c1b1b;
--border-color-rgb: 221, 221, 221;
--text-color-secondary-rgb: 86, 86, 86;
--text-font-weight: 400;
--background: #ffffff;
--border-color: #dddddd;
--text-font-style: normal;
--text-color: #1a1a1a;
--text-color-light: #6a6a6a;
--background-rgb: 255, 255, 255;
--text-color-secondary: #565656;
--use-unsticky-header: 0;
--loop-onstore-add-more-border: black;
--wk-button-border-width: 1px;
--heading-font-weight: 500;
--bs-orange: #fd7e14;
--header-height: 68px;
--product-star-rating: #f6a429;
--bs-success: #198754;
--wk-shadow-opacity: 15%;
--plp-swatch-size: 16px;
--loop-onstore-button-gap: 0.25rem;
--bs-border-style: solid;
--bs-warning-rgb: 255,193,7;
--loop-primary-color: #030712;
--bs-body-font-weight: 400;
--footer-border-color: #dfdbd8;
--bs-primary: #0d6efd;
--header-is-transparent: 0;
--bs-border-radius-2xl: 2rem;
--base-text-font-size: 13px;
--wk-color-accent-2: 106, 106, 106;
--plp-swatch-target: 26px;
--bs-body-line-height: 1.5;
--bs-code-color: #d63384;
--max-content-width: 1400px;
--use-sticky-header: 1;
--button-text-color: #ffffff;
--bs-purple: #6f42c1;
--drawer-transition-timing: cubic-bezier(0.645, 0.045, 0.355, 1);
--bs-cyan: #0dcaf0;
--bs-link-hover-color: #0a58ca;
--bs-green: #198754;
--header-is-not-transparent: 1;
--product-sale-price-color-rgb: 26, 26, 26;
--bs-info-rgb: 13,202,240;
--wk-color-accent-1: 26, 26, 26;
--bs-border-radius-sm: 0.25rem;
--jdgm-secondary-color: rgba(26,26,26,0.1);
--bs-gray-400: #ced4da;
--loop-onstore-checkout-background: #030712;
--navigation-background: #ffffff;
--swatch-misc: url(//cuyana.com/cdn/shop/t/10/assets/misc-color-swatch_40x.jpg?v=160095080111440784971700688998);
}Drop-in prompt
Build a landing page in the visual style of Cuyana.
Reference design system (extracted from the live site):
- Palette: #dc6739, #932b21, #d9c482, #b19761, #d4c8b0
- Typefaces: StyreneA-Regular-Web
- 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/cuyana-com--products-system-zipper-tote-13-inch