skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-bmw

Apply BMW's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#brand identity#color palette#design tokens#ui generation#bmw
One-click install
npx skills add https://github.com/deepparser/skills --skill design-bmw-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-bmw
Source: https://github.com/deepparser/skills/tree/main/design-bmw
Command: npx skills add https://github.com/deepparser/skills --skill design-bmw-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match BMW's visual identity requires precise knowledge of its colors, typography, spacing, and component rules, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Catalog: Provides BMW's exact color palette (BMW Blue #1c69d4, Focus Blue #0653b6), typography scale (BMWTypeNextLatin at weights 300/400/700/900), spacing system, and zero border-radius rules. - Component Styling Rules: Defines buttons, cards, navigation, forms, and layout principles including dark hero photography sections and tight line-heights (1.15–1.30). - Light and Dark Previews: Bundled preview.html and preview-dark.html files show the full design system implemented in HTML/CSS for visual verification. - Use Case: When asked to build a landing page styled like BMW, the Skill supplies exact hex values, font weights, and layout rules so the generated UI matches BMW's angular, precision-driven aesthetic. ## Quick Start Create a landing page for an electric vehicle using the BMW design system with a dark hero section and sharp-cornered buttons.

Frequently Asked Questions about design-bmw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that matches BMW's design system?▼

Invoke this Skill when generating interfaces styled like BMW. It supplies exact design tokens: BMW Blue #1c69d4 for interactive accents, BMWTypeNextLatin typography at weights 300/400/700/900, tight line-heights of 1.15–1.30, and zero border-radius on all elements.

What colors does the BMW design system use?▼

The palette includes BMW Blue (#1c69d4) for interactive accents, Focus Blue (#0653b6) for focus states, white (#ffffff) surfaces, Near Black (#262626) text, Meta Gray (#757575) secondary text, and Silver (#bbbbbb) muted text.

Does the BMW design system use rounded corners?▼

No. BMW uses 0px border-radius exclusively across all buttons, cards, forms, and containers. Sharp rectangular geometry is a non-negotiable part of the brand's angular, industrial identity.

Can I preview the BMW design system in dark mode?▼

Yes. The Skill bundles preview.html for the light theme and preview-dark.html for the dark theme. Both files implement the full token catalog in HTML/CSS so you can verify exact visual details before generating UI.

What typography rules define the BMW design system?▼

BMWTypeNextLatin Light at weight 300 handles 60px uppercase display headings, while weight 900 styles navigation and weight 400 handles body text. Line-heights stay tight between 1.15 and 1.30, with Helvetica and Japanese fonts as fallbacks.

Related Skills

Explore More Design & Creative Skills→
octavehqoctavehq

get-brand-components

Extract design tokens and components from a website into CSS and HTML files.

Official
Advanced
pedroapp100pedroapp100

frontend-design

Generate production-ready HTML, CSS, and React components for custom frontend designs.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
Adham7843Adham7843

ckm:design

Design brand identities, UI elements, and AI-generated mockups.

Community
Advanced