{"id":"c26c462d-f219-4814-96da-c05e86f759b7","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"True Staging","summary":"Architectural blueprint on aged parchment","description":"True Staging establishes a serious yet refined industrial aesthetic, using a deep gray canvas punctuated by an antiqued peachy-orange accent. Typography pairs a classic serif for large expressive headlines with a clean sans-serif for functional text, setting up a contrast between permanence and precision. Components emphasize subtle outlining and generous border radii, lending a soft, approachable feel despite the muted palette. The overall impression is one of understated luxury and meticulous craftsmanship.","industry":"other","colorScheme":"dark","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"},{"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"},{"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"}],"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"}],"typeScale":[{"role":"body","size":14,"lineHeight":1.2,"letterSpacing":0.02},{"role":"subheading","size":28,"lineHeight":1.3,"letterSpacing":-0.02},{"role":"display","size":158,"lineHeight":1,"letterSpacing":-0.02}],"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."]},"components":[{"name":"Hero Headline","role":"Primary page title"},{"name":"Ghost Navigation Item","role":"Secondary navigation and non-primary actions"},{"name":"Primary Action Button","role":"Call to action button for 'Our Work'"},{"name":"Body Text","role":"Standard informative text"},{"name":"Footer Detail Text","role":"Copyright and minor informational text"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #f5efeb\nbackground: #111111\nborder: #f5efeb\naccent: #f1b497\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\n\n\nGenerate two columns of text in a section with a Blueprint Canvas background: Left column with subheading 'Set builders for live events & luxury retail experiences.' in Alliance 28px weight 400, #f5efeb. Right column with body text 'YOUR DESIGNS: MADE REALITY...' in Alliance 14px weight 400, #f5efeb, with a margin-bottom of 14px after initial line."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777514205757-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777514205757-thumb.jpg"},"similarStyleIds":["6b6a0ec8-0ea7-4324-9016-bfae46fbad62","e75b3106-fc5b-4bb8-8d7d-a7ab224fd27d","16be276a-d8ce-484e-8f7a-cbbb09f717f7","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","03a78f26-ebd4-4d09-9012-7c69d327df9a","4cb66ac5-df12-46fc-beb2-d72a2a12a85d","c47654a9-7d7a-4b2c-8e0a-cd9296719c69","3c7a070a-d0f6-4f78-9fdc-58db0b4cbfe1","32fee900-17a5-4753-b08d-3c73f2d2f71f","733f32ca-efc3-40fb-bc58-327bd2b45828","6036b661-3886-4f76-a5e6-bb8960eb7db5","b43fdb3c-85e9-4282-9262-1d3deb4b679d","d19c6fc3-1fc6-44a0-9c22-a0a82f7f79b4","3b742f76-25ad-446c-a942-09b09b93f6a3","ccb67114-6da3-476a-8ca4-b348ab3d0a03","4d4772a3-e1da-415f-a6d7-658dcefdcecd","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","7f6799d9-0733-4523-9a94-036b9ad3bf28","76bfda6b-125f-4d9b-96c0-356de1e9fc10","bb2a2b0b-c84e-48ee-9dd9-7b623f81a422"],"exports":{"designMdUrl":"/references/refero/c26c462d-f219-4814-96da-c05e86f759b7/design.md","tokensJsonUrl":"/references/refero/c26c462d-f219-4814-96da-c05e86f759b7/tokens.json","tailwindV4Url":"/references/refero/c26c462d-f219-4814-96da-c05e86f759b7/tailwind-v4.css","cssVariablesUrl":"/references/refero/c26c462d-f219-4814-96da-c05e86f759b7/tailwind-v4.css"}}