Brand system | Esam Eisa

Logo

The wordmark

esam eisa, always lowercase, set in Megrim. White on midnight, midnight on light. Download a transparent PNG to use in designs or to attach to an AI tool.

esam eisa

On midnightPrimary

esam eisa

On lightLight backgrounds

esam eisa

On electricCall-to-action bands

Clear space at least the height of the “e” on every side.
Minimum size 24px tall on screen, so the thin strokes stay visible.
Never capitalise it, change the font, or add shadows, outlines or gradients.

Colour

Palette

Hex values below are read live from the CSS variables. Click a swatch to copy its token.

Electric

The light: links, icons, glows, focus rings and the call-to-action band.

Midnight

The space: navbar, heroes, footer and banners. Every page starts here.

Amber

The action: only the single most important button on a screen.

Slate

The voice: headings, body text, borders and light surfaces.

Semantic roles

Components use roles, never raw hex: $brand, $ink, $line… so a palette change is one edit.

$brand Links, icons, active states
$brand-strong Hover, gradients
$accent Primary action
$surface-dark Navbar, heroes, footer
$ink Headings
$text Long-form text
$muted Secondary text
$line Borders, dividers
$tint Alternate sections

Surfaces

Three surfaces, one rhythm

Pages flow midnight → light → (tint) → electric → midnight footer. Never put two dark surfaces next to each other without a light one between.

%surface-midnight Heroes, navbar, footer Electric glow, faint grid, white text.

$surface / $tint Content White and slate-50, alternating by section.

%surface-electric One call to action The single bold blue moment on a page.

Typography

Poppins, one family

Tight tracking on large headings, generous line height for reading. Arabic uses zero letter-spacing so letters stay joined.

Displayclamp(38px, 5vw, 64px) · 700 · -0.025em: Products built for businesses.
Heading 2clamp(30px, 3.4vw, 44px) · 700 · -0.02em: How I can help your business
Heading 320px · 600: Payment Solutions
Eyebrow13px · 600 · uppercase · 0.1em: Selected work
Body17px · 400 · 1.65: I help startups and growing businesses ship e-commerce, FinTech and real-estate platforms.
Small14px · 500: Free intro call

Components

Building blocks

Buttons on midnight

Start a project See my work

Available for new projects

On light

All services

UI/UX design
Back-end

Project card

E-commerce

HalaOrders

An e-commerce platform for merchants in Egypt and the region to launch a branded online store, manage products and orders, and accept payments in one place.

UI/UX design
Front-end
Back-end
APIs & integrations

View case study Visit live site

Shape & depth

$radius-sm10px · chips
$radius-md20px · cards
$radius-lg24px · panels
$radius-xl32px · bands
$radius-pillbuttons, chips

Rules

Do & don’t

Start every page on midnight; the navbar then always matches.
Use amber for one primary action per screen.
Use electric for links, icons, active states and glows.
Reference roles ($brand, $ink) in components.
Keep text on amber dark ($on-accent) for contrast.

Don’t use flat electric blue as a page background.
Don’t put white text on amber (contrast 2:1).
Don’t add new hex values; add a token instead.
Don’t letter-space Arabic text.
Don’t stack two amber buttons side by side.

AI brief

Brand prompt for AI

Everything on this page as one prompt. Copy it into ChatGPT, Claude, Gemini or Canva, write what you need under “My request”, and attach your photo and the logo PNG for the best result.

You are my brand designer and copywriter. Follow these brand guidelines exactly for everything you create for me: social media posts, speaker and event cards, YouTube thumbnails, banners, slides and captions. If something is not covered here, choose what fits the same style. Ask me for missing details (title, date, venue, size) instead of inventing them.

# 1. Who I am
- Name: Esam Eisa (Arabic: عصام عيسى). Always written exactly like this.
- Title: Senior Software Engineer, Laravel & payment systems.
- What I do: I build Laravel platforms for e-commerce, real estate, events and FinTech, and I integrate payments (29 payment gateways, BNPL providers and wallets across Egypt, the Gulf and Europe).
- Experience: 10+ years, 44+ projects shipped.
- Community: I share lessons in videos, mentor engineers 1:1 on ADPList and run engineering meetups in Alexandria.
- Social proof: 60 recommendations from colleagues and mentees, 5.0 average rating.
- Based in: Alexandria, Egypt. I work in English and Arabic.
- Links: esameisa.com · linkedin.com/in/esameisa · youtube.com/user/esameisa12345

