{"id":"27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5","name":"Bang & Olufsen","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/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5","originalSiteUrl":"https://bang-olufsen.com","capturedAt":"2026-04-11T16:21:06.829Z","colors":[{"name":"Midnight Indigo","hex":"#060daa","role":"Footer background, primary accent for deep sections – creating a luxurious, immersive foundation.","group":"brand","cssVariable":"--color-midnight-indigo"},{"name":"Carbon Black","hex":"#191817","role":"Dominant text color for headings and body content on light backgrounds, input borders – provides stark contrast and grounded presence.","group":"neutral","cssVariable":"--color-carbon-black"},{"name":"Barely White","hex":"#fcfaee","role":"Primary text color on dark backgrounds, selected button text – a creamy off-white that softens the high contrast.","group":"neutral","cssVariable":"--color-barely-white"},{"name":"Ash Gray","hex":"#555555","role":"Secondary text, subtle link color – offers a muted informational tone against white.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, card backgrounds, input backgrounds – provides clean, expansive canvas.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Pale Silver","hex":"#e5e5e5","role":"Subtle border colors for inputs – an almost imperceptible divider.","group":"neutral","cssVariable":"--color-pale-silver"},{"name":"Pure Black","hex":"#000000","role":"Primary icon color, borders on ghost buttons – a hard, crisp edge or fill.","group":"neutral","cssVariable":"--color-pure-black"}],"typography":[{"role":"Primary typeface for all headings, body text, and UI elements. Its broad range of weights and precise letter-spacing across sizes is a core visual identity feature, conveying understated luxury.","sizes":"12px, 14px, 16px, 24px, 36px","family":"BeoSupreme","weight":"400, 500, 700","lineHeight":"1.00, 1.15, 1.25, 1.33, 1.43, 1.50, 1.63, 1.67, 1.71, 2.19","substitute":"Open Sans","letterSpacing":"-0.056em at 36px, -0.014em at 24px, 0.006em at 16px, 0.007em at 14px, 0.008em at 12px, then other specific values for a finely tuned optical balance"}],"spacing":{"radius":{"badges":"2px","buttons":"40px"},"elementGap":"4px","sectionGap":"48px","cardPadding":"0px"},"radius":{"badges":"2px","buttons":"40px"},"guidelines":{"do":["Prioritize the custom 'BeoSupreme' font for all textual content, leveraging its unique character and precise letter-spacing.","Use 'Midnight Indigo' (#060daa) exclusively for foundational elements like the footer to establish a luxurious, deep anchor.","Maintain a clear visual hierarchy by contrasting 'Carbon Black' (#191817) text on light backgrounds (#ffffff, #fcfaee) and 'Barely White' (#fcfaee) on dark backgrounds (#060daa).","Employ the 40px border-radius strictly for primary CTA buttons, ensuring they stand out as the sole 'soft' element.","Utilize generous negative space around product imagery and text blocks to convey a sense of premium quality and focus, with section gaps around 48px.","Ensure all interactive elements, especially primary CTAs, meet a minimum contrast ratio of 4.5:1 against their background.","Use a subtle 1px border for ghost button states and text links to provide definition without visual weight."],"dont":["Do not introduce additional font families; 'BeoSupreme' defines the typographic identity.","Avoid using multiple accent colors; 'Midnight Indigo' is reserved for specific, prominent sectional backgrounds.","Do not deviate from the established border-radius values (0px, 2px, 40px); rounded corners are intentional and scarce.","Do not use box-shadows; elevation is handled through background color changes and spatial separation.","Avoid decorative elements or busy backgrounds; the aesthetic emphasizes product clarity and clean UI.","Do not create dense content blocks; the comfortable density principle with a 4px base unit should be consistently applied.","Never use the browser default blue for links; control all link colors with 'Carbon Black', 'Ash Gray', or 'Barely White'."]}}