Using DESIGN.md Files from Awesome-Design-MD for Automotive Sector Projects

Yes, you can use DESIGN.md files from the VoltAgent/awesome-design-md repository in automotive sector projects under the MIT License, provided you only reuse the design token definitions and not the underlying brand trademarks or copyrighted visual assets.

The VoltAgent/awesome-design-md repository provides a comprehensive collection of brand-specific design systems formatted as Markdown/YAML files, enabling consistent automotive branding implementation in web applications. These DESIGN.md files contain structured design tokens—including colors, typography, spacing, and component definitions—for major automotive manufacturers such as Ferrari, BMW M, and Lamborghini. Understanding how to legally and technically integrate these files into your automotive project requires careful attention to licensing boundaries and brand compliance requirements.

Understanding the MIT License and Brand Compliance

The repository is released under the permissive MIT License, which explicitly permits copying, modification, and redistribution of the source files for commercial use. According to the LICENSE file in the repository root, you may include these token definitions in automotive-sector products without obtaining additional permission from the repository author.

However, the MIT License only covers the textual representation of the design system. The actual brand identities—Ferrari, BMW, Lamborghini, and Renault—own the trademarks, visual assets, and proprietary typefaces referenced in files like design-md/ferrari/DESIGN.md and design-md/bmw-m/DESIGN.md. While you may legally use the JSON/YAML token structure under MIT, deploying the actual brand logos, copyrighted photography, or proprietary fonts in a commercial product requires explicit permission from the brand owner.

Technical Architecture and Token Structure

Each DESIGN.md file is self-contained and follows a consistent token hierarchy across all automotive brands. The files define:

• Color tokens: primary, canvas, ink, on-primary
• Typography specifications: font families, sizes, line heights, weights, and text transforms
• Spacing and border radius values: rounded-none, spacing units
• Component-specific definitions: button typography, display mega fonts

This modularity enables straightforward integration into modern design-system pipelines supporting JSON/YAML specifications, such as Tailwind CSS, Style Dictionary, and Theme UI.

Implementation Examples

Importing DESIGN.md into Tailwind CSS

You can parse a DESIGN.md file using the js-yaml library and map the tokens directly into your Tailwind configuration. This approach enables a Ferrari-styled UI or any other automotive brand with a single import.

// tailwind.config.js
const yaml = require('js-yaml');
const fs   = require('fs');

// Load the Ferrari design tokens
const ferrariTokens = yaml.load(
  fs.readFileSync(
    './node_modules/awesome-design-md/design-md/ferrari/DESIGN.md',
    'utf8'
  )
);

// Map tokens to Tailwind theme
module.exports = {
  theme: {
    colors: {
      primary: ferrariTokens.colors.primary,
      canvas:  ferrariTokens.colors.canvas,
      ink:    ferrariTokens.colors.ink,
    },
    fontFamily: {
      sans: [ferrariTokens.typography.button.fontFamily],
    },
    borderRadius: {
      none: ferrariTokens.rounded.none,
    },
    extend: {
      fontSize: {
        'btn': [
          ferrariTokens.typography.button.fontSize,
          {
            lineHeight: ferrariTokens.typography.button.lineHeight,
            letterSpacing: ferrariTokens.typography.button.letterSpacing,
            fontWeight: ferrariTokens.typography.button.fontWeight,
            textTransform: ferrariTokens.typography.button.textTransform,
          },
        ],
      },
    },
  },
};

Generating CSS Variables with Style Dictionary

For build-time CSS generation, configure Style Dictionary to consume the DESIGN.md files and output CSS custom properties. This method produces standard CSS variables that any automotive web portal can consume.

{
  "source": ["./node_modules/awesome-design-md/design-md/bmw-m/DESIGN.md"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/",
      "files": [
        {
          "destination": "variables.css",
          "format": "css/variables"
        }
      ]
    }
  }
}

Running style-dictionary build produces a variables.css file containing CSS custom properties such as --primary, --canvas, and --button-font-size. You can then reference these variables in your component styles:

