salmi.dev
salmi.dev / Brand kit v1.0MS / Sd

Brand assets.
MS and Sd.

MS identifies Mahmoud Salmi. Sd identifies SalmiDev. Download the logos, choose colors for each brand, and generate icons for web and mobile applications.

Browse logos
01 — The personMS
MS monogram in pale blue with a blue diagonal accent
Mahmoud Salmi Blue / Dark
02 — The practiceSd
Sd monogram in pale emerald with a green diagonal accent
SalmiDev Emerald / Dark
Primary colors: MS blue / Sd emerald512 × 512 SVG
01 / Logos32 SVG variants

Select colors
for each brand.

MS defaults to blue; Sd defaults to emerald. Each brand has four palettes and light and dark variants. These controls do not change the site theme or the primary previews above.

Light variants use dark lettering; dark variants use light lettering. Transparent SVGs retain the same padding without the background tile.

02 / Shape previewsSquare / Rounded / Circle / Outline

Compare icon
containers.

Preview both brands with the palettes selected above. The transparent logo sits inside a CSS container; the source paths and padding are unchanged.

Uses the MS and Sd palettes above

These are layout previews, not additional SVG exports. Rounded SVG downloads use the built-in 64px corner radius. Circular and outlined containers are applied by the consuming website or app.

03 / Color tokensDownload colors.json ↗

Four palettes.
Light, dark, accent.

These are the canonical logo colors. The site-theme selector uses darker, less saturated versions for page surfaces and lighter accents for readable controls. It does not modify these tokens.

Update the tokens

Edit packages/sd-tool-brand/data/colors.json, then run pnpm build:assets to regenerate all sites’ CSS, SVGs, and icons. Generated files are disposable; never edit the copies in a site’s public directory.

Download generated CSS 
/* Global tokens */
.logo-accent {
  color: var(--salmi-emerald-accent);
}

/* Use data-palette and data-mode on the container */
.brand-surface {
  background: var(--brand-bg);
  color: var(--brand-fg);
}
04 / TypographyMonaspace variable fonts

Neon for UI.
Xenon for headings.

The guide uses Monaspace Neon for navigation, body text, and code. Monaspace Xenon is the slab-serif face used in highlighted headings. Logo lettering is drawn as SVG paths, not typeset.

Monaspace NeonSans / Variable

salmi.dev
MS / Sd_

Aa Bb Cc Dd Ee Ff Gg
0123456789 → {} & #

Monaspace XenonSlab serif / Variable

salmi.dev
MS / Sd

Aa Bb Cc Dd Ee Ff Gg
0123456789 → {} & #

Fonts by GitHub Next and Lettermatic, served locally as variable WOFF2. Monaspace documentation ↗ · SIL Open Font License

05 / Downloads & generationSVG / PNG / ICO / PWA / Mobile

Download SVGs.
Generate icon sets.

Use an SVG directly, or run the local generator for PNG sizes, favicons, PWA manifests, and mobile icon files. Code examples use Catppuccin Mocha syntax highlighting in every site theme.

Primary SVGs · fixed brand colorsMS / Blue SVG ↓Sd / Emerald SVG ↓
01

Install and build

Requires Node.js 22.12+ and pnpm. All sites use sd-tool-brand as a workspace dev dependency. 

# Clone the sites monorepo and build all sites
git clone git@github.com:salmi-dev/sd-sites.git
cd sd-sites
pnpm install
pnpm build
pnpm check
02

Generate icons

The default is emerald Sd in light mode. Pass flags to select a different brand or palette. 

pnpm icons
node packages/sd-tool-brand/dist/cli/sd-generate-icons.mjs \
  --brand ms --palette blue \
  --mode dark
03

Ship the sites

Site dev/build commands generate icons automatically. Deploy the root dist directory for www.salmi.dev, /brand/, and /me/. 

dist/
  index.html
  icons/             # Homepage icons
  brand/
    index.html
    icons/           # Brand guide icons
  me/
    index.html
    icons/           # MS résumé icons

# Standalone CLI exports:
packages/sd-tool-brand/dist/icons/sd-emerald-light/
Website & PWA

Keep manifest-relative images together. Use --base /brand/ to set the manifest’s start URL and scope for a subpath (default: /). All sites already configure this. Installed icons do not automatically follow your website’s theme. 

<link rel="icon" href="/icons/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/icons/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/icons/site.webmanifest">
<meta name="theme-color" content="#D8FFF0">
iOS & Android

iOS / iPadOS

The ios/ directory contains opaque PNGs and a Contents.json catalog. Copy the contents to an Xcode AppIcon.appiconset and review your target’s icon slots. The 1024px App Store image has no alpha.

Android

The android/mipmap-*/ directories contain legacy launcher sizes. PWA maskable icons have a full-bleed background and safe inset. Native adaptive XML and themed monochrome icons are not included.

Generate from a custom SVG

Square sources work best. Brand, palette, and mode still determine the manifest name and background for maskable and mobile exports. 

node packages/sd-tool-brand/dist/cli/sd-generate-icons.mjs --svg ./my-logo.svg \
  --brand sd --palette emerald --mode light \
  --out ./public/icons
06 / Construction & usageVector geometry

Shared paths.
Consistent spacing.

S geometry and accent

Both logos use the same S path and lower-right diagonal accent. The S has 24-unit horizontal strokes, including its center bar. All letters are vector paths; the SVGs contain no embedded fonts or raster images.

Padding and small sizes

Keep the original padding when placing a logo. Use transparent variants on custom backgrounds. Check favicon exports at their actual size: the silhouette should remain readable even when the accent is small.

The SVGs are geometric reconstructions of the approved concept. The JSON defines the exact flat color values used for exports.