# Brand guidelines

> The visual identity of Haytham A. Salama: the handwritten signature, colour, type and voice, plus a brand kit to download.

Page: https://haythamasalama.me/brand

## Principles

- **Ink first**: black, white and generous space carry everything.
- **Signed by hand**: the handwritten signature is the logo. It is never retyped, redrawn, recoloured or stretched.
- **Colour is a signal**: Iris and Azure live in small places (a badge, a hairline, a focus ring), never more than about 5% of a screen.

## Colour

- Ink `#0B0B0C`: page, dark theme (the default)
- Paper `#FFFFFF`: page, light theme
- Text `#EDEDEF` and Muted `#A1A1AA` on Ink
- Iris 500 `#7F7CF2`: the creative
- Azure 500 `#4F9BFF`: the engineer

## Typography

- **Geist** (400, 500, 600) for headings and text
- **Geist Mono** for labels, dates, repositories and code
- **Instrument Serif** italic for one human phrase per page

## Name

Write the name as "Haytham A. Salama" and the title as "Senior Software Engineer · SaaS, AI, FinTech & Logistics".

## Brand kit

- [haytham-signature-white.svg](https://haythamasalama.me/brand-kit/haytham-signature-white.svg): Signature, white, for dark backgrounds
- [haytham-signature-black.svg](https://haythamasalama.me/brand-kit/haytham-signature-black.svg): Signature, black, for light backgrounds
- [haytham-signature-gradient.svg](https://haythamasalama.me/brand-kit/haytham-signature-gradient.svg): Signature in the Iris to Azure gradient, for artwork only
- [haytham-app-icon.svg](https://haythamasalama.me/brand-kit/haytham-app-icon.svg): App icon
- [haytham-favicon.svg](https://haythamasalama.me/brand-kit/haytham-favicon.svg): Favicon
- [haytham-brand-tokens.css](https://haythamasalama.me/brand-kit/haytham-brand-tokens.css): Colour tokens as CSS custom properties
- [haytham-portrait.jpg](https://haythamasalama.me/brand-kit/haytham-portrait.jpg): Portrait