awesome-design-md-jp

# Example: Using MUJI design system
cp design-md/muji/DESIGN.md ./DESIGN.md

Follow the design specifications in DESIGN.md for all UI implementation.
Pay special attention to Japanese typography rules in the Typography section.

// Example: Parsing DESIGN.md for design tokens
import fs from 'fs';
import path from 'path';
 
function parseDesignMd(filePath) {
  const content = fs.readFileSync(filePath, 'utf-8');
  const tokens = {
    colors: {},
    typography: {},
    spacing: {}
  };
  
  // Extract color palette
  const colorMatch = content.match(/### Color Palette\n\n```css\n([\s\S]*?)```/);
  if (colorMatch) {
    const colorLines = colorMatch[1].split('\n');
    colorLines.forEach(line => {
      const match = line.match(/--([^:]+):\s*([^;]+);/);
      if (match) {
        tokens.colors[match[1]] = match[2].trim();
      }
    });
  }
  
  return tokens;
}
 
const tokens = parseDesignMd('./DESIGN.md');
console.log(tokens.colors);
// { primary: '#1976d2', background: '#ffffff', ... }

/* Proper Japanese font fallback chain */
body {
  font-family: 
    "Hiragino Kaku Gothic ProN",  /* macOS Japanese */
    "Hiragino Sans",               /* macOS modern */
    "Yu Gothic Medium",            /* Windows 8.1+ */
    "Meiryo",                      /* Windows fallback */
    "Noto Sans JP",                /* Web font */
    sans-serif;                    /* Generic fallback */
}
 
/* For mixed Japanese + English content */
.body-text {
  font-family: 
    "Hiragino Kaku Gothic ProN", 
    "Helvetica Neue",              /* English portions */
    Arial, 
    "Noto Sans JP", 
    sans-serif;
}

/* Japanese text requires more vertical space */
.ja-body {
  line-height: 1.8;  /* vs 1.5 for English */
}
 
.ja-heading {
  line-height: 1.6;  /* vs 1.2 for English */
}
 
.ja-caption {
  line-height: 1.7;  /* vs 1.4 for English */
}

/* Japanese body text needs slight letter-spacing */
.ja-body {
  letter-spacing: 0.05em;  /* 0.04-0.1em typical */
}
 
.ja-heading {
  letter-spacing: 0.08em;  /* Slightly more for headings */
}
 
/* No letter-spacing for Latin text */
.en-text {
  letter-spacing: 0;
}

/* Enable proportional metrics for Japanese fonts */
.ja-text {
  font-feature-settings: 
    "palt" 1,    /* Proportional alternate metrics */
    "kern" 1;    /* Kerning */
}
 
/* For vertical text */
.vertical-text {
  writing-mode: vertical-rl;
  font-feature-settings: 
    "vpal" 1,    /* Vertical proportional alternates */
    "vkrn" 1;    /* Vertical kerning */
}

/* Proper line-breaking rules for Japanese */
.ja-text {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;           /* Enforce strict kinsoku */
  /* or auto, normal, loose, anywhere, strict */
}
 
/* Prevent widows/orphans */
.ja-paragraph {
  orphans: 2;
  widows: 2;
}

/* Import design tokens from MUJI DESIGN.md */
:root {
  /* Colors from DESIGN.md */
  --primary: #000000;
  --background: #ffffff;
  --text: #333333;
  --border: #e0e0e0;
  
  /* Typography from DESIGN.md */
  --font-ja: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-en: "Helvetica Neue", Arial, sans-serif;
  
  /* Spacing from DESIGN.md */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}
 
body {
  font-family: var(--font-ja);
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--text);
  background: var(--background);
}
 
h1, h2, h3 {
  line-height: 1.6;
  letter-spacing: 0.08em;
}

<style>
.mixed-content {
  font-family: "Hiragino Kaku Gothic ProN", "Helvetica Neue", sans-serif;
}
 
/* Target Japanese characters */
.mixed-content:lang(ja) {
  line-height: 1.8;
  letter-spacing: 0.05em;
}
 
/* Target English characters */
.mixed-content:lang(en) {
  line-height: 1.5;
  letter-spacing: 0;
}
</style>
 
<div class="mixed-content">
  <p lang="ja">これは日本語のテキストです。</p>
  <p lang="en">This is English text.</p>
</div>

