In the bottom-left corner of this site, a cat is asleep. One that likes to jump around, and knows the whole file.
Suki is my actual cat, pixelated with love into 11 sprites and hidden in the site for whoever notices her. Wake her up, pet her and she meows, and sometimes she shares a secret or two about certain projects, and about me.
01, Why a cat
The site pretends to be a design file, and a good file hides at least one thing that isn’t strictly necessary. That’s Suki’s job: she is the reward for the curious. Plus, I love my cat so much I wanted her to be a part of my website.
The reference model, photographed mid-shift. Every sprite below was drawn from poses like this one.
02, The sprite sheet
Nothing on this site needs her. That’s exactly why she’s my favorite part of it.
I’m a product designer who can’t stop making things.
I research it, design it, and ship it, lately with an AI pair on the keyboard.
WORKS
Works
JOURNAL
Journal
the latest entries
ABOUT NARAM
naram, probably overthinking spacing
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section. Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
Frame · about-naram
THE DESIGNER
WHERE I’M FROM
OFF THE CLOCK
about naram
THE MANIFESTO
“Design for people, not numbers”
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section.
SO FAR
Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
FOOTNOTE · AI
built with Claude as a design-engineering pair. The full breakdown is in the journal: “how I built this site.”
naram, probably overthinking spacing
suki. yes, the same one walking around this site.
KILLINGTON, VT
INSTRUCTOR PASS · EAST COAST
PSIA CERTIFIED, LEVEL 2
instructor, 2 seasons
professionally certified in going downhill
ADMIT ONE · VOLUNTEER
BEY → CHINA
age 14, raising funds for Lushan earthquake relief
2013
ADMIT ONE · TRAVEL
BEY → ROMANIA
2024
Hello
مرحبا
こんにちは
Bonjour
BOARDING PASS · ONE WAY
BEY → USA
24 years in Beirut, Lebanon
carry-on: computer science degree
languages: العربية · English · Français · 日本語 (conversational)
SEAT 24A · NZ
PHOTOGRAPHY
06A
07A
08A
shot by me
HIKING
Chouwen - Lebanon
Kneisseh, Lebanon
Seward Range, New York
on foot whenever possible
CLIMBING
no climbing photos. climb this instead.
PIANO
currently: chopin, ballade no. 1
THE DESIGNER
about naram
naram, probably overthinking spacing
THE MANIFESTO
“Design for people, not numbers”
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section. Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
FOOTNOTE · AI
built with Claude as a design-engineering pair. The full breakdown is in the journal: “how I built this site.”
Hello
مرحبا
こんにちは
Bonjour
WHERE I’M FROM
BOARDING PASS · ONE WAY
BEY → USA
24 years in Beirut, Lebanon
carry-on: computer science degree
languages: العربية · English · Français · 日本語 (conversational)
SEAT 24A · NZ
ADMIT ONE · VOLUNTEER
BEY → CHINA
age 14, raising funds for Lushan earthquake relief
Product designer with a Computer Science background, working across research, prototyping, design systems and engineering handoff. Foundational designer at PropertyCard; now designs and ships AI-assisted products end to end, most recently Job Hunter, a private job-search app.
WORK EXPERIENCE
NARA DESIGNS LLC (SELF-EMPLOYED)
Product Designer & Owner
FEB 2023 - PRESENT · PITTSBURGH, PA
Designed web, brand, and product work for clients including Lazyleaf and Goodwood Tree, partnering directly with founders and engineers to turn requirements into buildable solutions.
Built reusable design systems and high-fidelity prototypes that shortened developer handoff and kept product decisions consistent across projects.
Create and ship complete products end to end with AI-assisted development, pairing design direction with tools like Claude and Codex to take ideas from concept to deployed, working software.
GLOBAL STUDY UK
Product & UX Designer (Contract)
APR 2022 - DEC 2022 · REMOTE
Designed an internal SaaS dashboard in Figma, consolidating university data, visa-sponsorship regulations, and institutional metrics into a single view that became the team's primary reference.
Saved the core business team an average of 8 hours per week per user by replacing fragmented legacy research processes with a unified search interface.
PROPERTYCARD
Product Designer
JAN 2021 - JAN 2022 · REMOTE
Led product design for a property-management platform as its foundational designer, translating regional property regulations into an intuitive layout.
Rebuilt core user journeys around three familiar interaction rules, so participants completed their journeys and retraced their steps without getting lost in validation testing.
Built a custom Figma design system from scratch and streamlined cross-functional engineering handoff with detailed documentation and front-end HTML/UI QA.
Designed and shipped a private job-search app end to end with AI-assisted development (Claude): a job feed from companies' own job boards, resume match scoring, tailored resumes and cover letters, and application filling.
Designed for trust: every tailored document is fact-checked against the person's own resume, AI spending is capped and shown, and personal data stays on the person's computer.
Built accessibility in from the start: keyboard use, screen-reader announcements, reduced motion, and light and dark themes.
NARAMU DESIGNS
Founder
Founded and grew an independent poster brand into a commercially viable business, generating 280 organic sales in its first year without paid marketing, through creative direction, product design, and audience-led storytelling.
Frame · design-system · not linked anywhere, you found it
design system
Every reusable element on the site, in one place. Critique freely.
00 · TOKENS
ink #141414
paper #F2EFE9
blue (UI) #0D99FF
blue (text) #0968AA
blue (button) #0878D0
orange (button) #FFB25E
orange (fill) #FF6B35
lime #C6F24E
pink #FF9EC6
yellow #FFF321
bright blue and orange are chrome, stickers, and chips (with ink text). Buttons use the button variants: badge-shade orange #FFB25E with ink text (10.3:1) and #0878D0 blue with white text (full AA). Small text on light backgrounds uses blue (text); orange is never text.
.frame-wrap · .frame-label · .card-frame (accent shadow via --cf-accent). The home journal teaser reuses the same card for the latest entry.
08 · NAVIGATION & CHROME
naram-ziady.fig· editingautosaved⌘K
bottom #toolbar with .tool-btn (fixed on the real site) · top .chrome bars
09 · SUKI
zzz
#suki-img sprite · animated #suki-zzz while she naps · #suki-toggle status pill (replicas, the real ones are fixed and JS-driven)
10 · JOURNAL BITS
NEWNEW
.jr-fresh badge and its .jr-fresh-sm index dot · journal thumbs deliberately keep soft shadows: the journal is the site's quieter, scrapbook voice
11 · FIGMA SELECTION FRAME (hero)
320 × 64
selected element
.sel-box · .sel-handle · dims tag: the bright UI blue lives here, never as text
12 · COVER ART (rendered artwork)
the artwork recipe: paper ground with a dot grid, one blue selection box holding the subject (Clash Display, ink), sticker pills with 3px ink borders and 6px offset shadows, cursor chips for whoever is "in the file" (claude's is blue), a blue dims tag, and quiet mono corner labels. facts on stickers must match the live site.
sources live in art-src/ as HTML, rendered by art-src/render.swift. never hand-edit the PNGs.
14 · BUILD MODE (home)
naramclaudeyou (viewing)Radius · 10−1.5%
C
Cclaude88 is shouting. 64?
Nnaramit’s a portfolio, it should shout
✓ resolved
naramButton · contact me
FillFFB25E
Stroke1.5 · #141414
Radius10
Shadow4 4 0 #141414
150 × 84⌘⌥C copy properties⌘Vpasted text32
Build mode (home): two cursors act out js/build-scenes.js. .bm-cursor (naram orange builds most · claude blue suggests and does quick passes) · .bm-thread comment pin + bubbles, ends ✓ resolved · .bm-tag value tag (phones get these instead of the panel) · .bm-sel selection in the cursor's colour · #bm-panel properties panel (desktop, one layer at a time) · .bm-img dragged-in image copy (lands big, resized to fit) · .bm-draw rectangle tool with live W × H · .bm-key shortcut tag beside the cursor · .bm-flash paste highlight · .bm-guide smart guide · .bm-hred gap redline. One scene plays at a time, the most visible one. Typed text is an aria-hidden copy over the real element; scenes pause off screen and finish quietly when you're far away; ambient tweaks every 6–12s after. Reduced motion, "finished", Dev Mode and other pages load finished. Hurry mode (H, or the #bm-hint tip under you (viewing), a pill by the toggle on touch): the visible scene runs 6x, threads shrink to one word, the top bar panics, then claude's #bm-after note. Shift+H starts over (forgets what was built this visit, reloads at the top). Suki (desktop, where she lives): a dashed .bm-suki-frame 'suki.png · missing' in her napping corner; naram zooms in (.bm-suki-panel, pixel grid) and pencils her 73×64 outline, claude bucket-fills, naram adds the white; claude makes her a component with a .bm-suki-set of real sprites, naram wires prototype arrows (after 30s idle / click to wake), ▶ and she walks off. Hurry pastes her in. Drag a sticker or the name frame and, 1.2s later, a cursor puts it back with a .bm-guide snap and a blame comment (lines in js/build-scenes.js; they go quiet after a few)
16 · TOOLBAR MODES + BUILD MENU
Build mode
naram and claude are building · 2 of 7
Skip aheadHReplay from the topShift + H
The toolbar is Figma's: pages on the left (current page filled blue), Actions (⌘K, rises from the toolbar: no search, tabs All / Actions / Pages, sections Resume → Actions → Pages, icons and shortcut keys; ↑↓ Enter, Tab switches tabs), then a grey mode group: Build (orange dot while building) and Dev (blue while on). Build opens this menu from the toolbar: on/off switch, status, Skip ahead (H), Replay from the top (Shift + H). Icon buttons have dark Figma-style tooltips. The "in a hurry? press H" tip rides under the visitor's cursor (above Build on touch); once they press it, an orange "still too slow? press H again" tip takes its place and a second H finishes everything at once; after a skip, a blue "want to watch it again? press Shift + H" tip offers the replay (and pressing H once it's all built asks "did you want to see it built again?"). Resizing the headline gets put back too (its own comment lines). The journal's view switch is a labelled segmented control: View · Scatter / Feed / Index, with a one-line hint of what the current view is
15 · DEV MODE (whole site, Shift + D)
DEV28--inkselected160 × 52
.dev-badge · redline label (orange fill, ink text) · padding tint · .dev-tok token chip · .dev-sel + .dev-dims · .dev-crumbs layer path. #dev-panel (bottom sheet on mobile, collapsed by default), from the toolbar's </> DEV button · design notes: every inspected element shows the decision behind it (its own, or its nearest parent's), from DEV_NOTES in js/data.js
13 · AQURO DIAL (archived)
the interactive three.js dial is parked, not deleted: module in archive/aquro-dial3d/ with restore steps, full history at the aquro-dial-3d git tag. the site is back to zero shipped dependencies.
“Naram is an awesome designer that has helped us deliver a multitude of projects for our clients (website design, graphics & product design). I enjoy his hands-on approach, the consulting that comes along with his services, and the accountability demonstrated throughout our collaboration.”
“Naram is an excellent web designer, who excelled in delivering a quality product in an efficient and effective manner. He was specific in understanding my goals, and also kind enough to explain some of the finer points of web design. His prices were reasonable for the top-notch work he performs, and I’d 10/10 recommend him for any web design needs you may have!”
CONTACT
Let’s get to work.
Tell me what you’re building. I read everything, and I actually reply.
COMMENTS (2)
Lazyleaf
“Naram is an awesome designer that has helped us deliver a multitude of projects for our clients (website design, graphics & product design). I enjoy his hands-on approach, the consulting that comes along with his services, and the accountability demonstrated throughout our collaboration.”
Goodwood Tree
“Naram is an excellent web designer, who excelled in delivering a quality product in an efficient and effective manner. He was specific in understanding my goals, and also kind enough to explain some of the finer points of web design. His prices were reasonable for the top-notch work he performs, and I’d 10/10 recommend him for any web design needs you may have!”