Where to Find Example DESIGN.md Files for Fintech and E‑commerce Industries

You can find industry‑specific example DESIGN.md files in the design‑md/ folder of the VoltAgent/awesome‑design‑md repository, organized by brand under industry headings like "Fintech & Crypto" and "E‑commerce & Retail" in the README.

The awesome‑design‑md repository maintains a curated collection of real‑world DESIGN.md specifications extracted from public websites. Each file follows Google’s Stitch DESIGN.md format and provides complete design system documentation for major brands across multiple sectors.

Fintech and Cryptocurrency DESIGN.md Examples

Fintech examples are listed under the Fintech & Crypto heading in the repository README. Each entry links to a dedicated subdirectory containing the full DESIGN.md file and accompanying preview HTML.

Available fintech examples include:

• Binance – design‑md/binance/DESIGN.md (view file)
• Coinbase – design‑md/coinbase/DESIGN.md (view file)
• Kraken – design‑md/kraken/DESIGN.md (view file)
• Mastercard – design‑md/mastercard/DESIGN.md (view file)
• Revolut – design‑md/revolut/DESIGN.md (view file)
• Stripe – design‑md/stripe/DESIGN.md (view file)
• Wise – design‑md/wise/DESIGN.md (view file)

Each subdirectory also contains preview.html and preview-dark.html files that render the visual catalog of colors, typography, and components defined in the DESIGN.md.

E‑commerce and Retail DESIGN.md Examples

E‑commerce examples are grouped under the E‑commerce & Retail heading in the same README index.

Available e‑commerce examples include:

• Airbnb – design‑md/airbnb/DESIGN.md (view file)
• Nike – design‑md/nike/DESIGN.md (view file)
• Shopify – design‑md/shopify/DESIGN.md (view file)
• Starbucks – design‑md/starbucks/DESIGN.md (view file)

These files capture the visual identity, component libraries, and layout principles used by major retail platforms, providing reference implementations for checkout flows, product cards, and navigation systems.

Structure of DESIGN.md Files

Every DESIGN.md file in the repository follows a standardized nine‑section structure based on the Stitch specification:

1. Visual theme & atmosphere – Overall mood, design philosophy, and brand voice.
2. Color palette & roles – Semantic color names, hex values, and functional usage patterns.
3. Typography rules – Font families, hierarchy tables, sizing scales, and line heights.
4. Component stylings – Specifications for buttons, cards, inputs, navigation bars, and state variants.
5. Layout principles – Spacing scales, grid systems, and whitespace guidelines.
6. Depth & elevation – Shadow systems and surface hierarchy definitions.
7. Do’s and don’ts – Guardrails and anti‑patterns to maintain UI consistency.
8. Responsive behavior – Breakpoints, touch targets, and collapsing strategies.
9. Agent prompt guide – Ready‑to‑use prompt snippets for AI coding agents.

How to Integrate DESIGN.md Files Into Your Project

You can consume these example files directly in your development workflow using HTTP requests, file system operations, or AI agent prompts.

Download a Specific DESIGN.md

Use curl to copy a fintech or e‑commerce example into your project root:

# Download Binance DESIGN.md for fintech reference

curl -L https://github.com/VoltAgent/awesome-design-md/raw/main/design-md/binance/DESIGN.md \
  -o DESIGN.md

# Or download Nike for e-commerce reference

curl -L https://github.com/VoltAgent/awesome-design-md/raw/main/design-md/nike/DESIGN.md \
  -o DESIGN.md

Parse DESIGN.md in JavaScript

Load and parse the specification for programmatic access to design tokens:

import fs from 'fs';

const designText = fs.readFileSync('DESIGN.md', 'utf8');

// Parse using a Stitch-compatible parser (example API)
const designSpec = parseDesignMD(designText);

// Extract specific tokens
const primaryColor = designSpec.palette.find(p => p.role === 'primary');
console.log('Primary color:', primaryColor.hex);

Reference Visual Previews

Open the preview.html files in a browser to view the rendered style guide:

<!-- Binance visual catalog -->
https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/binance/preview.html

<!-- Nike visual catalog -->
https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nike/preview.html

Prompt AI Coding Agents

Use the DESIGN.md file to instruct AI agents like OpenCode or Claude:

You are given a DESIGN.md file at the project root.
Build a landing page that follows the visual theme, color palette,
typography, and component styles defined in the file.

Summary

• Location: Find example DESIGN.md files in the design‑md/<brand>/ folder structure of the VoltAgent/awesome‑design‑md repository.
• Fintech Path: Access Binance, Coinbase, Stripe, and other financial examples under the Fintech & Crypto section.
• E‑commerce Path: Access Airbnb, Nike, Shopify, and other retail examples under the E‑commerce & Retail section.
• File Pattern: Each brand includes DESIGN.md, preview.html, and preview‑dark.html.
• Standard Format: All files follow the nine‑section Stitch DESIGN.md specification for consistent parsing.

Frequently Asked Questions

What is the exact file path pattern for DESIGN.md files in the repository?

Each example follows the pattern design‑md/<brand‑slug>/DESIGN.md. For example, the Stripe fintech specification lives at design‑md/stripe/DESIGN.md, while the Shopify e‑commerce specification is at design‑md/shopify/DESIGN.md. Each directory also contains HTML preview files for visual reference.

Do these DESIGN.md files include dark mode specifications?

Yes. According to the repository structure, each brand subdirectory includes a preview‑dark.html file alongside the standard preview.html. These files visualize the dark mode color palettes and component states defined within the DESIGN.md specifications.

Can I use these DESIGN.md files with AI coding agents?

Yes. The repository specifically includes an Agent prompt guide section in each DESIGN.md file that provides ready‑to‑use prompt snippets. You can point agents to the downloaded file and instruct them to generate components matching the exact color roles, typography scale, and spacing values documented.

How do I view the visual catalog for a specific brand without downloading the repository?

Navigate directly to the preview.html file in any brand subdirectory via GitHub's web interface. For example, view the Binance color palette and typography at design‑md/binance/preview.html in the browser, or use the raw GitHub URLs to fetch the HTML for local viewing.

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