### BMW - Luxury automotive. - Dark premium surfaces, precise German engineering aesthetic - description: BMW's corporate site — distinct from BMW M's motors…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name BMW
description BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a "Learn More" link.
colors primary: "#1c69d4" primary-active: "#0653b6" primary-disabled: "#d6d6d6" ink: "#262626" body: "#3c3c3c" body-strong: "#1a1a1a" muted: "#6b6b6b" muted-soft: "#9a9a9a" hairline: "#e6e6e6" hairline-strong: "#cccccc" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#fafafa" surface-strong: "#ebebeb" surface-dark: "#1a2129" surface-dark-elevated: "#262e38" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#bbbbbb" m-blue-light: "#0066b1" m-blue-dark: "#1c69d4" m-red: "#e22718" success: "#22c55e" warning: "#f59e0b" error: "#dc2626"
typography display-xl: fontFamily: "'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0 display-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0 display-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0 display-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 title-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px label-uppercase: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px textTransform: uppercase button: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.5px nav-link: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.3px
rounded none: 0px xs: 2px sm: 4px md: 8px lg: 12px pill: 9999px full: 9999px
spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 80px
components top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 14px 32px height: 48px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px height: 48px button-secondary-on-dark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" hero-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 80px hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 80px model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px model-card-photo: backgroundColor: "{colors.surface-card}" rounded: "{rounded.none}" feature-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.none}" padding: 24px inventory-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.none}" padding: 16px filter-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 8px 14px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" configurator-option-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 16px 24px configurator-option-tile-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 15px 23px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 14px 16px height: 48px cookie-consent-card: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" category-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" m-stripe-divider: backgroundColor: transparent rounded: "{rounded.none}" cta-band-photo: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px footer: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px
BMW's corporate site carries a far more measured, corporate-automotive interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: {colors.canvas} (#ffffff) is the base surface, {colors.surface-card} (#fafafa) carries the soft-grey card plates, and dark navy {colors.surface-dark} (#1a2129) appears only inside hero bands — one per page, framing the lead model render.
Type runs BMW's licensed BMW Type Next Latin at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's "European-engineered" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.
The brand action color, BMW corporate blue ({colors.primary} — #1c69d4), works alone across every primary CTA — buttons are rectangular, 0px corner, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe ({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red}) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.
The configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.
Key Characteristics:
Light {colors.canvas} is the base surface; dark navy {colors.surface-dark} appears only inside hero bands — page rhythm relies on contrast.
BMW corporate blue ({colors.primary} — #1c69d4) acts as the single primary action color.
BMW Type Next Latin: weight 700 display against weight 300 body is the signature.
Buttons are rectangular, 0px radius — corporate dialect, distinct from M's sportier radii.
Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.
Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.
M tricolor stripe appears only in M-model contexts — not part of the corporate language.
Section rhythm holds at {spacing.section} (80px) for every major band.
BMW Blue (Primary) ({colors.primary} — #1c69d4): The single brand action color. All primary CTAs, "Learn More" link prefixes (blue text), nav-link active state. Press shifts to {colors.primary-active} (#0653b6).
M Blue Light ({colors.m-blue-light} — #0066b1) + M Blue Dark ({colors.m-blue-dark} — #1c69d4) + M Red ({colors.m-red} — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the "M" badge. Never as CTA colors.
Canvas ({colors.canvas} — #ffffff): The default page surface.
Surface Soft ({colors.surface-soft} — #f7f7f7): Soft grey for the footer and sub-navigation bands.
Surface Card ({colors.surface-card} — #fafafa): The light plate behind a model card's photo block.
Surface Strong ({colors.surface-strong} — #ebebeb): A slightly heavier grey used as a section divider.
Surface Dark ({colors.surface-dark} — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.
Surface Dark Elevated ({colors.surface-dark-elevated} — #262e38): One step lighter, used for nested cards on top of the dark hero.
Hairline ({colors.hairline} — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.
Hairline Strong ({colors.hairline-strong} — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.
Ink ({colors.ink} — #262626): All display and primary text. Not pure black — soft against photography.
Body ({colors.body} — #3c3c3c): Default running text.
Body Strong ({colors.body-strong} — #1a1a1a): Emphasized paragraphs and lead text.
Muted ({colors.muted} — #6b6b6b): Footer links, breadcrumbs, captions.
Muted Soft ({colors.muted-soft} — #9a9a9a): Disabled text, fine-print legal.
On Primary ({colors.on-primary} — #ffffff): White text on a blue button.
On Dark ({colors.on-dark} — #ffffff): White text on a dark hero band.
On Dark Soft ({colors.on-dark-soft} — #bbbbbb): A slightly muted white for secondary text on dark bands.
Success ({colors.success} — #22c55e): Confirmation messages and "available" indicators.
Warning ({colors.warning} — #f59e0b): Warning callouts.
Error ({colors.error} — #dc2626): Validation errors.
The system runs BMW Type Next Latin in two cuts: regular (display + UI labels) and BMW Type Next Latin Light (body + secondary copy). Fallback stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif.
The display/body split is functional:
BMW Type Next Latin (700) → display headlines, button labels, nav links
BMW Type Next Latin Light (300) → paragraphs, descriptive copy
BMW Type Next Latin (400) → caption, neutral nav-link contexts
This three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.
Token Size Weight Line Height Letter Spacing Use {typography.display-xl} 64px 700 1.05 0 Hero h1 ("iX3", model name) {typography.display-lg} 48px 700
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.