What this looks like in practice. Four bodies of work, built directly in code.
One real client site. Two self-directed product concepts. The site you are looking at right now. Each one demonstrates a different dimension of the work.
01 · Client Work
Brand Identity + Web · 2025
Dr. Marla Sabater
Eight-company ecosystem site for a Providence, RI founder with 30 years of business history across nine industries.
What was built
Brand audit, identity system, and cross-company style guide
Full brand system applied consistently across 8 distinct company pages
Per-route header color theming so each company carries its own visual accent
Complete SEO schema, structured data, and metadata strategy
Animated stat counters and GSAP scroll-triggered section reveals
Ecosystem navigation linking 8 sub-routes under a single domain
30 years of business history structured, organized, and displayed clearly
02 · Concept and build. In development.
Product Design + Engineering · 2026
LeadForms
A lead capture and booking system, designed end to end.
Full product concept and build: intake forms, AI-driven lead scoring, calendar booking, and a pipeline dashboard. Designed and built solo to show what a complete system looks like from interface to architecture.
Concept and build. Not yet available for deployment.
What it demonstrates
01
Lead capture form UX
Multi-step intake form design with conditional logic, field validation, and progress indication that keeps completion rates high.
02
AI-driven lead scoring
Scoring logic that evaluates urgency signals, stated intent, and fit criteria to surface hot leads automatically without manual triage.
03
Calendar booking flow
Booking UI that eliminates scheduling back-and-forth, connects to real availability, and confirms the appointment inline.
04
Pipeline dashboard design
A view that shows every lead, its score, its current stage, and the next action needed without requiring training to read or operate.
03 · Concept and build. In development.
Product Design + Engineering · 2026
LeadLetter
Outbound research, designed to feel like a real person wrote it.
A prospect research and outreach drafting concept. The system pulls real data on any business, identifies a specific angle worth mentioning, and writes a message that reads as considered rather than generated. Not an email sender. A drafting tool grounded in actual research.
Concept and build. Not yet available for deployment.
What it demonstrates
Pull real data. Not guesswork.
Prospect research synthesis from real sources: what the business actually does, what they say publicly, and what might be worth noting. The design challenge is surfacing signal from noise.
Find one specific thing worth saying.
Not a generic compliment. One concrete observation drawn from the research. The angle logic is the hard design problem: deciding what is actually interesting from everything the research found.
Write the message. Not a template.
A draft that reads as written by someone who actually looked at the business. Reply tracking UX shows what happened after the message was sent, without requiring a separate CRM.
04 · The Site You Are On Right Now
Front-End Engineering + Brand · 2026
osograjales.com
The site itself is a portfolio piece. Built from scratch, designed directly in code, without templates or page builders.
Every element on this site was designed and built by the same person offering to design and build yours. The editorial type system, the scroll animations, the writing section, the brand token architecture: all of it is a direct demonstration of the output you can expect.
See what this costs to commissionWhat it demonstrates
Editorial type system
Playfair Display at display scale paired with Source Sans 3 for body and UI. Size contrast used as a deliberate design tool, not decoration.
GSAP scroll animations
SplitText word reveals, clip-path entrances, and scroll-triggered section animations throughout.
Next.js 14 App Router
Server and client component split, generateMetadata, dynamic routes, and an MDX-powered content system.
Brand token architecture
CSS custom properties for the full color system, applied consistently across every component and page.
Writing and content system
MDX-powered writing section with frontmatter, reading time, related links, progress rail, and dynamic sitemap generation.
Responsive without breakpoint chaos
Mobile layout degrades cleanly using CSS class overrides on existing elements, not duplicated markup.
The work tells you what. The process tells you how.
Every project on this page followed the same eight steps. The brand audit, the code-direct design, the included copywriting, and a live deployment at the end. No handoffs, no templates, no surprises.
Read the full process