{"id":"b8899cbd-e2ca-4069-83cf-d8f8b0d71100","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/b8899cbd-e2ca-4069-83cf-d8f8b0d71100","originalSiteUrl":"https://bmw.com","capturedAt":"2026-04-11T16:27:40.763Z","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":"BMW.com","summary":"Precision-engineered monochrome luxury; every detail is intentional, nothing is superfluous.","description":"This design system projects an image of understated luxury and precision, typical of a high-end automotive brand. The focus on a monochrome palette with sharp contrasts and subtle textural shifts creates a refined, almost clinical atmosphere. Typography is the primary visual differentiator, using a bespoke font that balances technical exactness with approachable forms, especially in larger display sizes where its clarity is paramount. There is minimal use of color, which emphasizes content and maintains a strong, consistent brand presence.","tags":["luxury","automotive","monochrome","minimal","precision","editorial","technical","high-contrast"],"industry":"other","colorScheme":"light","colors":[{"name":"Obsidian","hex":"#262626","role":"Primary text, interactive elements, navigation links, button text — forms the core dark against light contrast.","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, prominent navigational elements — establishes the primary visual canvas.","group":"neutral"},{"name":"Graphite Grey","hex":"#bbbbbb","role":"Secondary navigation text, subtle borders, contextual information — provides sufficient contrast on dark surfaces while appearing subdued on light ones.","group":"neutral"},{"name":"Frost","hex":"#f1f1f1","role":"Subtle background accents, dividers — provides a very light contrast against Canvas White.","group":"neutral"},{"name":"Deep Space","hex":"#262626","role":"Footer background — anchors the page with a solid, dark foundation.","group":"neutral"},{"name":"Electric Blue","hex":"#1c69d4","role":"Interactive highlights, focus states — a vibrant, technical accent for user interaction.","group":"accent"}],"typography":[{"role":"Body text, navigation, interactive elements, button labels, and general UI text. Its precise forms reflect the brand's engineering heritage, ensuring clarity across all contexts.","sizes":"16px, 18px","family":"BMWTypeNextLatin","weight":"400, 700, 900","lineHeight":"1.15, 1.20, 1.30, 1.60, 1.63","substitute":"Open Sans","letterSpacing":"normal"},{"role":"Primary display headlines; the light weight at large sizes conveys authority through refinement rather than aggression, creating a sophisticated brand voice. It's unexpected at this scale, establishing an elegant, high-impact presence.","sizes":"60px","family":"BMWTypeNextLatin Light","weight":"300","lineHeight":"1.30","substitute":"Open Sans Light","letterSpacing":"normal"}],"typeScale":[{"role":"body","size":16,"lineHeight":1.63},{"role":"subheading","size":18,"lineHeight":1.6},{"role":"display","size":60,"lineHeight":1.3}],"spacing":{"radius":{"buttons":"0px","default":"0px"},"elementGap":"8px","sectionGap":"40px","cardPadding":"16px"},"radius":{"buttons":"0px","default":"0px"},"guidelines":{"do":["Prioritize BMWTypeNextLatin for all text elements to maintain brand consistency.","Use Canvas White (#ffffff) as the dominant background color for main content areas.","Apply Obsidian (#262626) for primary text and interactive elements to ensure high contrast.","Utilize BMWTypeNextLatin Light weight 300 at 60px for prominent headings to create an impactful yet refined statement.","Maintain zero border-radius on all components to preserve the precise, angular aesthetic.","Employ Electric Blue (#1c69d4) sparingly for interactive highlights and focus states, ensuring it stands out against the monochrome palette."],"dont":["Avoid using saturated or chromatic colors outside of the designated Electric Blue accent.","Do not introduce rounded corners or soft shapes, as the aesthetic is defined by sharp precision.","Refrain from heavy shadows or overt elevation a primary means of drawing attention; rely on typography and strong contrast.","Do not deviate from the BMWTypeNextLatin font family; consistency is key to the brand's visual identity.","Avoid excessive padding around interactive textual elements like links; use 0-12px as seen in button examples."]},"components":[{"name":"CTA Link Button — 'Find your BMW'","role":""},{"name":"Language Selector Bar","role":""},{"name":"Footer Link Columns","role":""},{"name":"Text Link Button","role":"Primary Call to Action"},{"name":"Navigation Link","role":"Primary Navigation"},{"name":"Heading Text Badge","role":"Section Labels"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: #262626 (Obsidian)\n- Background: #ffffff (Canvas White)\n- CTA/Highlight: #1c69d4 (Electric Blue)\n- Border/Secondary: #bbbbbb (Graphite Grey)\n- Footer Background: #262626 (Deep Space)\n\n### Example Component Prompts\n1. Create a page header: Canvas White (#ffffff) background. Left-aligned BMW logo. Right-aligned navigation link 'Home' in Obsidian (#262626), BMWTypeNextLatin weight 400, size 16px, line height 1.63. Include a search icon in Obsidian (#262626).\n2. Design a primary headline section: BMWTypeNextLatin Light weight 300, size 60px, line height 1.3, Obsidian (#262626) text, centered, with 40px margin-top and 40px margin-bottom. Below, add a Text Link Button 'Find your BMW' in Obsidian (#262626), BMWTypeNextLatin weight 400, size 16px, 12px horizontal padding, 0px vertical padding, no background, 0px border radius.\n3. Develop a footer section: Deep Space (#262626) background. Four columns of links with titles like 'Quick Links' as Heading Text Badge in Graphite Grey (#bbbbbb), BMWTypeNextLatin weight 700, size 16px. Individual links in Graphite Grey (#bbbbbb), BMWTypeNextLatin weight 400, size 16px, line height 1.63."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924844847-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924844847-thumb.jpg"},"similarStyleIds":["98676f9d-5c41-413b-afdc-4a87deb154d6","80164adf-a898-4f7c-bce7-12f3f62e1649","c9c5be5a-aaa1-4338-9681-8378d2e24fbd","27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5","a5dc5626-1103-42e3-9edb-a6d52fb9a210","96845df2-7ddb-420a-814e-c339f95a6554","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","46f01790-e488-4aba-9236-02466b0fb3cd","7266b546-2fb0-465c-acd6-79001c39829a","764b6a64-c233-4e0f-b8e1-bc01e2f8aa16","67c60ee4-ac38-41ee-834e-ed2a92146417","3a4ac160-5e13-4e3f-b2c9-245da422e108","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","ccb67114-6da3-476a-8ca4-b348ab3d0a03","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","a4f123f2-cd4b-4d26-998f-a3d3ee158024","98ab0172-9474-43b5-9055-98cf1a6a2401","72340f0a-e7ea-4f9b-b683-19a1c3dcdc32","4887c681-d4e6-41d3-b83c-5650cf925ee9","4cb66ac5-df12-46fc-beb2-d72a2a12a85d"],"exports":{"designMdUrl":"/references/refero/b8899cbd-e2ca-4069-83cf-d8f8b0d71100/design.md","tokensJsonUrl":"/references/refero/b8899cbd-e2ca-4069-83cf-d8f8b0d71100/tokens.json","tailwindV4Url":"/references/refero/b8899cbd-e2ca-4069-83cf-d8f8b0d71100/tailwind-v4.css","cssVariablesUrl":"/references/refero/b8899cbd-e2ca-4069-83cf-d8f8b0d71100/tailwind-v4.css"}}