{"id":"27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5","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","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":"Bang & Olufsen","summary":"Gallery of precise objects. A dark, velvet-lined showcase where each product rests, spotlighted with refined exactitude.","description":"This design system balances classic luxury with contemporary minimalism. Rich, deep indigo (#060daa) and elegant black (#191817) create a sophisticated backdrop, punctuated by a delicate, almost cream-colored off-white (#fcfaee) for textual contrast. The signature element is the custom BeoSupreme typeface, used across all text sizes, which brings a unique, refined character, with precise letter-spacing adjustments at every size. The dominant visual language is clean, centered product photography on stark backgrounds, framed by generous negative space and a strict typographic hierarchy.","tags":["luxury","minimalist","high-contrast","elegant","product-focused","serif-heavy","dark-mode-sections","spacious","typographic-emphasis","understated"],"industry":"ecommerce","colorScheme":"both","colors":[{"name":"Midnight Indigo","hex":"#060daa","role":"Footer background, primary accent for deep sections – creating a luxurious, immersive foundation.","group":"brand"},{"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"},{"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"},{"name":"Ash Gray","hex":"#555555","role":"Secondary text, subtle link color – offers a muted informational tone against white.","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, card backgrounds, input backgrounds – provides clean, expansive canvas.","group":"neutral"},{"name":"Pale Silver","hex":"#e5e5e5","role":"Subtle border colors for inputs – an almost imperceptible divider.","group":"neutral"},{"name":"Pure Black","hex":"#000000","role":"Primary icon color, borders on ghost buttons – a hard, crisp edge or fill.","group":"neutral"}],"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"}],"typeScale":[{"role":"body","size":14,"lineHeight":1.43,"letterSpacing":0.007},{"role":"heading","size":24,"lineHeight":1.25,"letterSpacing":-0.014},{"role":"display","size":36,"lineHeight":1.15,"letterSpacing":-0.056}],"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'."]},"components":[{"name":"Product Cards — Explore Superventas","role":""},{"name":"Hero CTA — Beo Grace","role":""},{"name":"Button Group — B&O Style System","role":""},{"name":"Primary Button (Honey Tone CTA)","role":"Call to action"},{"name":"Ghost Button (Menu/Search)","role":"Navigation/Utility"},{"name":"Text Link Button","role":"Tertiary action/Navigation"},{"name":"Feature Card","role":"Product display"},{"name":"Input Field","role":"User entry"},{"name":"New Product Badge","role":"Highlight new items"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text on light: #191817\n- Text on dark: #fcfaee\n- Page Background: #ffffff\n- CTA Background: #191817\n- Footer Background: #060daa\n\n### Example Component Prompts\n1. Create a hero section: 'Midnight Indigo' (#060daa) full-bleed background. Centered product image. Above it, a 'display' headline: 'Beo Grace' (BeoSupreme, 36px, 1.15lh, -0.056em ls, #fcfaee). Below, a body text: '100 años de artesanía. Un futuro icono.' (BeoSupreme, 16px, 1.33lh, 0.006em ls, #fcfaee). Underneath, a Primary Button: 'Disponible en Honey Tone' (40px radius, 8px 32px padding, #191817 background, #fcfaee text).\n2. Generate a product listing grid: 'Pure White' (#ffffff) background. 'subheading' title 'Explore nuestros superventas' (BeoSupreme, 24px, 1.25lh, -0.014em ls, #191817). Display three Feature Cards horizontally, each with a centered product image, 'subheading' product name (BeoSupreme, 16px, 1.33lh, #191817) and price below it, separated by around 24px element gap.\n3. Design a form input: 'Pure White' (#ffffff) background. 'Carbon Black' (#191817) text using 'body' style (BeoSupreme, 14px, 1.43lh), with a 1px 'Carbon Black' (#191817) bottom border. Placeholder text color: #555555. Padding: 1px vertical, 2px right."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924446065-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924446065-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5-1777581932205-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5-1777581932205-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5-1777581932205-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5-1777581932205-preview-detail-poster.jpg"},"similarStyleIds":["96845df2-7ddb-420a-814e-c339f95a6554","8d315332-6267-4dc0-a14c-e8b49c26b0e1","46f01790-e488-4aba-9236-02466b0fb3cd","b76c7503-0217-4822-80b2-18fa19af46ee","76bfda6b-125f-4d9b-96c0-356de1e9fc10","98ab0172-9474-43b5-9055-98cf1a6a2401","3b9ed801-511c-48b6-b516-68b1aa8a36ea","ccb67114-6da3-476a-8ca4-b348ab3d0a03","6f3fb64d-d4c9-4ec1-86a1-7983e5180985","99820c01-a9a7-40a4-9d73-8c75b19e7e91","67c60ee4-ac38-41ee-834e-ed2a92146417","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","9decde51-2a8b-4212-bba5-be9457efc62e","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","a4f123f2-cd4b-4d26-998f-a3d3ee158024","4244637b-e27b-4962-b586-cb3ac605e5aa","3a4ac160-5e13-4e3f-b2c9-245da422e108","d19c6fc3-1fc6-44a0-9c22-a0a82f7f79b4","3b742f76-25ad-446c-a942-09b09b93f6a3","7922b756-2d0f-4a58-8fa6-39d40264fe66"],"exports":{"designMdUrl":"/references/refero/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5/design.md","tokensJsonUrl":"/references/refero/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5/tokens.json","tailwindV4Url":"/references/refero/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5/tailwind-v4.css","cssVariablesUrl":"/references/refero/27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5/tailwind-v4.css"}}