{"id":"b8899cbd-e2ca-4069-83cf-d8f8b0d71100","name":"BMW.com","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","colors":[{"name":"Obsidian","hex":"#262626","role":"Primary text, interactive elements, navigation links, button text — forms the core dark against light contrast.","group":"neutral","cssVariable":"--color-obsidian"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, prominent navigational elements — establishes the primary visual canvas.","group":"neutral","cssVariable":"--color-canvas-white"},{"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","cssVariable":"--color-graphite-grey"},{"name":"Frost","hex":"#f1f1f1","role":"Subtle background accents, dividers — provides a very light contrast against Canvas White.","group":"neutral","cssVariable":"--color-frost"},{"name":"Deep Space","hex":"#262626","role":"Footer background — anchors the page with a solid, dark foundation.","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Electric Blue","hex":"#1c69d4","role":"Interactive highlights, focus states — a vibrant, technical accent for user interaction.","group":"accent","cssVariable":"--color-electric-blue"}],"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"}],"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."]}}