Design System inspired by BMW

Precision engineering. Blue-white brand colors, clean grid, technical elegance.

Usage

npx getdesign@latest add bmw

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official BMW design system. A curated starting point for building BMW-like UIs with your AI coding agent.

Precision engineering. Blue-white brand colors, clean grid, technical elegance.

Preview

bmw.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF BMW

Precision engineering. Blue-white brand colors, clean grid, technical elegance.

Explore the system View tokens

Color Palette

Precision engineering. Blue-white brand colors, clean grid, technical elegance.

Primary

BMW Blue

#1c69d4

Brand color

White

#ffffff

Brand color

Black

#000000

Brand color

Dark Gray

#262626

Brand color

Medium Gray

#666666

Brand color

Light Gray

#f2f2f2

Brand color

Silver

#cccccc

Brand color

Typography

A type system inspired by BMW.

BMWTypeNext

BMWTypeNext, BMWTypeNext

Helvetica Neue

Helvetica Neue, BMWTypeNext

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by BMW.

Not detected on this URL

Components

Other component primitives mapped from the BMW spec.

Not detected on this URL

Design System Inspired by BMW

1. Visual Theme & Atmosphere

Precision engineering. Blue-white brand colors, clean grid, technical elegance.

Key Characteristics:

BMW Blue (#1C69D4) and white as core brand colors

Clean grid-based layouts with technical precision

Configurator-style interactive components

Premium product photography with studio lighting

German engineering precision in visual design

2. Color Palette & Roles

Primary

BMW Blue (#1C69D4): Brand color
White (#FFFFFF): Brand color
Black (#000000): Brand color
Dark Gray (#262626): Brand color
Medium Gray (#666666): Brand color
Light Gray (#F2F2F2): Brand color
Silver (#CCCCCC): Brand color

3. Typography Rules

Font Family

Display & UI: BMWTypeNext, Helvetica Neue

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

BMW Blue: #1C69D4
White: #FFFFFF
Black: #000000
Dark Gray: #262626
Medium Gray: #666666
Light Gray: #F2F2F2

Typography

Font: BMWTypeNext, Helvetica Neue