BMW
light theme
Independent Style Review

BMW-Style Design System

The BMW design system uses a light-themed visual language. The primary brand color is Electric Blue (#1c69d4); text is Obsidian (#262626) on a Canvas White (#ffffff) background. Typography is set in BMWTypeNextLatin and BMWTypeNextLatin Light. This DESIGN.md contains 6 color tokens and a 3-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of BMW.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

BMW-style design system: color codes and fonts

Theme
light
Primary color
Electric Blue (#1c69d4)
Fonts
BMWTypeNextLatin, BMWTypeNextLatin Light
Source
bmw.com

Precision-engineered monochrome luxury; every detail is intentional, nothing is superfluous.

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.

Original style summary

BMW color codes

ColorHEXCSS tokenUsage
Obsidian#262626--color-obsidianPrimary text, interactive elements, navigation links, button text — forms the core dark against light contrast.
Canvas White#ffffff--color-canvas-whitePage backgrounds, card surfaces, prominent navigational elements — establishes the primary visual canvas.
Graphite Grey#bbbbbb--color-graphite-greySecondary navigation text, subtle borders, contextual information — provides sufficient contrast on dark surfaces while appearing subdued on light ones.
Frost#f1f1f1--color-frostSubtle background accents, dividers — provides a very light contrast against Canvas White.
Deep Space#262626--color-deep-spaceFooter background — anchors the page with a solid, dark foundation.
Electric Blue#1c69d4--color-electric-blueInteractive highlights, focus states — a vibrant, technical accent for user interaction.

Which fonts does BMW use?

FontWeightsFallback
BMWTypeNextLatin400, 700, 900Open Sans
BMWTypeNextLatin Light300Open Sans Light
RoleSizeLine heightToken
body16px1.63--text-body
subheading18px1.6--text-subheading
display60px1.3--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on BMW's public website (bmw.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by BMW. The BMW name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems