mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 17:29:29 +05:30
amitwh
77f8ba3d9d
Branding: - All app icons regenerated from the new vector brand kit (M↓ mark): icon.png/icon@2x (app + packaging), favicon.png, tray-icon.png, and the full assets/icons/ size set — generate-icons.js now rasterizes app-icon.svg directly (docico1.png removed) - index.html gets proper favicon/apple-touch links from the kit - Welcome tab hero shows the new mark; README gets the horizontal wordmark - assets/logo.png (ConcreteInfo) intentionally untouched CI release fixes (win/mac jobs were failing): - FiraCode download moved from moving raw/master URLs (hash drifted upstream, tripping the pin) to the immutable 6.2 release asset; repo fonts updated to the pinned 6.2 bits - macOS pandoc extractor locates the binary in the archive instead of assuming a bin/ layout that the macOS zip doesn't have Stray upload archive (markdown-converter-assets (1).zip) excluded.
96 lines
3.9 KiB
Markdown
96 lines
3.9 KiB
Markdown
# Markdown Converter — Brand Assets
|
||
|
||
Visual identity for [markdown-converter](https://github.com/amitwh/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`:
|
||
|
||
```markdown
|
||
<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):
|
||
|
||
```html
|
||
<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):
|
||
|
||
```json
|
||
{
|
||
"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 */
|
||
```
|