On light
Brand guidelines
Markdown Tidy — brand
Logo, colors, typography, and usage rules. Everything you need to write about, link to, or embed the product.
Logo
The mark is a document with a folded corner, a lowercase “m”, and two tidy text lines — a literal picture of what the product does. The downloadable SVG draws in var(--mark) so a single file covers every color context.
On dark
On brand blue
Wordmark lockup
Clear space
Keep a margin of at least half the mark’s height on every side free of competing graphics or text. The mark is designed for square containers; never crop, stretch, or rotate it.
Color
Brand blue carries primary actions and the colored logo variant. Ink (near-black) is the default mark color on light surfaces. Hex and HSL values match the design tokens in globals.css.
Brand Blue
- Hex
- #1D7AF2
- HSL
- hsl(217 91% 55%)
- Token
- --primary
Primary CTA, brand-blue mark variant, hero gradients.
Ink
- Hex
- #171717
- HSL
- hsl(0 0% 9%)
- Token
- --mark (default)
Default mark color on light surfaces. Near-black, not pure #000.
Paper
- Hex
- #FFFFFF
- HSL
- hsl(0 0% 100%)
- Token
- --card
Background under the mark in the icon + apple-touch variants.
Foreground
- Hex
- #0F172A
- HSL
- hsl(222 39% 11%)
- Token
- --foreground
Body text on light surfaces.
Typography
Two faces. Inter for everything human-readable; JetBrains Mono for code, hex values, and any character grid where alignment matters.
Sans
Inter Variable · weights 400 / 500 / 600 / 700 / 800
Paste markdown, get a polished document.
Body text sits on the foreground token with relaxed line-height. The wordmark uses Inter 800 with negative letter-spacing.
Mono
JetBrains Mono Variable · weights 400 / 500 / 700
# Heading
- list item
```ts
import { tidy } from '@product/convert';
const out = await tidy(input);
```Usage rules
Do
- Use the SVG masters whenever possible — they scale cleanly.
- Keep the mark square. Resize equal width and height (N×N).
- Override
--markvia CSS to recolor; don’t edit the file. - Maintain at least half-mark clear space on every side.
- Pair the mark with the “Markdown Tidy” written name in copy.
Don’t
- Don’t recolor outside the palette above (no gradients, no shadows, no outlines).
- Don’t stretch, rotate, or crop the mark.
- Don’t place the mark on busy photographic backgrounds without a solid plate.
- Don’t swap “mdtidy” for “Markdown Tidy” inside the wordmark image.
- Don’t recreate the mark in another font — always use the SVG.
Naming & contact
The product name in writing is Markdown Tidy (two words, title case). The wordmark renders the domain spelling mdtidy (lowercase, no space) — that’s a visual treatment only. Use “Markdown Tidy” in body copy, headlines, alt text, and credits.
Press, partnership, or asset requests: support@mg.mdtidy.com. Need a format we don’t ship here (EPS, AI, a specific raster size)? Ask and we’ll generate it.