/* Mobile-first Japanese typography */
.ja-heading {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
 
@media (min-width: 768px) {
  .ja-heading {
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
}
 
@media (min-width: 1024px) {
  .ja-heading {
    font-size: 2.5rem;
    line-height: 1.4;
  }
}

// React component using parsed DESIGN.md tokens
import React from 'react';
import designTokens from './design-tokens.json';
 
const JapaneseCard = ({ title, description }) => {
  const styles = {
    card: {
      backgroundColor: designTokens.colors.background,
      border: `1px solid ${designTokens.colors.border}`,
      borderRadius: designTokens.radii.md,
      padding: designTokens.spacing.lg,
    },
    title: {
      fontFamily: designTokens.typography.fontFamily.japanese,
      fontSize: designTokens.typography.fontSize.h3,
      lineHeight: designTokens.typography.lineHeight.heading,
      letterSpacing: designTokens.typography.letterSpacing.heading,
      color: designTokens.colors.text,
      marginBottom: designTokens.spacing.md,
    },
    description: {
      fontFamily: designTokens.typography.fontFamily.japanese,
      fontSize: designTokens.typography.fontSize.body,
      lineHeight: designTokens.typography.lineHeight.body,
      letterSpacing: designTokens.typography.letterSpacing.body,
      color: designTokens.colors.textSecondary,
    },
  };
 
  return (
    <div style={styles.card}>
      <h3 style={styles.title}>{title}</h3>
      <p style={styles.description}>{description}</p>
    </div>
  );
};
 
export default JapaneseCard;

// Styled-components with Japanese typography
import styled from 'styled-components';
 
const JapaneseText = styled.p`
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1, "kern" 1;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
`;
 
const JapaneseHeading = styled.h2`
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-feature-settings: "palt" 1, "kern" 1;
`;
 
// Usage
const App = () => (
  <div>
    <JapaneseHeading>見出しテキスト</JapaneseHeading>
    <JapaneseText>
      本文のテキストです。適切な行間と字間が設定されています。
    </JapaneseText>
  </div>
);

https://kzhrknt.github.io/awesome-design-md-jp/gallery.html

# Open MUJI preview
open design-md/muji/preview.html
 
# Open Apple preview
open design-md/apple/preview.html

// scripts/extract-tokens.js
const fs = require('fs');
const path = require('path');
 
function extractTokens(designMdPath) {
  const content = fs.readFileSync(designMdPath, 'utf-8');
  const tokens = {
    colors: {},
    typography: {
      fontFamily: {},
      fontSize: {},
      lineHeight: {},
      letterSpacing: {}
    },
    spacing: {},
    radii: {}
  };
 
  // Extract CSS custom properties
  const cssBlocks = content.match(/```css\n([\s\S]*?)```/g) || [];
  cssBlocks.forEach(block => {
    const css = block.replace(/```css\n|```/g, '');
    const lines = css.split('\n');
    
    lines.forEach(line => {
      const match = line.match(/--([^:]+):\s*([^;]+);/);
      if (match) {
        const [, key, value] = match;
        
        if (key.startsWith('color-')) {
          tokens.colors[key.replace('color-', '')] = value.trim();
        } else if (key.startsWith('font-family-')) {
          tokens.typography.fontFamily[key.replace('font-family-', '')] = value.trim();
        } else if (key.startsWith('font-size-')) {
          tokens.typography.fontSize[key.replace('font-size-', '')] = value.trim();
        } else if (key.startsWith('line-height-')) {
          tokens.typography.lineHeight[key.replace('line-height-', '')] = value.trim();
        } else if (key.startsWith('letter-spacing-')) {
          tokens.typography.letterSpacing[key.replace('letter-spacing-', '')] = value.trim();
        } else if (key.startsWith('space-')) {
          tokens.spacing[key.replace('space-', '')] = value.trim();
        } else if (key.startsWith('radius-')) {
          tokens.radii[key.replace('radius-', '')] = value.trim();
        }
      }
    });
  });
 
  return tokens;
}
 
// Usage
const tokens = extractTokens('./design-md/muji/DESIGN.md');
fs.writeFileSync(
  './design-tokens.json',
  JSON.stringify(tokens, null, 2)
);

// tailwind.config.js
const designTokens = require('./design-tokens.json');
 
module.exports = {
  theme: {
    extend: {
      colors: designTokens.colors,
      fontFamily: {
        ja: designTokens.typography.fontFamily.japanese?.split(',').map(f => f.trim()) || [],
        en: designTokens.typography.fontFamily.english?.split(',').map(f => f.trim()) || [],
      },
      fontSize: designTokens.typography.fontSize,
      lineHeight: designTokens.typography.lineHeight,
      letterSpacing: designTokens.typography.letterSpacing,
      spacing: designTokens.spacing,
      borderRadius: designTokens.radii,
    },
  },
  plugins: [],
};

/* Wrong - missing fallbacks */
font-family: "Noto Sans JP", sans-serif;
 
/* Correct - full fallback chain */
font-family: 
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  "Yu Gothic Medium",
  "Meiryo",
  "Noto Sans JP",
  sans-serif;

.ja-text {
  word-break: normal;      /* Not 'break-all' */
  overflow-wrap: break-word;
  line-break: strict;      /* Enforce kinsoku */
}

.mixed-content {
  word-spacing: 0.25em;  /* Space between words */
  letter-spacing: 0.05em; /* Space between Japanese chars */
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;  /* or 'fallback', 'optional' */
  src: url('...') format('woff2');
}

/* Check if font supports 'palt' */
.ja-text {
  font-feature-settings: "palt" 1, "kern" 1;
  /* Not "palt" on or "palt" true */
}
 
/* Alternative: use font-variant */
.ja-text {
  font-variant-ligatures: common-ligatures;
  font-kerning: normal;
}

.vertical-text {
  writing-mode: vertical-rl;  /* or vertical-lr */
  text-orientation: upright;  /* Keep characters upright */
  font-feature-settings: "vpal" 1, "vkrn" 1;
}
 
/* For mixed vertical/horizontal */
.vertical-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;  /* Rotate Latin text */
}