# Syed Mohammad Ammar

> Product designer and design engineer in Karachi, Pakistan. Until May 2026, Senior Product Designer at Mahaana (YC W22), where he led design for its iOS and Android investing apps. Designs from research and flows to design systems, then builds the front end in React and Next.js. #1 Top Author on 21st.dev, and publicly shipping 100 built projects.

Currently open to new projects: product design, web development, or both end to end. Based in Karachi, Pakistan (Asia/Karachi, UTC+5), working remotely with teams anywhere. The fastest way to reach him is email: syed.m.ammar@hotmail.com.

## Hire Ammar

- [Email Ammar](mailto:syed.m.ammar@hotmail.com): Project and role enquiries. Include what you're building and who it's for; what you need: product design, web development, or both; timeline and team setup.
- [How to evaluate and contact Ammar](https://www.smammar.com/skills/hire-ammar/SKILL.md): An agent skill: what he does, the evidence, and how to write to him
- [Full profile](https://www.smammar.com/llms-full.txt): Experience, education, skills, every case study and Lab piece in one file
- [Product Design](https://www.smammar.com/#services-heading): I turn complex requirements into clear web and app experiences. From the first user flow to the design system, I make each step easier to understand and each screen part of a consistent whole.
- [Web Development](https://www.smammar.com/#services-heading): I bring designs to life in React and Next.js, with responsive layouts and carefully considered interactions. When your team needs to manage content, I build in the tools to keep updates simple.

## Case studies

- [Iconimate: Small icons. A lot of decisions.](https://www.smammar.com/work/iconimate): How I designed and built Iconimate, an open-source library of 216 animated React icons on Phosphor: motion that suits each object, resting states that match the original glyphs, and components developers can install one at a time.
- [Mahaana: Investing starts with questions, not money.](https://www.smammar.com/work/mahaana-wealth): How I designed Mahaana's Shariah-compliant investing app for iOS and Android: onboarding in under five minutes, a home screen that puts the money first, and a design system built before the next product arrived.
- [Rebranding Truewind in Under Two Weeks](https://www.smammar.com/work/truewind-rebrand): Through NUMI (YC), I redesigned the full brand and web experience for Truewind (YC W23, AI-powered accounting): a new logo, UI system, and landing page, delivered in under two weeks.
- [Designing a Grocery Delivery App Through a Pandemic](https://www.smammar.com/work/peerdrop): At PeerDrop, a London COVID-era grocery delivery startup, I designed the entire mobile app experience: 1,000+ beta users, a +34% order acceptance rate, and a hand in raising £40,000 in seed funding.
- [100 Built Projects, Shipped in Public](https://www.smammar.com/work/design-engineering-100): A public pledge: become a design engineer by designing, building, and shipping 100 real projects. So far: a landing page built from scratch, the #1 Top Author spot on 21st.dev, and a local-first image tool. 1 down. 99 to go.

## About

- [About](https://www.smammar.com/about): Who he is: computer science at FAST, Interaction Design at Harbour.Space on a full scholarship, how he works, and the tools he uses (ChatGPT, Claude Design, Figma, Claude Code, Next.js, Tailwind CSS, Sanity)
- [Resume](https://www.smammar.com/resume): Roles, education and skills
- [Resume (PDF)](https://www.smammar.com/Syed-Mohammad-Ammar-Resume.pdf): His one-page resume, as a file to download

## Lab

- [Anti-Metal Button](https://www.smammar.com/lab/anti-metal-button): A dark metal button whose lime tab slides across on hover while its dot chevrons ripple.
- [Music Player Widget](https://www.smammar.com/lab/music-player): A compact player with a spinning vinyl, a dot-matrix mixer and titles that cross over between tracks.
- [Pattern Engine](https://www.smammar.com/lab/pattern-engine): A deterministic pattern generator for writing, publishing, and site visuals.
- [Perspective Highlight](https://www.smammar.com/lab/perspective-highlight): A card that tilts toward your cursor while its highlighted phrases lift off the page.
- [Dither Mark](https://www.smammar.com/lab/pixel-mark): The site logo mark: a dithered A across scale, variants, and interaction states.
- [Pixel Scatter Button](https://www.smammar.com/lab/pixel-scatter): A call-to-action after the Next.js Conf 2025 ticket button, where hover shatters it into flashing pixels.
- [Pixel Wave](https://www.smammar.com/lab/pixel-wave): A split-flap text animation built from Geist Pixel and Geist Sans.
- [Scroll Reel Testimonials](https://www.smammar.com/lab/scroll-reel-testimonials): A testimonial carousel where a reel of portraits counter-rotates and each quote rises in letter by letter.

## Optional

- [LinkedIn](https://www.linkedin.com/in/syedmammar/): Syed Mohammad Ammar on LinkedIn
- [GitHub](https://github.com/smammar100): Syed Mohammad Ammar on GitHub
- [Dribbble](https://dribbble.com/smammar14): Syed Mohammad Ammar on Dribbble
- [Writing](https://www.smammar.com/writing): Notes from the design-engineering run