design-bmw
BMW Design System Skill
When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match BMW's visual identity.
Reference Previews
For a visual reference of how this design system looks when implemented, see the bundled HTML previews:
- Light theme: preview.html
- Dark theme: preview-dark.html
Read these files when you need to verify exact visual implementation details, CSS values, or component structure.
1. Visual Theme & Atmosphere
BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.
The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.
More from deepparser/skills
exa.ai-websearch-api
A skill that equips you with real-time, source-grounded web search and content retrieval using the Exa API—optimized for balanced relevance and speed (type="auto") and full-text extraction for downstream reasoning, RAG, and code assistance. Powering agents with fast, high-quality web search by Exa.AI.
14oas-api-spec-generator
Generate OpenAPI 3.2.0 specifications for third-party APIs (OpenAI, Anthropic, Google, Microsoft, Stripe, GitHub, Slack, AWS, and more)
8eks-cluster
Create and manage Amazon EKS clusters, managed node groups, and EC2 instances. Use when: (1) Provisioning a new EKS cluster from scratch, (2) Adding or modifying managed node groups, (3) Choosing EC2 instance types for workloads, (4) Installing EKS addons (CoreDNS, kube-proxy, VPC CNI, EBS CSI, Pod Identity Agent), (5) Setting up VPC networking for EKS, (6) Configuring cluster autoscaling with Karpenter or Cluster Autoscaler, (7) Deploying services to EKS, (8) Troubleshooting EKS node or cluster issues. Requires: aws CLI v2, eksctl, kubectl.
6aws-s3-eks
Create and manage Amazon S3 buckets with EKS Pod Identity authentication. Use when: (1) Creating S3 buckets for any service running on EKS, (2) Setting up EKS Pod Identity so pods can access S3 without static credentials, (3) Configuring IAM roles/policies for S3 access, (4) Connecting Kubernetes services to S3 storage on EKS, (5) Troubleshooting S3 access from Kubernetes pods. Requires: aws CLI v2, kubectl, eksctl.
5design-apple
Apply Apple's design system (colors, typography, components, layout, shadows) when building UI. Use when the user wants to create interfaces styled like Apple.
3azure-bot
Create and manage Azure Bot resources using the Azure CLI. Covers the full lifecycle: identity creation, bot registration, channel configuration (Teams, Slack, Telegram, Direct Line, and more), and deployment to Azure App Service. ESPECIALLY for OpenClaw agents.
3