Upperquad
Portfolio Grid
Soft, muted earth tones and clean, spacious layouts foster thoughtful, serious exploration.




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 | Arial | 50px | 400 | 1.4 | 0 | Aa Bb Cc |
| h3 | Arial | 22px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | Arial | 20px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 20px | 400 | 1 | 0 | Aa Bb Cc |
:root {
--color-dominant: #4460a5;
--color-surface: #5b3827;
--color-ink: #d9b697;
--color-accent: #a7825e;
--color-detail: #c49786;
}
/* CSS variables exposed by source */
:root {
--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
--wc-form-border-color: rgba(32, 7, 7, 0.8);
--wp--preset--font-size--large: 36px;
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--preset--color--vivid-purple: #9b51e0;
--wc-subtext: #767676;
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--wp--preset--aspect-ratio--16-9: 16/9;
--wp--preset--color--pale-pink: #f78da7;
--wc-orange: #ffba00;
--woocommerce: #720eec;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wc-secondary-text: #515151;
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--wp--preset--spacing--60: 2.25rem;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wc-content-bg: #fff;
--wp--preset--spacing--40: 1rem;
--wp--preset--aspect-ratio--3-2: 3/2;
--wc-form-border-width: 1px;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--font-size--x-large: 42px;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
--wp--preset--aspect-ratio--2-3: 2/3;
--wc-primary: #720eec;
--wc-primary-text: #fcfbfe;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--spacing--30: 0.67rem;
--wp--preset--aspect-ratio--4-3: 4/3;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--font-size--small: 13px;
--wp--preset--spacing--70: 3.38rem;
--wc-blue: #2ea2cc;
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wc-green: #007518;
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);
--wp--preset--aspect-ratio--9-16: 9/16;
--wp--preset--color--vivid-red: #cf2e2e;
--wc-highligh-text: white;
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--wp--preset--color--light-green-cyan: #7bdcb5;
--wc-red: #a00;
--wc-secondary: #e9e6ed;
--wp--preset--aspect-ratio--square: 1;
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
--wp--preset--spacing--80: 5.06rem;
--wp--preset--color--white: #ffffff;
--wc-form-border-radius: 4px;
--wp--preset--font-size--medium: 20px;
--wp--preset--aspect-ratio--3-4: 3/4;
--wp--preset--color--black: #000000;
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);
--wc-destructive: #cc1818;
}Drop-in prompt
Build a landing page in the visual style of Designstudio.
Reference design system (extracted from the live site):
- Palette: #4460a5, #5b3827, #d9b697, #a7825e, #c49786
- Typefaces: 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/designstudio-com--product-creating-a-custom-logo-for-your-brand-2