.button-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  font-size: var(--button-font-size);
  border-radius: var(--rounded-none);
}

Dynamic Brand Switching in React

The consistent token hierarchy across brands enables runtime switching between automotive OEM configurations. This approach is ideal for white-label dealership portals that must support multiple brand identities.

import React, { useState } from 'react';
import ferrariTokens from './design-md/ferrari/DESIGN.md';
import bmwTokens     from './design-md/bmw-m/DESIGN.md';

const brandMap = {
  ferrari: ferrariTokens,
  bmwM:    bmwTokens,
};

export default function BrandSwitcher() {
  const [brand, setBrand] = useState('ferrari');
  const tokens = brandMap[brand];

  return (
    <div style={{ background: tokens.colors.canvas, color: tokens.colors.ink }}>
      <button
        style={{
          background: tokens.colors.primary,
          color: tokens.colors.onPrimary,
          fontFamily: tokens.typography.button.fontFamily,
        }}
        onClick={() => setBrand(brand === 'ferrari' ? 'bmwM' : 'ferrari')}
      >
        Switch Brand
      </button>
      <h1 style={{ fontFamily: tokens.typography.displayMega.fontFamily }}>
        {brand === 'ferrari' ? 'Ferrari' : 'BMW M'}
      </h1>
    </div>
  );
}

Repository Structure and Key Files

The following files provide the core material for integrating the design system into automotive projects:

• LICENSE — MIT license governing the repository's source files.
• design-md/ferrari/DESIGN.md — Full token and component definition for the Ferrari brand (luxury-automotive).
• design-md/bmw-m/DESIGN.md — Token set for BMW M (performance-automotive).
• design-md/renault/DESIGN.md — Token set for Renault (French automotive).
• design-md/lamborghini/DESIGN.md — Token set for Lamborghini (luxury-automotive).

Summary

• MIT License coverage: You may freely use, modify, and redistribute the DESIGN.md token definitions in commercial automotive projects.
• Brand asset restrictions: The license does not grant rights to use trademarks, logos, or proprietary fonts; obtain separate permission from brand owners for visual assets.
• Technical compatibility: The YAML/Markdown structure integrates directly with Tailwind CSS, Style Dictionary, and React applications.
• Multi-brand support: The consistent token hierarchy enables runtime brand switching for white-label automotive portals.

Frequently Asked Questions

Can I use the Ferrari or BMW design tokens in a commercial automotive application?

Yes, the MIT License explicitly permits commercial use of the token definitions contained in design-md/ferrari/DESIGN.md and design-md/bmw-m/DESIGN.md. You may copy, modify, and redistribute these files in your own projects without additional permission from the repository author, provided you do not claim ownership of the underlying code.

What is the difference between the MIT license and brand trademark rights?

The MIT License covers only the textual representation of the design system—the YAML structure, token names, and values. It does not grant you rights to use the brand identity assets, including Ferrari's prancing horse logo, BMW's roundel, proprietary typefaces, or copyrighted photography. Using these visual elements in a product requires explicit permission from the respective automotive brand owners.

How do I switch between different automotive brands at runtime?

You can implement dynamic brand switching by importing multiple DESIGN.md files into a JavaScript object map, then selecting the active brand based on user preference or subdomain configuration. As demonstrated in the React example above, the consistent token structure across design-md/ferrari/DESIGN.md and design-md/bmw-m/DESIGN.md allows you to swap entire color palettes and typography systems by changing a single configuration key.

Which build tools support importing DESIGN.md files directly?

Most modern design-system tools support YAML or Markdown imports through custom parsers. Tailwind CSS accepts JavaScript configuration objects that you can populate by parsing DESIGN.md with js-yaml. Style Dictionary consumes YAML files directly to generate CSS variables, SCSS, or iOS/Android format outputs. Webpack and Vite configurations can also add loaders to import .md files as structured data objects for use in React, Vue, or Angular applications.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}