markdown-converter/assets/markdown-converter-assets/README.md

Markdown Converter — Brand Assets

Visual identity for markdown-converter: a cross-platform Markdown editor & document converter powered by Pandoc.

Concept

The mark is a stylized M whose right descender becomes a downward chevron — a literal "M↓" for Markdown, suggesting the source document flowing downward into rendered output (PDF, DOCX, PPTX, …).

The palette is a vibrant orange-to-deep-orange gradient (#FB923C → #C2410C) on a white mark — warm, energetic, distinctive. The mark itself is white on light surfaces, and a luminous peach-to-orange gradient (#FFEDD5 → #FB923C) on dark surfaces.

Files

App icon (vector, primary)

These are true SVG app icons — clean vector paths, no rasters. Drop them straight into a macOS/Windows/Linux app bundle, a PWA manifest, an iOS asset catalog, an Electron build, or any HTML page.

File	Use it for
app-icon.svg	Primary app icon. Emerald→teal vertical gradient, subtle white highlight upper-left, white M↓ mark.
app-icon-dark.svg	Dark-mode app icon. Charcoal gradient background, soft teal radial glow upper-left, mint-to-emerald gradient on the M↓ mark.
app-icon-flat.svg	Flat solid variant. Single emerald background, white M↓ mark. Use when you can't render gradients (print, stickers, single-color contexts).

Logo (wordmark)

File	Use it for
logo-horizontal.jpg (2752×1536)	High-res raster master. README hero, press kit.
logo-horizontal-1600w.jpg (1600×893)	Web-ready compressed version.
logo-horizontal.svg	Vector wordmark. Use in HTML, CSS, anywhere that needs to scale.

Vector mark (for code & inline use)

File	Use it for
mark.svg	Gradient SVG mark. Drop into HTML, use as a UI element, or rasterize at any size.
mark-mono.svg	Monochrome SVG. Uses currentColor — style it from CSS (color: white;) for any single-color context.
mark-standalone.jpg (2048×2048)	Raster M↓ on white, for places that need a PNG (GitHub avatar, doc thumbnails).

Favicons (rasterized from app-icon.svg)

In the favicons/ directory:

File	Use it for
favicon.ico	Legacy .ico (16/32/48/64 embedded). Drop at the site root.
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png	Standard browser favicons.
apple-touch-icon.png (180×180)	iOS home screen & "Add to Home Screen".
icon-192.png, icon-512.png	Android home screen, PWA manifest, web app.

Social preview

File	Use it for
og-social-preview-1200x630.jpg	GitHub social preview — set as the repository's social card image (Settings → Social preview). Also works as Open Graph / Twitter Card.

Usage in the repo

Drop the vector icons + favicon set into the repo root or a /brand folder, then in README.md:

<p align="left">
  <img src="./brand/app-icon.svg" width="80" alt="Markdown Converter">
</p>

For the favicon, in index.html (or any HTML site):

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

For an Electron app, point build.icon at the SVG (or a 512×512 PNG export):

{
  "build": {
    "icon": "brand/icon-512.png"
  }
}

Color tokens

--mc-orange-400: #FB923C   /* gradient start (light) */
--mc-orange-700: #C2410C   /* gradient end   (light) */
--mc-orange-500: #F97316   /* flat / accent        */
--mc-peach-100:  #FFEDD5   /* dark-mode mark start */
--mc-orange-300: #FDBA74   /* dark-mode mark mid   */
--mc-ink-900:    #0F172A   /* primary text         */
--mc-ink-500:    #475569   /* secondary text       */
--mc-ink-400:    #94A3B8   /* tagline / muted      */