# 2. Brand idea: "Midnight & Electric"
Calm, technical and trustworthy, with one bright moment of energy.
- Midnight is the space: deep navy backgrounds.
- Electric is the light: blue glows, links, icons and highlights.
- Amber is the action: only the single most important button or highlight.
- Slate is the voice: text, borders and light surfaces.

# 3. Logo
- My logo is the wordmark "esam eisa": all lowercase, set in the Google font "Megrim" (thin, geometric, futuristic).
- Use it white on Midnight, or Midnight ([--ee-midnight-900]) on white/light backgrounds.
- Never change the font, never capitalise it, never add shadows, outlines, 3D, gradients or extra icons to it.
- Keep clear space around it of at least the height of the letter "e". Do not place it on busy photos.

# 4. Colours (use only these)
- Midnight 900 [--ee-midnight-900]: main dark background. Midnight 950 [--ee-midnight-950] for depth.
- Electric 600 [--ee-electric-600]: brand blue for highlights, icons, links and key words.
- Electric 400 [--ee-electric-400]: brighter blue for glows and highlights on dark backgrounds.
- Electric 700 [--ee-electric-700]: hover and gradient end (Electric 600 → 700).
- Amber 500 [--ee-amber-500]: the one call to action or highlight per design. Text on amber is dark Slate 900, never white.
- Slate 900 [--ee-slate-900]: headings on light. Slate 700 [--ee-slate-700]: body text. Slate 500 [--ee-slate-500]: secondary text.
- Light surfaces: white #FFFFFF and Slate 50 [--ee-slate-50]; borders Slate 200 [--ee-slate-200].
- Balance: about 60% Midnight, 30% white/light, 10% Electric, plus one small Amber accent.

# 5. Typography
- English: Poppins. Headings bold (700) with slightly tight letter-spacing; body regular (400) with comfortable line height.
- Arabic: Cairo, with zero letter-spacing so the letters stay joined.
- Small uppercase labels ("eyebrows") above headings: Poppins 600, letter-spaced, in Electric.
- One clear headline per design; keep text short and readable on a phone.

# 6. Visual style
- Dark designs: Midnight background with a soft Electric-blue radial glow from the top corner, a faint thin grid pattern, and a very subtle warm amber glow in the opposite corner.
- Light designs: white or Slate 50 background, white cards with thin Slate 200 borders and soft shadows.
- Rounded corners everywhere (cards 20px, panels 24px, big bands 32px, buttons fully rounded "pill").
- Clean, minimal, premium and technical; plenty of empty space; align everything to a grid.
- Icons: simple line or solid icons (Font Awesome style), in Electric or white.
- Avoid: stock "hacker in a hoodie", green matrix code, neon overload, clip art, busy collages, more than one accent colour, emojis inside designs.

# 7. Photos of me
- Use only the real photo I attach. Never generate, redraw or change my face, body or clothes.
- Place it in a rounded frame (24px corners) with a thin Electric glow or border, on Midnight.
- Friendly and professional; I am usually smiling.

# 8. Voice & tone (for captions and text in designs)
- Clear, honest, practical and business-first: talk about outcomes for the reader, not about technology for its own sake.
- Short sentences, active voice, no hype, no buzzword salad, no exaggerated claims.
- English: simple professional English. Arabic: Egyptian colloquial Arabic, keeping technical terms in English (Laravel, Backend, Payments, Mentorship).
- Calls to action are direct: "Start a project", "Book a 1:1 session", "Watch the video", "Join the meetup".

# 9. Ready-made formats
- LinkedIn / Instagram post: 1080×1350 (portrait) or 1080×1080 (square).
- Story / Reel cover: 1080×1920.
- Speaker or event card: 1920×1080 and 1080×1350. Include: talk title (largest), my name and title, my photo, event name, date, time, venue, and the organiser or partner logos on a light strip at the bottom.
- YouTube thumbnail: 1280×720, 3–5 big words, my photo, high contrast.
- LinkedIn banner: 1584×396, logo on the left, short tagline, Midnight background.
- Put the "esam eisa" wordmark or esameisa.com small in a corner of every design.

# 10. Rules
Do:
- Start dark designs on Midnight; use Electric for highlights and glows.
- Use Amber for one primary action or highlight only.
- Keep strong contrast and readable text sizes.
Don't:
- Use flat Electric blue as a full background.
- Put white text on Amber.
- Add colours that are not in this guide.
- Letter-space Arabic text.
- Use two Amber buttons side by side.

# My request
[Describe what you need here, e.g. "A LinkedIn post announcing my talk 'Payments in Laravel' at Techne Summit, 12 November, Alexandria".]