{"id":"c26c462d-f219-4814-96da-c05e86f759b7","name":"True Staging","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/c26c462d-f219-4814-96da-c05e86f759b7","originalSiteUrl":"https://www.truestaging.co.uk","capturedAt":"2026-04-30T01:57:05.127Z","colors":[{"name":"Blueprint Canvas","hex":"#111111","role":"Page background, primary dark text, subtle borders — grounds the design in a deep, almost charcoal base","group":"neutral","cssVariable":"--color-blueprint-canvas"},{"name":"Parchment White","hex":"#f5efeb","role":"Primary light text, ghost button borders, accents within a darker canvas — suggests a tactile, natural paper texture","group":"neutral","cssVariable":"--color-parchment-white"},{"name":"Amber Peach","hex":"#f1b497","role":"Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color","group":"brand","cssVariable":"--color-amber-peach"}],"typography":[{"role":"Expressive display headings — its delicate weight and generous size at 158px create an authoritative, almost monumental statement of luxury.","sizes":"158px","family":"Roslindale","weight":"300","weights":[300],"lineHeight":"1.00","substitute":"Playfair Display","letterSpacing":"-0.0200em"},{"role":"Functional text including body, navigation, and button labels — its versatility across weights and compact letter spacing ensures clear information delivery.","sizes":"9px, 12px, 14px, 28px","family":"Alliance","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.00, 1.15, 1.20, 1.30, 1.50, 1.71","substitute":"Inter","letterSpacing":"-0.0200em, 0.0200em, 0.0230em, 0.0600em, 0.1000em"}],"spacing":{"radius":{"buttons":"80px","otherElements":"80px","navigationItems":"80px"},"elementGap":"8px","sectionGap":"53px","cardPadding":"21px"},"radius":{"buttons":"80px","otherElements":"80px","navigationItems":"80px"},"guidelines":{"do":["Always use Blueprint Canvas (#111111) for page backgrounds and primary dark text.","Apply Parchment White (#f5efeb) for primary light text on dark backgrounds and for ghost button borders.","Reserve Amber Peach (#f1b497) for key accents, selected navigation highlights, and the primary 'Our Work' button fill.","Employ Roslindale (sub: Playfair Display) for large, expressive headlines (158px, weight 300, ls -0.0200em) to convey gravitas.","Utilize Alliance (sub: Inter) for all functional text, varying weights (400, 500, 600) and sizes (9px, 12px, 14px) as needed for hierarchy.","Implement an 80px border-radius for all interactive elements like buttons and navigation items to maintain a consistent soft, pill-like shape.","Maintain a compact spacing density, with an element gap of 8px and section vertical spacing of 53px."],"dont":["Do not introduce bright, vibrant colors; maintain the muted, earthy palette of Blueprint Canvas, Parchment White, and Amber Peach.","Avoid sharp, angular corners; consistently apply the 80px border-radius for all applicable UI elements.","Do not use generic system fonts for display headings; Roslindale's unique character is central to the brand's sophisticated feel.","Avoid excessive use of elevation or heavy shadows; the system relies on subtle borders and color shifts for separation.","Do not deviate from the defined letter-spacing values for Alliance; precise tracking is essential for its compact appearance.","Do not use Parchment White (#f5efeb) on amber backgrounds due to insufficient contrast (1.6:1 ratio).","Avoid making any element overtly 'loud'; the design emphasizes understated luxury through subtle contrasts and refined details."]}}